thead・tbody・tfootタグとは？意味や違い、必要性、HTMLのtable内での使い方解説

HTMLで表（テーブル）を作るとき、解説サイトやサンプルコードでよく見かける <thead>、<tbody>、<tfoot> タグ。「<tr> や <td> だけでも表は作れるのに、なぜこれらのタグが必要なのか」「見た目は変わらないのに、わざわざ書く意味はあるのか」と疑問に感じる人は少なくありません。

実際、thead・tbody・tfootタグは、記述しなくてもブラウザ上に表を表示できます。そのため、HTMLを学び始めたばかりの頃は「省略しても問題ないのでは？」と思いがちです。

しかし、これらのタグは表の見た目を変えるためのものではなく、表の構造を「見出し」「データ本体」「フッター」に分けて意味付けするための重要なタグです。
適切に使用することで、コードの可読性や保守性が向上するだけでなく、CSSやJavaScriptで操作しやすくなり、アクセシビリティの向上にもつながります。

そのため、Web制作の現場では、意味のあるHTML（セマンティックHTML）を書くための基本として広く利用されています。

ここでは、thead・tbody・tfootタグの意味や役割、3つのタグの違い、HTMLのtableタグ内での基本的な書き方や必要性について、初心者にも分かりやすく解説します。

それぞれのタグの詳しい使い方や注意点は個別記事で詳しく紹介しているため、本記事ではまず3つのタグの全体像を理解していきましょう。

thead・tbody・tfootタグとは？

HTMLで表（テーブル）を作るとき、基本的には「<table></table>」、「<tr></tr>」、「<th></th>」、「<td></td>」の4つのタグがあれば、画面に表を表示することは可能です。

では、なぜわざわざ「<thead></thead>」、「<tbody></tbody>」、「<tfoot></tfoot>」タグを使うのか？

その理由は、「表が長くなっても迷子にならないように、役割ごとにグループ分けをするため」です。

表には、「見出し」「データ」「合計や補足情報」など、それぞれ異なる役割を持つ行がありますが、これらを役割ごとに区別することで、表の構造が分かりやすくなり、人だけでなくブラウザや検索エンジンにも意味を伝えやすくなります。

このように、thead・tbody・tfootで囲むことで、「見出し」「データ」「フッター」という3つの役割を持つ表として構造化できます。

thead・tbody・tfootタグの意味と役割

thead・tbody・tfootタグは、それぞれ表の中で異なる意味を持っています。
これらの意味を理解し、使い分けることで、表の構造が明確になり、コードの可読性や保守性の向上にもつながります。

thead（テーブル・ヘッド）

theadは、名前の通りテーブルの「頭（Head）」、つまり表の項目名（見出し）をまとめるパーツです。

役割	「ここから下は、何について書かれたデータなのか」を宣言する
中に入るもの	必ず、見出しを意味する <th></th> タグとセットで使います。<thead> と </thead> の中に横一行（<tr></tr>）を作り、その中に <th></th> を並べるのが正しい書き方です。
イメージ	家計簿の「日付」「項目」「金額」といった、一番上の行のことです。

💡 注意！「caption」タグとの違い
表のタイトルを付けるタグに <caption></caption> がありますが、<thead></thead> とは役割がまったく違います。

captionタグ	表全体の「タイトル（題名）」です。HTMLコードでは <table> タグのすぐ直下（最初）に書きますが、ブラウザの画面上では表の枠線の上に乗るように表示されます。
theadタグ	表の横一列の「項目名（見出し）」をまとめるグループです。こちらは表の枠線の内側に表示されます。

tbody（テーブル・ボディ）

tbodyは、テーブルの「体（Body）」、つまり表のメインとなるデータ（中身）を丸ごとまとめるパーツです。

役割	表の「主役」である具体的なデータたちを1つに包み込む
中に入るもの	具体的な数値やテキストを表す <td></td> タグが大量に入ります
イメージ	家計簿でいうと、「4月1日 / 食費 / 500円」「4月2日 / 日用品 / 1,200円」といった、毎日増えていくデータの行のことです。

