テーブルの各要素を表すthead・tbody・tfootについて【HTML】

tableタグを使う時、tbodyタグは必ず使用しますが、テーブルの構造によってtheadタグやtfootタグは使用しないという場合もあります。あまり意味を理解しないで使用している人も多いと思う、この各要素。このthead、tbody、tfoot要素について詳しく解説していきます。

thead、tbody、tfoot要素について

thead、tbody、tfootの各要素はtableタグの中で使用し、下記のように各要素毎にグループ化(構造化)する役割があります。

• thead
  テーブルのヘッダー部分(見出し)としてグループ化する要素
• tbody
  テーブルの本体部分(内容)としてグループ化する要素
• tfoot
  テーブルのフッター部分としてグループ化する要素

簡単に説明すると、ヘッダー、ボディ、フッターに分ける為の要素です。

各要素の使用例

次に、各要素の実際の使用例をコードと一緒に見ていきます。
記述する順番は、thead、tbody、tfootの順に記述していきます。tbodyタグは必須ですが、theadタグやtfootタグはテーブルの構造上必要なければ、無くても問題ありません。

<table>
    <thead>
        <tr>
            <th>商品</th>
            <th>値段</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>商品1</th>
            <td>10,000円</td>
        </tr>
        <tr>
            <th>商品2</th>
            <td>3,500円</td>
        </tr>
        <tr>
            <th>商品3</th>
            <td>23,500円</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>合計</th>
            <td>37,000円</td>
        </tr>
    </tfoot>
</table>

このような形で使用する事ができ、CSSで各要素毎に装飾をしたら見やすいテーブルにも出来ます。
適切なタグを使用する事でSEO的にも有利になりますので、覚えておきましょう。

tbodyは複数使える

今回各要素について改めて調べてみたら、tbodyタグは複数使用出来る事を初めて知りました(汗)。
長年コーディングしていますが、tbodyタグは一回だけと思い込んでいたため驚きです。

tbodyタグはテーブルの本体(内容)部分となりますので、複数ある事で段落的な役割をするのかどうかは調べても分からなかったのですが、そこまで影響は無いものかと思っています。
ですので、複雑なテーブルでCSSでの装飾が難しい場合などに、tbodyタグで分けて装飾が楽に出来そうなので、今度使用出来る機会があれば使用してみたいと思います。

さいごに

いかがでしたでしょうか。
今回は基本的なテーブルのthead、tbody、tfoot要素について解説していきました。
タグの理解を深め、適切なタグを使用するようにしていきたいですね。