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
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要素が他にない場合)