tfoot（テーブル・フット）

tfootは、テーブルの「足（Foot）」、つまり表の最後を締めくくるおまけや結果をまとめるパーツです。

役割	表のデータ全体の「合計値」や「平均値」、または「※注意書き」などを載せる
中に入るもの	<td></td> や <th></th> タグが入ります
イメージ	家計簿の一番下にある「合計金額 1,700円」という行のことです。

なお、これらのタグは見た目を変更するためのものではありません。表に意味を持たせ、管理しやすくするためのタグであり、Web制作では一般的に使用されています。

thead・tbody・tfootタグの違い

タグ	意味	入れる内容
thead	見出し	タイトル行
tbody	本体	データ
tfoot	フッター	合計/補足

thead・tbody・tfootタグの正しい書き方【基本編】

thead・tbody・tfootタグを使った、基本となる正しいHTMLコードの書き方をコード例を示して解説します。

基本のサンプルコード（家計簿の例）

ブラウザでの表示は下記の様になります。

4月の家計簿

日付	項目	金額
4月1日	食費	500円
4月2日	日用品	1,200円
–	合計金額	1,700円

上記の表示例は、見やすくするためにCSSで色や枠線を付けています。サンプルコード（HTMLだけ）のままだと、枠線のないシンプルな見た目になります。

書き方の最重要ルール：書く「順番」に注意！

HTML Living Standardのルールでは、コードを書く順番が「thead ➔ tbody ➔ tfoot」の順と決められています。

人間の「頭（head）➔ 体（body）➔ 足（foot）」と同じ順番なので、とても覚えやすいはずです。この順番通りに上から並べて書いてください。

🤔ちょっと待って！「横向きの表」や「途中の見出し」はどうするの？
HTMLで表を作っていると、左側の1列目がすべて見出し（<th>）になる「横向きの表」や、データの途中に新しい見出し行が挟まれるような、少し複雑な表を作りたいときもあります。

「その場合も、無理やり一番上にtheadタグを書かないといけないの？」と迷ってしまうかもしれませんが、
結論から言うと、無理に書く必要はありません！

実は、表の構造によってはtheadタグを使わずにtbodyタグだけで書くのが正解だったり、tbodyタグを複数使って綺麗に整理するプロのテクニックがあったりします。

このあたりの「横向きの表の正しい書き方」や「途中の見出しの扱い方」、さらに一歩進んだテクニックについては、下記のtheadタグの解説記事で詳しく解説しています！

基本の形がマスターできたら、ぜひこちらもチェックして表現の幅を広げてみてください。

＞＞theadタグの書き方！HTMLで表を作るtableタグ内でのtheadタグの使い方を応用まで解説

thead・tbody・tfootタグは書かなくても表示はされる

実は、HTMLのルール上、thead・tbody・tfootタグは絶対に書かなければいけないわけではありません。

tableタグの中に、直接 <tr></tr>（行）や<td></td>（マス）だけを並べても、ブラウザは問題なく綺麗な表を画面に表示してくれます。1〜2行で終わる単純な表であれば、これらのタグがなくても見た目上はまったく困ることはありません。

ではなぜプロの現場や品質の高いサイトではこれらのタグが必ず使われているのでしょうか？そこには、見た目だけでは分からない絶大なメリットがあるからです。

それでもthead・tbody・tfootタグを使う理由（メリット）

プロの制作現場でthead・tbody・tfootタグが「必須」とされている理由は、主に次のメリットがあるからです。

① 大きなテーブルでも管理しやすく、コードの可読性が上がる

数行の表なら問題ありませんが、何十行、何百行もある大きな表（売上データや商品一覧など）を作る場合、タグがないと「どこからどこまでがデータの中身なのか」がコード上で分からなくなってしまいます。

