チョコパイを240こ食べたエンジニア

PHPエンジニアをやった後、現在はフロントエンドエンジニアに・・。好物は『チョコパイと焼き鳥』。Twitterは@chooringo(ちょうりんご)

HTML5のテーブル系~thead要素とtbody要素とtfoot要素~

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

テーブル関連

<table>
    <thead>
        <tr>
            <th>メニュー</th>
            <th>プレーンドーナツ</th>
            <th>チョコドーナツ</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>値段</th>
            <td>100円</td>
            <td>120円</td>
        </tr>
        <tr>
            <th>カロリー</th>
            <td>380kcal</td>
            <td>390kcal</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>メニュー</th>
            <th>プレーンドーナツ</th>
            <th>チョコドーナツ</th>
        </tr>
    </tfoot>
</table>

chromeで表示したとき
ピンク:thead グレー:tbody ブルー:tfoot
f:id:chooringo:20190706180510p:plain

thead要素

親要素であるtable要素のヘッダーの行グループを表す。

カテゴリ
・なし

コンテンツモデル
・0個以上のtr要素
・script要素、template要素

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

タグの記載場所
・table要素の子要素として、caption要素やcolgroup要素の後、かつtbody要素やtfoot要素やtr要素の前に配置。
(ただし、table要素の子であるthead要素が他にない場合)

tbody要素

親要素であるtable要素の本体部分の行グループを表す。

カテゴリ
・なし

コンテンツモデル
・0個以上のtr要素
・script要素、template要素

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

タグの記載場所
・table要素の子要素として、caption要素やcolgroup要素やthead要素の後に配置。
(ただし、table要素の子であるtr要素がない場合)

tfoot要素

親要素であるtable要素のフッター部分の行グループを表す。

カテゴリ
・なし

コンテンツモデル
・0個以上のtr要素
・script要素、template要素

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

タグの記載場所
・table要素の子要素として、caption要素やcolgroup要素やthead要素やtbody要素やtr要素の後に配置。
(ただし、table要素の子であるtfoot要素が他にない場合)