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
HTML・CSS入門