HTML5のテーブル系～tr要素とth要素とtd要素～

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

テーブル関連

<table>
    <tr>
        <th scope="row">メニュー</th>
        <th id="shouyu">醤油ラーメン</th>
        <th id="miso">味噌ラーメン</th>
        <th id="sio">塩ラーメン</th>
    </tr>
    <tr>
        <th id="price">値段</th>
        <td headers="shouyu price">800円</td>
        <td headers="miso price">850円</td>
        <td headers="sio price">800円</td>
    </tr>
    <tr>
        <th>カロリー</th>
        <td>420kcal</td>
        <td>570kcal</td>
        <td>480kcal</td>
    </tr>
</table>

chromeで表示したとき

tr要素

テーブル内のセルの行を表す。

カテゴリ
・なし

コンテンツモデル
・0個以上のtd,th,またはスクリプトサポーティング要素

コンテンツ属性
・グローバル属性

タグの記載場所
・theadの子要素、tbodyの子要素、tfootの子要素として配置可能。
・tbodyの子要素として、caption,colgroup,theadの後に配置可能。(ただし、table要素内にtbody要素がない場合に限る)

th要素

テーブル内のヘッダーセルを表す。

カテゴリ
・なし

コンテンツモデル
・フローコンテンツ(ただし、header要素,footer要素,セクショニングコンテンツ,ヘッディングコンテンツ要素以外)

コンテンツ属性
・グローバル属性
・colspan - またがるセルの列数
・rowspan - またがるセルの行数
・headers - 属性を指定したセルに対応するヘッダーセルのidを指定
・scope - ヘッダーセルをどのセルに指定するか指定。row, col, rowgroup, colgroup, autoの5つの状態があり、デフォルトはauto。auto以外はキーワードとして指定。
・abbr - 他のコンテキストでセルを参照するときにヘッダーセルに使用する代替ラベル

タグの記載場所
・tr要素の子要素として配置

td要素

テーブル内のデータセルを表す。

カテゴリ
・セクショニングルート

コンテンツモデル
・フローコンテンツ

コンテンツ属性
・グローバル属性
・colspan - またがるセルの列数
・rowspan - またがるセルの行数
・headers - 属性を指定したセルに対応するヘッダーセルのidを指定

タグの記載場所
・tr要素の子要素として配置