table要素の使い方

HTMLのtable要素は、料金表・予定表・比較表のように、行と列の関係に意味があるデータを表します。

先に結論

最小の例

<table>
  <caption>今週の営業時間</caption>
  <thead>
    <tr>
      <th scope="col">曜日</th>
      <th scope="col">営業時間</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">月曜日</th><td>9:00–18:00</td></tr>
    <tr><th scope="row">火曜日</th><td>9:00–18:00</td></tr>
  </tbody>
</table>

captionは表が何を示すかを説明します。列の見出しにはscope="col"、行の見出しにはscope="row"を指定しています。

tableを構成する要素

よく使うtable関連要素

要素	役割	使う場所
caption	表の目的や題名	tableの最初
thead	列見出しなどの見出し行	表の見出し部分
tbody	表の本体	データ行のまとまり
tr	1行	見出し・データの行
th	見出しセル	列または行の見出し
td	データセル	個々のデータ

見出しとデータの関係を伝える

見出しセルを太字にするだけでは、支援技術へ見出しの意味は十分に伝わりません。見出しにはthを使い、単純な表ではその見出しが列用か行用かをscopeで示します。

複数段の見出しやセルが複雑に結び付く表では、表の構造を見直したうえで、必要に応じてidとheadersによる関係付けを検討します。

レスポンシブ対応

列が多い表をスマートフォンで無理に縮めると、文字が読みにくくなります。表の関係を保ったまま、必要なら表の周囲を横スクロールできるようにします。

• 文字を極端に小さくして全列を画面へ押し込まない
• 見出しとデータの関係を壊すため、各セルを無理にカード化しない
• 表の前後に目的や単位を説明し、横スクロールが必要なことも伝える

よくある間違い

• ページのレイアウトを作るためにtableを使う
• 見出しなのにtdを使い、見た目だけをCSSで太字にする
• 表の目的や単位が分からないまま、数字だけを並べる
• ブラウザー側の見た目だけで入力内容や重要なデータを判断する

もう少し詳しく

tableは、行・列・セルからなるデータの関係をHTMLの構造として表します。画面上の罫線や色はCSSで変えられますが、データの意味はcaption、th、tdなどのHTMLで表します。

Atlasで確認する

HTML Standardが定めるtable model、複雑な表の見出し関係、HTML parserが不完全な表の記述を扱う境界まで確認したい場合は、Yugien Atlasのtable要素を参照してください。