【HTML】table の行をヘッダ・本体・フッタにグループ化する

スポンサーリンク

HTML のテーブルのを意味的にヘッダ、本体、フッタグループ化する場合は、 thead 要素(ヘッダ)、tbody 要素(本体)、tfoot 要素(フッタ)を使用します。

注意点としては、本体部分よりもフッタ部分を先にブラウザに認識してもらうために、 thead(ヘッダ)、tfoot(フッタ)、tbody(本体)の順番に記述します。

tbody 要素(本体)は必要に応じて複数配置することができます。

行のグループ化のサンプル

下のコードは、thead 要素(ヘッダ)、tbody 要素(本体)、tfoot 要素(フッタ)を使用して、 テーブルの行をグループ化しています。

thead(ヘッダ)、tfoot(フッタ)、tbody(本体)の順番に記述していることに注意してください。


<table>
    <!--  ヘッダ  -->
    <thead>
        <tr><th>ヘッダA</th><th>ヘッダB</th></tr>
    </thead>
    <!--  フッタ  -->
    <tfoot>
        <tr><td colspan="2">フッタ</td></tr>
    </tfoot>
    <!--  本体  -->
    <tbody>
        <tr><td>データA-1</td><td>データB-1</td></tr>
        <tr><td>データA-2</td><td>データB-2</td></tr>
    </tbody>
</table>

表示結果

ヘッダAヘッダB
フッタ
データA-1データB-1
データA-2データB-2

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト