HTMLのtableの書き方｜caption・thead・th scope とアクセシビリティ

HTMLのtableの書き方とは

<table> は、行と列でデータを整理する「表」のための要素です。MDN は、tableはレイアウトのために使うものではないと明記しています。レイアウトは Flexbox や Grid に任せ、データの表だけに使います。

表をきちんと組むと、スクリーンリーダーの利用者が「どの見出しに対する値か」を把握でき、CSSで見た目を変えるときにも扱いやすくなります。この記事では、基本の構造、見出しセルの関連付け、複雑な表への対処を扱います。

基本（構文・仕組み）

表を構成する主な要素です。

要素 役割
caption 表のタイトル・要約。table の最初の子に置く
thead / tbody / tfoot 見出し行 / 本体 / 集計行
tr 行
th 見出しセル
td データセル
colgroup / col 列のグループ・スタイル指定

th には scope 属性で「何の見出しか」を示します。col は列の見出し、row は行の見出しです。結合した見出しには colgroup・rowgroup も使えます。W3C WAI のチュートリアルは、見出しセルを th、データセルを td で区別し、必要なら scope で方向を明示するよう勧めています。

colspan と rowspan でセルを結合できますが、複雑になるほど支援技術で読みにくくなります。MDN と W3C WAI はどちらも、可能なら複雑な表を単純な複数の表に分けること、どうしても難しい場合は id と headers 属性で見出しとデータを関連付けることを案内しています。

サンプルコード（実行結果つき）

<table>
  <caption>月別売上（万円）</caption>
  <thead>
    <tr><th scope="col">商品</th><th scope="col">1月</th><th scope="col">2月</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">A</th><td>120</td><td>150</td></tr>
    <tr><th scope="row">B</th><td>80</td><td>95</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">合計</th><td>200</td><td>245</td></tr>
  </tfoot>
</table>

合計値は 120 + 80 = 200、150 + 95 = 245 で検算できます。見た目はCSSで整えます。

table { border-collapse: collapse; }
th, td { border: 1px solid #888; padding: 6px 10px; }
caption { font-weight: bold; text-align: left; }

スマホで表が横にはみ出す場合は、div で包んで横スクロールさせる方法が一般的です。

<div class="table-wrap" style="overflow-x:auto" tabindex="0" role="region" aria-label="月別売上の表">
  <table>...</table>
</div>

動作確認（検証環境と結果）

  • 環境: Windows 11、headless Microsoft Edge 154.0.4258.53（Chromium系、render.ps1、幅500px）。
  • 結果（DOM）: table.rows.length は 4、caption は「月別売上（万円）」、th[scope=col] は 3、tHead・tBodies・tFoot はすべて存在しました。
  • 結果（画面）: 罫線付きの4行の表として表示され、キャプションが上部に太字で、th は太字・中央揃えで描画されました。
  • 未検証: 横スクロール用ラッパー（overflow-x:auto）の実機動作、およびスクリーンリーダーの読み上げ。
  • ログ: C:Tempks2techtestshtml-table.md、画面は C:Tempks2techtestst1table.png。

HTMLのtableの書き方の注意点

  • caption は表の直前に別の見出しを置く代わりにもなります。見出し（h2 など）と併用するなら、重複しない内容にします。
  • 現在のHTML仕様では、tfoot は tbody（または tr）の後に書きます。古い書き方で tbody の前に置いても、ブラウザ既定のCSS（display: table-footer-group）により表の最後に表示されます（headless Edge で確認）。
  • 数値の列は右揃えにすると比較しやすくなります(text-align: right)。
  • 空のセルを残すより、「なし」や「−」など意味のある文字を入れるほうが伝わります。

HTMLのtableの書き方でよくあるミス

  • レイアウト目的で table を使う(古いHTMLメールなどを除き避けます)。
  • 見出しセルを td + strong で作り、th にしていない。
  • caption を省略して、表の主題が分からない。
  • 結合セルを多用して、列数が行ごとに合わなくなる。
  • border="1" や cellspacing など、古い表示属性に頼る。装飾はCSSで行います。

ブラウザ対応・バージョン

table と関連要素は MDN で長期にわたり広く使えるとされ、全ブラウザで利用できます。scope や headers による見出しの関連付けは、スクリーンリーダーなど支援技術の実装に依存するため、実際の読み上げは対象環境で確認します。

HTMLのtableの書き方のチェックリスト

  • [ ] 表はデータの整理にだけ使っている。
  • [ ] caption を付けている。
  • [ ] 見出しセルに th と scope を使っている。
  • [ ] 複雑な結合は避けるか、headers で関連付けている。
  • [ ] 狭い画面での見え方（横スクロールなど）を確認した。

HTMLのtableの書き方のFAQ（よくある質問）

Q. 比較表を作るとき、どこを th にしますか。
A. 項目名が横に並ぶなら列見出し(scope="col")、行の先頭に名前が来るなら行見出し(scope="row")です。

Q. thead は必須ですか。
A. 必須ではありませんが、見出し行を明確にでき、印刷で複数ページにまたがるときも便利です。

Q. div と CSS Grid で表を作るのは良くないですか。
A. 本当に表形式のデータなら table を使うほうが、意味が伝わります。

筆者の見解（HTMLのtableの書き方）

私見では、表の品質は「見出しセルを th にして scope を付ける」だけで大きく変わると考えます。複雑な結合表を完璧にマークアップするより、情報の持ち方を見直して表を分けるほうが、閲覧者にも保守にも優しいことが多いです。スマホ対応は表を無理に縮めず、横スクロール可能な領域にして、スクロールできることが分かるようにする方法が現実的だと考えます。

HTMLのtableの書き方の関連項目

出典（一次情報）

タイトルとURLをコピーしました