HTMLで表を作るときに、<thead>、<tbody>、<tfoot>、<th>などのタグを見かけることがあります。しかし、「theadとthは何が違うの？」「tbodyは必ず必要？」「見た目が同じならtheadを書かなくてもいいのでは？」と迷う方も多いのではないでしょうか。
theadタグは、テーブルの見出し行をまとめるための行グループです。一方、thタグは見出しの1マスを作るセルです。
この記事では、theadタグの意味、thタグとの違い、tbody・tfootとの使い分け、theadを使うメリットを初心者向けに解説します。
忍者CODEマガジンは、未経験からでもプロのエンジニアを目指せるプログラミングスクール「忍者CODE」が運営しているプログラミング情報サイトです。
- プログラミングの効果的な学習方法
- プログラミング用語の解説
- エンジニアのキャリアに関する情報
など、プログラミングを始めたばかりの初学者に役立つ記事を幅広く公開しています。
HTMLのtheadタグとは？
theadタグは、HTMLテーブルの見出し部分にあたる行グループを表すタグです。読み方は「ティーヘッド」で、table headのように覚えると分かりやすいです。
<table>
<thead>
<tr>
<th>タグ</th>
<th>役割</th>
</tr>
</thead>
<tbody>
<tr>
<td>thead</td>
<td>見出し行をまとめる</td>
</tr>
</tbody>
</table>この例では、<thead>の中に見出し行を入れています。theadの中には、直接thを書くのではなく、trタグで行を作り、その中にthタグを入れます。
theadは「表の上にある行グループ」
theadは、表の見出し行をまとめるためのタグです。たとえば、料金表であれば「プラン名」「料金」「特徴」のような列見出しを入れる部分がtheadになります。
table = 表全体
thead = 見出し行のグループ
tbody = データ行のグループ
tfoot = 合計・注釈など末尾行のグループtheadタグは、見た目を太字にするためのタグではありません。表の見出し部分を構造として分けるためのタグです。
theadを書く位置
theadは、tableタグの中で使います。一般的には、captionやcolgroupがある場合はその後、tbodyやtfootより前に書きます。
<table>
<caption>HTMLタグの比較表</caption>
<thead>
<tr>
<th scope="col">タグ</th>
<th scope="col">意味</th>
</tr>
</thead>
<tbody>
<tr>
<td>tr</td>
<td>横1行を表す</td>
</tr>
</tbody>
</table>theadは表の見出し行をまとめるために、tbodyより前に配置するのが基本です。
関連記事：「HTMLのtrタグとは？td・thとの違いや使い方を解説」
【一番重要】theadタグとthタグの決定的な違い
theadタグとthタグは名前が似ていますが、役割はまったく違います。ここを混同すると、HTMLテーブルの構造が分かりにくくなります。
| タグ | 役割 | たとえるなら |
|---|---|---|
<thead> |
見出し行のグループ | 見出しエリア全体 |
<th> |
見出し用の1つのセル | 見出しの1マス |
thは「見出しのマス目（セル）」
thタグは、表の中で見出しとなるセルを作るタグです。
<tr>
<th>タグ</th>
<th>役割</th>
</tr>この例では、タグと役割という2つの見出しセルを作っています。
列見出しとして使う場合は、scope="col"を付けると、どの列の見出しなのかが伝わりやすくなります。
<th scope="col">タグ</th>thタグは、表の中の「見出しセル」を作るタグです。
theadは「見出しの行グループ」
theadタグは、thタグを含む見出し行全体をまとめるタグです。
<thead>
<tr>
<th scope="col">タグ</th>
<th scope="col">役割</th>
</tr>
</thead>theadの中にはtrタグが入り、そのtrの中にthタグが入ります。つまり、theadはセルそのものではなく、行をまとめるための親グループです。
theadの中にthを直接書くのは避けましょう。theadの中にはtrを置き、そのtrの中にthを入れるのが正しい構造です。
theadとthの関係を図で覚える
theadとthの関係は、次のように考えると分かりやすいです。
<thead> 見出し行のグループ
<tr> 横1行
<th>見出しセル</th>
<th>見出しセル</th>
</tr>
</thead>theadは「見出しエリア」、thは「見出しのマス」と覚えると、違いを整理しやすくなります。
thead・tbody・tfootの使い分けと基本の書き方
HTMLテーブルは、thead・tbody・tfootを使うと、表の中身を意味ごとに分けられます。
| タグ | 役割 | 入れる内容 |
|---|---|---|
<thead> |
見出し行のグループ | 列名、項目名 |
<tbody> |
本文行のグループ | 通常のデータ |
<tfoot> |
末尾行のグループ | 合計、注釈、集計 |
基本の書き方
以下は、thead・tbody・tfootを使った基本的なテーブルです。
<table class="price-table">
<thead>
<tr>
<th scope="col">プラン</th>
<th scope="col">月額料金</th>
<th scope="col">内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>ライト</td>
<td>1,000円</td>
<td>基本機能のみ</td>
</tr>
<tr>
<td>スタンダード</td>
<td>3,000円</td>
<td>おすすめプラン</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">備考</th>
<td colspan="2">料金は税込です</td>
</tr>
</tfoot>
</table>.price-table {
width: 100%;
border-collapse: collapse;
}
.price-table th,
.price-table td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
.price-table thead {
background-color: #f5f5f5;
}
.price-table tfoot {
background-color: #fafafa;
}このように分けると、見出し、本文、末尾の役割がHTML上でも分かりやすくなります。
tbodyは省略されてもブラウザが補うことがある
HTMLでは、tableの中にtrを直接書いた場合でも、ブラウザがtbodyを補って解釈することがあります。
<table>
<tr>
<td>HTML</td>
</tr>
</table>このように書いても表示されることはありますが、CSSでtable > trのように指定すると、実際にはtbodyが挟まっていて効かない場合があります。
初心者のうちは、theadとtbodyを明示的に書いておく方が、HTMLもCSSも管理しやすくなります。
tfootは合計や注釈に使う
tfootは、表の末尾にある合計行や補足情報をまとめるために使います。
<tfoot>
<tr>
<th scope="row">合計</th>
<td>4,000円</td>
</tr>
</tfoot>料金表や集計表では、tfootを使うと、本文データと合計行を分けて扱いやすくなります。
わざわざ書く必要はある？theadを使う3つのメリット
theadを書かなくても、シンプルな表なら表示自体はできます。しかし、実務でテーブルを作るなら、theadを使うメリットは大きいです。
メリット①：CSSの管理・装飾が圧倒的に楽になる
theadを使うと、見出し行だけにCSSを当てやすくなります。
table tr:first-child {
background-color: #f5f5f5;
}この指定でも見出し行らしく見せることはできますが、表の構造が変わったときに崩れやすくなります。
table thead {
background-color: #f5f5f5;
}
table thead th {
font-weight: bold;
}theadがあれば、見出しエリアだけを明確に指定できます。
CSSで見出し行だけ装飾したい場合、theadを使うとセレクタが分かりやすく、修正にも強くなります。
tbodyのストライプ指定も管理しやすい
tbodyを分けておくと、データ行だけを一行おきに色分けしやすくなります。
table tbody tr:nth-child(even) {
background-color: #f7f7f7;
}theadを含めずにtbodyだけを対象にできるため、見出し行の色がずれる心配が減ります。
theadとtbodyを分けずにtr:nth-childを指定すると、見出し行まで数えられて色の付き方がずれる場合があります。
メリット②：長文の表を印刷するときにヘッダーが固定される
表が長く、印刷時に複数ページへまたがる場合、theadは「各ページで共通して扱われる見出し情報」として役立つことがあります。
MDNでも、複数ページにわたる表を印刷する場合、theadは各ページで同じまま残る情報を示すことが多いと説明されています。
<table>
<thead>
<tr>
<th>日付</th>
<th>内容</th>
<th>金額</th>
</tr>
</thead>
<tbody>
<tr>
<td>2026/06/16</td>
<td>教材費</td>
<td>3,000円</td>
</tr>
</tbody>
</table>長い表を印刷する可能性がある場合、theadで見出し行を分けておくと、印刷時の扱いも分かりやすくなります。
印刷時の見え方はブラウザやCSSによって差が出るため、実際に印刷プレビューで確認しましょう。
メリット③：SEOや音声読み上げ（アクセシビリティ）に有利
thead、tbody、tfootを使うと、テーブルの中でどこが見出し部分で、どこが本文データなのかを構造として伝えやすくなります。
特にスクリーンリーダーなどの支援技術では、表の見出しとデータの関係が分かりやすいほど、内容を理解しやすくなります。検索エンジンにとっても、HTML構造が整理されているページは内容を把握しやすくなります。ただし、アクセシビリティを高めるには、theadを書くだけでなくthタグやscope属性も大切です。
<thead>
<tr>
<th scope="col">タグ</th>
<th scope="col">役割</th>
</tr>
</thead>theadは見出し行のグループ、thは見出しセル、scopeは見出しがどの方向に対応するかを示す補助情報として考えると整理しやすいです。
theadを書いただけでSEO順位が直接上がるわけではありません。読者や検索エンジンが理解しやすい構造を作るための土台として考えましょう。
theadタグでよくある間違い
theadタグは便利ですが、使い方を間違えるとテーブル構造が分かりにくくなります。ここでは、初心者がつまずきやすい例を整理します。
theadの中にthを直接書いてしまう
theadの中には、trタグを入れます。thタグはtrタグの中に書きます。
<thead>
<th>タグ</th>
<th>役割</th>
</thead><thead>
<tr>
<th>タグ</th>
<th>役割</th>
</tr>
</thead>見出し行をtbodyに入れてしまう
見た目だけならtbody内の最初のtrを太字にしても表は作れます。しかし、構造としては見出し行をtheadに分ける方が自然です。
料金表や比較表のように見出し行がある場合は、tbodyではなくtheadに分けて書きましょう。
装飾目的だけでtheadを使う
theadは、見出し行を意味づけるためのタグです。背景色を付けたいだけならCSSで装飾できますが、その行が本当に表の見出しなのかを基準にしましょう。
theadを使う判断基準は「その行が表全体の見出しとして機能しているか」です。
公式ドキュメントも確認する
theadやth、tbody、tfootの仕様を正確に確認したい場合は、公式ドキュメントも参考になります。
まとめ：綺麗なテーブル作成にはtheadが必須！
この記事では、HTMLのtheadタグについて解説しました。theadタグは、テーブルの見出し行をまとめるための行グループです。thタグは、その中に入る見出しセルです。
theadとthは似ていますが、役割は違います。thは見出しのマス目、theadは見出しの行グループです。さらにtbodyは本文データ、tfootは合計や注釈などの末尾情報をまとめるときに使います。theadを使うと、CSSで見出し行だけを装飾しやすくなり、長い表や印刷、音声読み上げの面でも構造が分かりやすくなります。シンプルな表でも、見出し行がある場合はtheadを使うことで、後から見ても管理しやすいHTMLになります。
表の基本構造をおさらいしたい方は、tr・td・thの違いもあわせて確認しておきましょう。
