HTMLのテーブルでは thead・tbody・tfoot という3つのセクション要素が用意されていますが、「とりあえず tbody だけ使っている」「見た目が変わらないので省略している」というケースも少なくありません。しかし、これらは単なる装飾用のタグではなく、構造・アクセシビリティ・表示挙動・保守性に直結する重要な役割を持っています。本記事では、thead・tbody・tfoot の本来の意味と、実務で正しく使い分けるための設計視点を解説します。
thead・tbody・tfootの役割の全体像
テーブルは「見出し」「本文データ」「集計・補足情報」という性質の異なる情報で構成されることが多く、thead・tbody・tfoot はそれぞれを論理的に分離するための要素です。ブラウザはこれらを単なるグループとしてではなく、テーブル構造の一部として明確に認識します。
theadの役割と正しい使い方
thead は、列や行の見出しをまとめるための要素です。通常は th 要素を含み、テーブルの内容を理解するための基準情報を提供します。視覚的には単なる1行に見えても、構造的には「この表が何を表しているか」を定義する重要な部分になります。
thead を使うことで、スクリーンリーダーは列見出しを正しく認識でき、また CSS や JavaScript で「ヘッダー行だけ固定する」といった制御も容易になります。
項目
内容
tbodyの役割と省略時の挙動
tbody は、テーブルの主となるデータ行をまとめる要素です。実は tbody は省略可能で、HTML上に書かなくてもブラウザが自動的に補完します。このため、意識せずに使っていないケースが多くなります。
ただし、JavaScript で行を操作したり、CSSでセクション単位のスタイルを当てたりする場合、tbody を明示しておかないと意図しない挙動になることがあります。実務では、省略せず明示的に書くほうが安全です。
名前
サンプル
tfootの役割と誤解されやすい点
tfoot は、合計行や補足情報、注釈など、テーブル全体に関係するまとめ情報を表すための要素です。見た目としてはテーブルの最下部に配置されることが多いですが、HTML上では thead の直後に記述することも可能です。
これは、ブラウザが先にフッター情報を認識できるようにするための仕様であり、データ量の多いテーブルでもフッターを安定して扱うための設計です。
商品
価格
合計
10,000円
A
5,000円
B
5,000円
表示順と記述順は一致しなくてよい
thead・tbody・tfoot は、HTML上の記述順と表示順が必ずしも一致しません。多くのブラウザでは、thead → tbody → tfoot の順で描画されます。この仕様を理解していないと、「tfoot を下に書かないと下に表示されない」と誤解しがちです。
CSS・JavaScriptとの相性
これらのセクションを正しく分けておくことで、thead だけを固定表示したり、tbody だけをスクロールさせたりといったUI制御が容易になります。また、JavaScriptで行を追加・削除する場合も、どの領域を操作しているのかが明確になり、バグを防ぎやすくなります。
アクセシビリティと構造化の観点
スクリーンリーダーは、thead 内の th を見出しとして認識し、tbody の td と関連付けて読み上げます。thead を使わず、すべて td で構成されたテーブルは、視覚的には問題なくても、アクセシビリティの観点では不十分な構造になります。
実務での使い分け指針
列見出しが存在するテーブルでは必ず thead を使い、データ行は tbody にまとめ、合計や注釈がある場合のみ tfoot を追加する、という設計が基本になります。見た目のためではなく、意味構造のために使う、という意識が重要です。
まとめ
thead・tbody・tfoot は、テーブルを論理的に分割するための構造要素であり、省略可能だからといって軽視すべきではありません。正しく使い分けることで、アクセシビリティ、保守性、UI制御のしやすさが大きく向上します。テーブルは「並べて表示する」だけの要素ではなく、「意味を持った構造」として設計することが、実務で破綻しないHTMLにつながります。
