前回の表の基本では、すべて<td>タグを使っていましたが、見出し行とデータ行が同じ見た目で少し分かりづらいなと思いました。
その通り、表には「見出し」と「データ」、そして「ヘッダー部分」と「本体部分」という構造がある。HTMLにはそれを明確に表現するための専用タグが用意されているんだ。
例えば、成績表だったら「科目」「点数」「評価」が見出しで、その下に実際のデータが来るということですか？
まさにその通り！<th>（table header）で見出しを、<thead>と<tbody>で表の構造を明確に分けることで、読みやすく、アクセシブルな表を作ることができるよ。
表の構造化要素
HTMLの表をより意味的に構造化するための重要な要素を学びましょう。tables-basics.mdxで学んだ基本構造を、さらに改善していきます。
や説明を提供
部分をグループ化
部分をグループ化
（Table Header）
新しく追加される構造化要素
<caption>タグ 表全体のタイトルや説明を提供（<table>の直後に配置）<thead>タグ 表のヘッダー部分をグループ化（見出し行をまとめる）<tbody>タグ 表の本体部分をグループ化（データ行をまとめる）<th>タグ Table Header（見出しセル）-<td>の代わりに使用。文字が太字で中央寄せになる
表に説明やタイトルが必要な場合は、<caption>タグを使用します。これにより、表の内容をより分かりやすく伝えることができます。
<table>
<caption>2024年度 成績一覧表</caption>
<thead>
<!-- ... -->
</thead>
</table><caption>は表の最初（<table>の直後）に配置し、表の内容を簡潔に説明します。アクセシビリティとSEOの両面で重要な役割を果たします。
実際に構造化表を試してみよう
基本の表と構造化表の違いを体験してみましょう。
見出しに指定した文字が太字で中央寄せになっているのが分かります。
表の構造化で初心者がつまずきやすいポイントを把握しておきましょう。
- 行見出しも
<th>を使う 左端の「科目名」なども見出しなので<th>を使用 <thead>内では<th>のみ ヘッダー部分にデータセル<td>は基本的に使わない<caption>の位置<caption>は必ず<table>の直後、他の要素より前に配置- 見た目だけで判断しない 太字になっているからではなく、意味的に見出しかどうかで
<th>を使う
scope属性でアクセシビリティ向上
<th>タグにはscope属性を追加することで、見出しセルがどの範囲（列または行）の見出しなのかを明確に指定できます。これにより、スクリーンリーダーがより正確に表の構造を読み上げることができるようになります。
さっきのコードで行にも<th>を使うべきだということが分かりましたが、scope属性って必要なんですか？
scope属性は必須ではないけれど、特にスクリーンリーダーを使っている人にとってはとても重要なんだ。「この見出しが縦の列なのか、横の行なのか」を明確に伝えてくれるからね。
基本的なscope属性
まずは最も重要で基本的なscope属性から学んでみましょう。
scope="col"その見出しが列（縦方向）の見出しであることを示すscope="row"その見出しが行（横方向）の見出しであることを示す
scope属性を適切に使用することで、スクリーンリーダーは以下のような自然な読み上げが可能になります。
scope="col"の場合 「1学期列の数学は85点」scope="row"の場合 「数学行の1学期は85点」
視覚的に表を見ることができないユーザーにとって、これらの情報は表の内容を理解するために非常に重要です。
なるほど！scope属性があることで、スクリーンリーダーが「どの見出しがどの範囲に対応するか」を正確に伝えられるんですね。
その通り！基本的な表ではscope="col"とscope="row"を覚えておけば十分だよ。より複雑な表の場合は、次のレッスンでより高度なテクニックを学んでいこう。
より複雑な表ではscope="colgroup"やscope="rowgroup"、headers属性なども存在しますが、現代のWeb開発では実際にはほとんど使われません。基本的なscope="col"とscope="row"を理解しておけば実用上は十分です。
表の構造化で得られるメリット
表の構造化は、見た目だけでなく、機械が内容を理解しやすくなるという大きなメリットがあります。これにより、主に2つの面で良い効果が生まれます。
スクリーンリーダーなどの支援技術が表の構造を正しく解釈し、ユーザーに音声で的確に情報を伝えられるようになります。
- スクリーンリーダー対応 見出しとデータの関係を音声で正確に伝達できる
- scope属性による詳細化
scope="col"やscope="row"により見出しの適用範囲を明確化 - キーボード操作 キーボードでの表内移動が効率的になる
- 意味の明確化 データの文脈と構造がマシンリーダブル（機械可読）になる
検索エンジンが表の内容を「構造化されたデータ」として認識し、検索結果で有利になることがあります。また、開発者にとっても扱いやすいデータになります。
- 検索エンジン最適化 構造化データとして認識され、評価向上が期待できる
- CSSスタイリング
<thead>や<tbody>単位でスタイルを適用しやすくなる - JavaScript操作 ヘッダーやボディ単位でのデータ操作が簡単になる
表を構造化する際は、以下の点を常に意識しましょう。
- 常に
<thead>を使用 見出し行は必ず<thead>で囲み構造化する <th>で見出し表現 見出しセルには<th>を、データセルには<td>を明確に使い分けるscope属性でより明確にscope="col"やscope="row"で見出しの適用範囲を指定<tbody>でデータ分離 表の本体部分は<tbody>で明確にグループ化する- 意味的なマークアップ 見た目のためではなく、常に情報の構造を意識してマークアップする
<caption>で表題明記 表の内容を説明するタイトルは<caption>で提供する
理解度チェッククイズ
表の構造化について学んだ内容を、クイズで確認してみましょう。
表の構造化ミニクイズ
A) <th scope="col">科目</th><th scope="col">点数</th>
B) <th scope="row">数学</th><td>85</td>
C) <th scope="colgroup" colspan="2">前期</th>
D) 上記すべて<table>
<caption>成績表</caption>
<tbody>
<tr>
<th>科目</th>
<th>点数</th>
</tr>
</tbody>
<thead>
<tr>
<td>数学</td>
<td>85</td>
</tr>
</thead>
</table><table>
<caption>2024年度 学期別成績表</caption>
<thead>
<tr><th>科目</th><th>1学期</th></tr>
</thead>
<tbody>
<tr><th>数学</th><td>85</td></tr>
</tbody>
</table>まとめ
構造化表を作ることで、見た目だけでなくアクセシビリティも向上するんですね！
特にスクリーンリーダーを使う方への配慮って、とても大切だと思います。
その通り！Web開発では「見た目」だけでなく「意味」を重視することが重要なんだ。<thead>、<tbody>、<th>を使った構造化は、すべてのユーザーにとって使いやすいWebサイトを作る基本なんだよ。次は、さらに実用的な表の応用テクニックについて学んでいこう。
- 意味的な構造化
<thead>でヘッダー、<tbody>でデータ部分を分離 - 見出しの明確化
<th>で見出しセル、<td>でデータセルを使い分け - アクセシビリティ スクリーンリーダーや支援技術での利用を考慮
- SEO効果 検索エンジンが表の構造を正しく理解
- スタイリング効率 CSSで部分的なスタイル適用が容易
- メンテナンス性 コードの可読性と保守性が向上
次回は「表の応用テクニック」で、セルの結合や表のフッターなど、より実用的な表の作り方を学びます。