「html」colgroup属性でテーブルのcolspanの列幅を指定する

2022年8月20日

環境
Google Chrome 104.0.5112.102

構文
1.colgroupの設定

<colgroup>
　　<col style="width:数値;">
</colgroup>

colgroupを使って、colspanの列幅を指定します。
HTML の <colgroup> 要素は、表内の列のグループを定義します。
2.colspanとrowspanの設定
<td colspan="横につなげるセルの数"　rowspan="縦につなげるセルの数">
colspanとrowspanを指定して、テーブルの行と列をcolspanとrowspanでつなげています。

使用例

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

<table style="width: 60%;">
 <!-- colspanの列幅を指定-->
 <colgroup>
    <col style="width:15%;">
    <col style="width:35%;">
    <col style="width:35%;">
    <col style="width:15%;">
  </colgroup>
  <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