[html]colspanとrowspan属性でテーブルの行と列をつなぐサンプル

2022年8月20日

環境
Google Chrome 104.0.5112.102

書式
<td colspan="横につなげるセルの数"　rowspan="縦につなげるセルの数">
colspanとrowspanを指定して、テーブルの行と列をcolspanとrowspanでつなげています。
セルを横に2つつなげる場合、colspan="2″とします。
セルを縦に2つつなげる場合、rowspan="2″とします。

使用例

<!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とrowspanを指定します -->
    <td class="cft" colspan="2" rowspan="2">テーブルの行と列をつなぐ</td>
    <td>大阪</td>
  </tr>
    <tr>
    <td>AA</td>
    <td>BB</td>
  </tr>
  <tr>
    <td>11</td>
    <td>22</td>
    <td>33</td>
    <td>55</td>
  </tr>
</table>
</body>
</html>

Html

Posted by arkgame

関連記事: