HTMLの表に見出しを付けよう：caption・th・tdで数字の意味を伝える

表の一つの数字を読むとき、「何曜日の、何の数だろう」と見出しをたどるよね。HTMLの表も、枠線だけでなく、見出しとデータの関係を用意しよう。

ここではcaption・th・tdを知り、小さな表で行と列の意味を確認する。ブラウザだけで試せるよ。複雑な結合セルは使わない、基本の表から始めよう。

三つの要素を分ける

<table>
  <caption>配布するノートの冊数</caption>
  <tr><th scope="col">曜日</th><th scope="col">冊数</th></tr>
  <tr><th scope="row">月曜</th><td>3</td></tr>
  <tr><th scope="row">火曜</th><td>5</td></tr>
</table>

scope="col"は列の見出し、scope="row"は行の見出しを示している。太字にするためだけの指定ではないよ。

作例で数字から見出しをたどる

下の作例で月曜・火曜を選ぶと、選んだ行と対応する数を強調する。3なら「月曜の冊数」、5なら「火曜の冊数」と表示されるので、数字だけでは足りない意味を確かめてね。

リセットで月曜へ戻る。見出しの関係を可視化する練習で、特定のスクリーンリーダーの読み上げを再現したものではないよ。実際の支援技術での確認は別に必要になる。

レイアウト用の箱として使わない

表は、行と列の関係で読む情報に向く。ページの左右へ要素を置くためだけに使うと、情報の意味と構造がずれてしまう。横に並べたいだけなら、CSSのレイアウトを検討しよう。

複雑な多段見出しや結合セルでは、今回のscopeだけの例では足りない場合がある。W3C WAIの基本の見出し表から、必要な構造へ進んでみよう。