3つのタグで綺麗にグループ分けしておくことで、コードの可読性（読みやすさ）が劇的にアップし、後からデータを追加したり修正したりする際も、迷わずに作業ができてメンテナンス（保守）が非常に楽になります。

② CSSのスタイル（装飾）を一括で指定しやすい

「見出しの行だけ背景をグレーにしたい」「合計の行だけ太字にして目立たせたい」というとき、このタグがないと、すべての行（

）にわざわざクラス名（class）を付ける必要があり、非常に面倒です。

しかし、タグでグループ化されていれば、「theadに背景色をつける」「tfootを太字にする」とCSSで指定するだけで、中にある要素のデザインを一括でコントロールできます。

③ JavaScriptでデータを取得・操作しやすい

Webサイトに動きをつけるJavaScriptを使う際、このグループ分けは強力な武器になります。

例えば「ボタンを押したら、表の『中身（tbody）』のデータだけを並び替える（ソートする）」といったプログラムを組む際、

という明確な目印があることで、見出し（thead）や合計行（tfoot）を巻き込まずに、動かしたいデータだけを正確に狙い撃ちして操作できます。

④ HTMLの意味（セマンティック）を明確にできる

検索エンジンのロボットや、目が見えない方が使う画面読み上げソフト（スクリーンリーダー）に対して、「ここが表の見出し」「ここからがデータ本体」と、HTMLの意味を正しく伝えることができます。

タグ本来の意味を正しく使って記述することを「セマンティックなHTML」と呼び、誰にでも優しくWeb標準に沿った高品質なサイトを作るために欠かせない考え方です。

⑤ 印刷するときにヘッダーが自動で繰り返し挿入される

データ量の多い長い表を印刷（またはPDF化）するとき、表が2ページ、3ページと複数枚にまたがることがあります。
このとき、thead・tbody・tfootの3つのタグが書いてあれば、ブラウザが気を利かせてすべてのページの上下に「見出し（thead）」と「合計（tfoot）」を自動的に繰り返し印刷してくれます。

thead・tbody・tfootタグで初心者が覚えておきたい5つのポイント

thead・tbody・tfootタグは必須のタグではありませんが、使い方を理解しておくことでHTMLの構造をより正しく書けるようになります。

① 必須のタグではない（省略しても表示は変わらない）

tableタグは、trタグとtdタグ（またはthタグ）だけでも表として成り立ちます。そのため、3つのタグを省略しても、ブラウザ上の見た目や表示結果には影響しません。
まずは「表を綺麗に整理するためのオプションパーツ」と捉えてOKです。

② 実務（プロの現場）では使用することが多い

趣味のサイトなら省略しても問題ありませんが、Web制作の現場では、表の構造を明確にし、CSSやJavaScriptで扱いやすくするためにthead・tbody・tfootタグをセットで使うことが一般的（プロの標準マナー）になっています。

③ tbodyタグは「勝手に自動挿入」される

HTMLではtbodyタグを明示的に書かなくても、ブラウザが自動的に補完する仕様になっています。そのため、コード上ではtbodyが書かれていないように見えても内部的には生成されています。

④ WordPressなどのCMSでは自動的に構造化される

WordPressなどのCMSでは、エディタでtableを挿入すると、内部的にtbodyが自動で補完される場合があります。ただしこれはHTMLの仕様ではなく、CMSやテーマ、プラグインの実装によるものであり、環境によって挙動が異なることがあります。

⑤ 見た目ではなく「役割（意味）」ごとに使い分ける

theadは見出し、tbodyはデータ本体、tfootは集計や補足情報といったように、それぞれの意味を理解して使い分けることが重要です。
thead・tbody・tfootタグは、画面の見た目を派手にするためのものではありません（見た目には影響しません）。だからこそ、「CSSで一括装飾したい」「JavaScriptでデータだけを動かしたい」といった、それぞれの目的に応じて「意味」で正しく書き分けることで、HTMLの構造が明確になります。

＞＞HTMLの表でセルを横結合するcolspan、縦結合するrowspanテーブル（table）タグ解説