HTMLのthead・tbody・tfootの使い分けを完全解説！初心者でもわかるテーブル構造の基本

先生と生徒の会話形式で理解しよう

生徒

「先生、HTMLのテーブルでthead、tbody、tfootって何ですか？どう使い分ければいいんですか？」

先生

「簡単に言うと、theadは表のヘッダー、tbodyは本体、tfootはフッターの部分を分けるためのタグです。見た目だけでなく、検索エンジンやスクリーンリーダーにも意味が伝わります。」

生徒

「見た目は同じテーブルでも、分けて書く必要があるんですか？」

先生

「はい。特に大きな表や複雑な表では、thead、tbody、tfootを使うことで構造がはっきりしますし、印刷やスクロールにも便利です。それでは順番に見ていきましょう！」

1. theadとは？テーブルのヘッダーを作る

theadはテーブルの見出し行をまとめるタグです。表の列の名前や説明を入れる場所です。ユーザーが表を見たときに、各列が何を表しているのかすぐわかるようにします。


<table border="1">
    <thead>
        <tr>
            <th>商品名</th>
            <th>価格</th>
            <th>数量</th>
        </tr>
    </thead>
</table>

ブラウザ表示

ここでは「商品名」「価格」「数量」が列の名前としてthead内に記述されています。

2. tbodyとは？テーブルの本体データをまとめる

tbodyはテーブルの本体、つまり実際のデータを入れる部分です。theadで列の意味を示したら、tbodyで具体的な情報を記入します。tbodyを使うと、行をグループ化できるのでスクロールやスタイルの調整がしやすくなります。


<table border="1">
    <thead>
        <tr>
            <th>商品名</th>
            <th>価格</th>
            <th>数量</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>りんご</td>
            <td>100円</td>
            <td>5個</td>
        </tr>
        <tr>
            <td>バナナ</td>
            <td>80円</td>
            <td>10本</td>
        </tr>
    </tbody>
</table>

ブラウザ表示

3. tfootとは？テーブルの集計や補足情報をまとめる

tfootは表の最後に出す合計や平均などの情報をまとめるためのタグです。表の下に計算結果や補足を置くことで、表全体を見やすく整理できます。


<table border="1">
    <thead>
        <tr>
            <th>商品名</th>
            <th>価格</th>
            <th>数量</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>りんご</td>
            <td>100円</td>
            <td>5個</td>
        </tr>
        <tr>
            <td>バナナ</td>
            <td>80円</td>
            <td>10本</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>合計</td>
            <td>180円</td>
            <td>15</td>
        </tr>
    </tfoot>
</table>

ブラウザ表示

4. thead・tbody・tfootを使うメリット

これらのタグを使うと、検索エンジンやスクリーンリーダーに表の構造を正しく伝えられます。またCSSでスタイルを指定しやすく、印刷やページスクロール時にヘッダーを固定することも可能です。表を分けることで、後からデータを追加する際にも見やすく整理できます。


<table border="1">
    <thead>
        <tr><th>科目</th><th>点数</th></tr>
    </thead>
    <tbody>
        <tr><td>数学</td><td>90</td></tr>
        <tr><td>英語</td><td>85</td></tr>
    </tbody>
    <tfoot>
        <tr><td>平均</td><td>87.5</td></tr>
    </tfoot>
</table>

ブラウザ表示

5. 実務での使い方のポイント

実際のWeb制作では、商品一覧、売上表、社員名簿など、行数が多くなる表でthead・tbody・tfootを活用すると便利です。CSSでtheadを固定してスクロールしたり、tfootを目立たせたりすることもできます。HTMLの意味的な構造を意識すると、アクセシビリティも向上します。


<table border="1">
    <thead>
        <tr>
            <th>社員名</th>
            <th>部署</th>
            <th>勤続年数</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>田中太郎</td><td>営業</td><td>5年</td></tr>
        <tr><td>鈴木花子</td><td>開発</td><td>3年</td></tr>
    </tbody>
    <tfoot>
        <tr><td colspan="2">平均勤続年数</td><td>4年</td></tr>
    </tfoot>
</table>

ブラウザ表示

6. thead・tbody・tfootを使わない場合との違い

