HTML5のテーブル系～colgroup要素とcol要素～ - チョコパイを240こ食べたエンジニア

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

テーブル関連

colgroup要素

テーブル内の1つ以上の列のグループを表す。

<table>
    <caption>とあるラーメン屋のメニュー</caption>
    <colgroup span="1"></colgroup>
    <colgroup span="3"></colgroup>
    <tr>
        <th>メニュー</th>
        <th id="shouyu">醤油ラーメン</th>
        <th id="miso">味噌ラーメン</th>
        <th id="sio">塩ラーメン</th>
    </tr>
    <tr>
        <th id="price">値段</th>
        <td>800円</td>
        <td>850円</td>
        <td>800円</td>
    </tr>
    <tr>
        <th>カロリー</th>
        <td>420kcal</td>
        <td>570kcal</td>
        <td>480kcal</td>
    </tr>
</table>

chromeで表示したとき※グループごとに色分けした
f:id:chooringo:20190629171732p:plain

カテゴリ
・なし

コンテンツモデル
・span属性がある場合：なし
・span属性がない場合：0個以上のcol要素とtemplate要素

コンテンツ属性
・グローバル属性
・span - またがる列数を指定。ゼロより大きい正の整数を指定。

タグの記載場所
・table要素の子要素として、caption要素の後かつ、thead要素・tbody要素・tfoot要素・tr要素の前に配置可能。

col要素

テーブル内の1つ以上の列のグループを表す。

<table>
    <caption>とあるラーメン屋のメニュー</caption>
    <colgroup><col></colgroup> <!-- ➀ -->
    <colgroup><col><col><col></colgroup> <!-- ➁ -->
<!--  ➀と➁は以下でも同じ結果になる
    <colgroup><col span="1"></colgroup>
    <colgroup><col span="3"></colgroup>
 -->
    <tr>
        <th>メニュー</th>
        <th id="shouyu">醤油ラーメン</th>
        <th id="miso">味噌ラーメン</th>
        <th id="sio">塩ラーメン</th>
    </tr>
    <tr>
        <th id="price">値段</th>
        <td>800円</td>
        <td>850円</td>
        <td>800円</td>
    </tr>
    <tr>
        <th>カロリー</th>
        <td>420kcal</td>
        <td>570kcal</td>
        <td>480kcal</td>
    </tr>
</table>