thead、tbody、tfootの構造
テーブルの行を意味的なヘッダー、本文、フッターのセクションに整理します。
「thead、tbody、tfootの構造」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
テーブルのセクション
完全なHTMLテーブルには、3つの省略可能ですが推奨されるセクションがあります：
<thead>— 見出し行<tbody>— 本体の行（主要なデータ）<tfoot>— フッター行（合計や要約）
thead
<thead>要素は見出し行を囲みます：
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
...
</table>
<!-- thead rows repeat when printing multi-page tables -->
<!-- Screen readers associate header cells with data cells -->tbody
<tbody>要素は主要なデータ行を囲みます：
<table>
<thead>...</thead>
<tbody>
<tr>
<td>Widget A</td>
<td>5</td>
<td>$49.99</td>
</tr>
<tr>
<td>Widget B</td>
<td>3</td>
<td>$29.99</td>
</tr>
</tbody>
</table>tfoot
<tfoot>要素はフッター行を囲みます。通常は合計や要約を含めます：
<table>
<thead>...</thead>
<tbody>...</tbody>
<tfoot>
<tr>
<th colspan="2">Total</th>
<td>$309.92</td>
</tr>
</tfoot>
</table>
<!-- tfoot is written after tbody in HTML but renders at the bottom -->
<!-- In print, tfoot appears at the bottom of every page -->完全に構造化されたテーブル
3つのセクションをすべて含む完全なテーブル：
<table>
<thead>
<tr>
<th>Item</th>
<th>Qty</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr><td>Widget A</td><td>2</td><td>$99.98</td></tr>
<tr><td>Widget B</td><td>1</td><td>$49.99</td></tr>
</tbody>
<tfoot>
<tr><th colspan="2">Grand Total</th><td>$149.97</td></tr>
</tfoot>
</table>thead、tbody、tfootを使う理由
テーブル構造の利点：
- 意味論 — スクリーンリーダーが見出し、データ、要約を区別できます
- CSSによる対象指定 — セクションごとに個別にスタイルを設定できます
- 印刷 — 印刷時にtheadが各ページで繰り返されます
- スクロール — CSSのoverflowを使ってtbodyだけを個別にスクロールできます
スクロール可能なtbody
見出しを固定したまま、本体だけをスクロールさせます：
table {
display: flex;
flex-direction: column;
height: 300px;
}
tbody {
overflow-y: auto;
flex: 1;
}暗黙的なtbody
<tbody>を省略すると、ブラウザーが自動的に追加します：
<!-- Written without tbody: -->
<table>
<thead>...</thead>
<tr><td>Data</td></tr> <!-- browser wraps this in tbody -->
</table>
<!-- Always write tbody explicitly for clarity -->
<!-- Some CSS selectors like tbody:nth-child won't work without explicit tbody -->複数のtbody要素
1つのテーブルに複数の<tbody>グループを含めることができます：
<table>
<thead>...</thead>
<tbody>
<tr><td colspan="3"><strong>Category A</strong></td></tr>
<tr><td>Item 1</td><td>2</td><td>$10</td></tr>
</tbody>
<tbody>
<tr><td colspan="3"><strong>Category B</strong></td></tr>
<tr><td>Item 2</td><td>5</td><td>$25</td></tr>
</tbody>
</table>テーブルセクションのスタイル設定
CSSでセクションを対象にします：
thead {
background: #1e293b;
color: white;
}
tbody tr:hover {
background: #f0f9ff;
}
tfoot {
border-top: 2px solid #334155;
font-weight: bold;
background: #f8fafc;
}スクリーンリーダーの動作
適切なthead/tbody構造があると、スクリーンリーダーは次のことができます：
- 各データセルの文脈として列見出しを読み上げる
- セクション間（見出し領域とデータ領域）を移動する
- 行数と列数をユーザーに伝える
複数行のthead
複雑な見出しでは、theadに複数の行を含めることができます：
<thead>
<tr>
<th rowspan="2">Product</th>
<th colspan="2">Q1</th>
<th colspan="2">Q2</th>
</tr>
<tr>
<th>Units</th><th>Revenue</th>
<th>Units</th><th>Revenue</th>
</tr>
</thead>確認問題
tfootは、HTMLソース内と表示されたテーブルのそれぞれで、通常どこに配置されますか？
振り返り：thead、tbody、tfoot
テーブル構造の基本：
<thead>— 見出し行（印刷時に繰り返されます）<tbody>— データ行（複数指定できます）<tfoot>— 要約や合計の行- CSSによるセクションの対象指定と、アクセシブルなテーブル読み上げが可能になります
- ブラウザーが追加してくれる場合でも、tbodyは必ず明示的に記述します
よくある質問
「thead、tbody、tfootの構造」レッスンは無料ですか？
はい。「thead、tbody、tfootの構造」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「thead、tbody、tfootの構造」で何を学びますか？
テーブルの行を意味的なヘッダー、本文、フッターのセクションに整理します。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「thead、tbody、tfootの構造」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- table、tr、td、th
- thead、tbody、tfootの構造
- 結合のためのcolspanとrowspan
- テーブルのアクセシビリティ：scope、summary、caption