もしtheadやtfootを使わず、すべてtrだけで書くと、表の意味が検索エンジンや支援技術に伝わりにくくなります。データが増えたときに見づらくなるだけでなく、アクセシビリティの面でも不利です。構造化されたHTMLを意識することが大切です。


<table border="1">
    <tr><th>商品名</th><th>価格</th><th>数量</th></tr>
    <tr><td>りんご</td><td>100円</td><td>5個</td></tr>
    <tr><td>バナナ</td><td>80円</td><td>10本</td></tr>
</table>

ブラウザ表示

この場合、見た目は同じですが、thead・tfootを使ったときよりも意味が伝わりにくくなります。

7. まとめのポイント

HTMLのthead、tbody、tfootを正しく使うことで、テーブルの意味や構造を明確にできます。theadは列の名前、tbodyはデータ本体、tfootは合計や補足情報という役割です。初心者でも簡単に実践でき、後でCSSでスタイルを調整したり、アクセシビリティを向上させたりする際にも役立ちます。

まとめ

ここまで、HTMLの

タグにおける、、の役割と正しい使い分けについて詳しく解説してきました。初心者の方でも理解しやすいように、見出し行、データ本体、合計や補足情報という三つのブロックに分けることで、表の意味を明確にする方法を学びました。
theadはテーブルのヘッダーとして列の名前や説明をまとめ、表全体の構造をわかりやすくします。tbodyは実際のデータ本体をまとめる部分で、行をグループ化することでスクロールやスタイル調整が容易になります。そしてtfootは表の下部に集計や補足情報を置くことで、表全体を見やすく整理する役割を持っています。
これらのタグを使うことにより、検索エンジンやスクリーンリーダーなどの支援技術にも正しい意味を伝えることができ、アクセシビリティの向上にもつながります。さらに、CSSでスタイルを指定しやすくなり、theadを固定してスクロールさせたり、tfootを目立たせたりする実務的なデザインも簡単に行えます。
実務の場面では、商品一覧表、売上表、社員名簿など行数が多い表で特に有効です。thead・tbody・tfootを正しく使い分けることで、後からデータを追加しても整理された見た目を維持でき、印刷や画面表示でも安定した表現が可能です。
例えば、下記のように社員の勤続年数をまとめる表では、theadで列名を示し、tbodyで社員データを記入し、tfootで平均勤続年数を表示することで、表全体の意味が明確になります。

 <table border="1"> <thead> <tr> <th>社員名</th> <th>部署</th> <th>勤続年数</th> </tr> </thead> <tbody> <tr><td>田中太郎</td><td>営業</td><td>5年</td></tr> <tr><td>鈴木花子</td><td>開発</td><td>3年</td></tr> </tbody> <tfoot> <tr><td colspan="2">平均勤続年数</td><td>4年</td></tr> </tfoot> </table>

ブラウザ表示

このように、thead・tbody・tfootを使うことで表の意味や構造が検索エンジンやスクリーンリーダーに正しく伝わり、アクセシビリティやユーザー体験を向上させることができます。さらに、コードを整理して書くことができるため、後からメンテナンスする際にも便利です。逆に、これらを使わずにすべて

だけで書くと、表の意味がわかりにくくなり、データが増えると管理が難しくなります。
また、thead・tbody・tfootを活用するとCSSでのスタイル適用が容易になり、表のデザイン性も向上します。印刷用の表やスクロール固定のヘッダーなど、Web制作のさまざまなシーンで役立つため、HTMLの基礎としてしっかり覚えておくことが重要です。

先生と生徒の振り返り会話

生徒

「先生、今回学んだthead、tbody、tfootの使い方をまとめるとどうなりますか？」

先生

「簡単に言うと、theadは列名や見出しをまとめる部分、tbodyはデータの本体、tfootは合計や補足情報をまとめる部分です。これを正しく使うことで表の構造が明確になり、見た目だけでなく意味も伝わりやすくなります。」

生徒

「全部

で書くよりも、検索エンジンやスクリーンリーダーに優しいんですね。」

先生

「そうです。特に行数が多い表では、thead・tbody・tfootを使うと管理がしやすく、CSSでスタイルを調整したり、スクロール固定をしたりする際にも便利です。実務で商品一覧や社員名簿などを作るときにも役立ちます。」

生徒

「なるほど。これから表を作るときは、見た目だけでなく意味も考えて書くようにします。」