「html」colspan属性でテーブルの列を横につなぐサンプル

2022年8月20日

環境
Google Chrome 104.0.5112.102

書式
td colspan="横につなげるセルの数"
セルを横に2つつなげる場合、colspan="2″とします。
指定したセルの数分、セルを横につなげます。
テーブルの上側のセルをcolspanで横につなげています。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
  table{border-collapse:collapse;}
  table td{border:2px solid}
  .cft{background:yellowgreen}
</style>
</head>
<body>

<table style="width: 60%;">
  <tr>
    <td>東京</td>
    <!--colspanを指定します -->
    <td class="cft" colspan="2">セルを横に2つつなげる</td>
    <td>大阪</td>
  </tr>
  <tr>
    <td>11</td>
    <td>22</td>
    <td>33</td>
    <td>55</td>
  </tr>
</table>
</body>
</html>

Html

Posted by arkgame

関連投稿: