Webデザインのテーブルの見出しの付け方|th要素とアクセシビリティの基準で表を読み上げやすくする

この記事でわかること

• データの表で、見出しのセルをth要素にする理由
• 行と列の両方に見出しがある表で、scope属性を付ける方法
• caption要素で、表の題を伝える方法
• 見た目だけの表にしないための、つまずきやすいところと確かめ方

料金の一覧や営業時間の表を作るとき、見出しのセルを太字にしただけで済ませていないでしょうか。見た目では見出しと分かっても、画面の読み上げのソフトには、どのセルが見出しなのかが伝わりません。この記事では、HTMLの表の見出しを、th要素とscope属性、caption要素でどう書き分けるかを紹介します。

調べた資料は、W3Cの表のチュートリアルと、アクセシビリティの基準(WCAG 2.2)の解説・技法で、2026年10月25日に確かめています。特定のツールやスクールは扱いません。表の見本は、架空の店のものです。

先に結論: 見出しのセルはth、向きが分かりにくければscope

先に結論を書くと、データの表の見出しのセルはth要素で、データのセルはtd要素で書きます。行と列の両方に見出しがあるときは、scope属性で見出しの向きを示し、表の題はcaption要素に入れます。 使い分けをまとめると、次のとおりです。

表の見出しとアクセシビリティの基準

WCAGの達成基準1.3.1「情報及び関係性」は、見た目で伝えている情報や作り、関係を、プログラムで判別できるか、文字で分かるようにすることを求めています。W3Cの表のチュートリアルでは、この基準をレベルAとしています。

解説では、目で見る人は、同じ行や列のセルの関係や、各セルと見出しの関係を、表の並びから読み取っているとしています。読み上げのソフトを使う人にも同じ関係を伝えるには、その関係をHTMLで示す必要があります。

W3Cのチュートリアルでは、読み上げのソフトは、1つずつセルを読み、そのセルに結び付いた見出しも読むため、表の中で迷わずに済むとしています。

th要素で見出しのセルを示す

技法H51は、表の要素で表の情報を示す方法です。table要素の中で、tr要素と、th要素・td要素を使うと、行と列の関係が伝わるとしています。

反対に、タブで列をそろえたり、pre要素で並べたりする方法は、見た目だけのものです。表が見えない人や、表示のしかたを変えた人には、並びから分かる関係が失われます。

W3Cのチュートリアルでは、最初の行だけに見出しがある小さな表は、見出しのセルをth要素にするだけで構わないとしています。ただし、それは表が小さく、列ごとに中身がはっきり違って、見出しとの関係が分かりやすい場合に限るとしています。

scope属性で見出しの向きを示す

行と列の両方に見出しがある表では、見出しとデータのセルの関係がすぐにあいまいになります。W3Cのチュートリアルでは、このような表はth要素で見出しのセルを示し、scope属性で見出しの向きを示すとしています。

技法H63では、scopeの値は、行の見出しならrow、列の見出しならcol、行や列のまとまりの見出しならrowgroupかcolgroupとしています。最初の行か最初の列だけに見出しがある単純な表なら、scopeなしのth要素だけで足ります。

次の見本は、架空の店の営業時間の表で、列の見出しに曜日、行の見出しに時間帯を置いたものです。実行するコマンドではなく、HTMLの書き方の例です。

<table>
  <caption>架空の書店の営業時間</caption>
  <tr>
    <td></td>
    <th scope="col">平日</th>
    <th scope="col">土曜</th>
    <th scope="col">日曜</th>
  </tr>
  <tr>
    <th scope="row">午前</th>
    <td>営業</td>
    <td>営業</td>
    <td>休み</td>
  </tr>
  <tr>
    <th scope="row">午後</th>
    <td>営業</td>
    <td>休み</td>
    <td>休み</td>
  </tr>
</table>

W3Cのチュートリアルの例でも、「Open」や「Closed」のようなセルは、どの曜日のどの時間帯かが分からないと役に立たないとしています。scopeで向きを示しておくと、データのセルと見出しを結び付けやすくなります。

caption要素で表の題を伝える

技法H39は、表の題をcaption要素で示す方法です。captionは表の題で、表の見出しのような役割をします。caption要素を使うと、読み上げのソフトで表の題へ直接移れるとしています。

W3Cのチュートリアルでは、多くの読み上げのソフトがcaptionの中身を読み上げるとしています。captionは、すべての場面でWCAGに求められているわけではありませんが、表を見つけて、何の表かを分かってもらうのに役立ちます。表の上に題を見せているなら、その題をcaption要素に入れます。

自分で直すか、相談するかの判断

判断の目安は、「見出しが、最初の行か最初の列のどちらか1つだけにあるか」です。

• 1つだけで、列ごとに中身がはっきり違う: 見出しのセルをth要素にすれば足ります
• 行と列の両方に見出しがある: th要素にscope属性を付けます
• 見出しが2段になっている、結合したセルがある: id属性とheaders属性で結び付ける方法がありますが、作りが複雑になります

技法H63では、複雑な表をいくつかの単純な表に分けられないかを考えることもすすめています。3つ目のような表は、作り直す前に、表を分けて見せられないかを、ページの中身を決める人と相談します。

つまずきやすいところ

• 見出しのセルを太字にするだけ: 太字はth要素の代わりになりません。見出しのセルはth要素で書きます
• 配置のために表を使う: 技法H39では、見た目の配置にはCSSをすすめ、配置のための表ではcaption要素を使わないとしています。この記事の書き方は、データを並べる表のためのものです
• 画像の表を貼る: 表を画像にすると、見出しとデータの関係を文字で伝えられません。データの表はHTMLで作ります
• ページの見出しと混同する: 表の見出し(th要素)は、ページの見出し(h1〜h6)とは別のものです。ページの見出しの付け方は、Webデザインで見出しの階層を正しく付ける方法で紹介しています
• 文字を拡大したときに崩れる: 表の中の文字も、拡大したときに読めるかを確かめます。確かめ方は、Webデザインで文字の大きさと行間を決める方法で紹介しています。ページごとの題の付け方は、Webデザインのページタイトルの付け方が参考になります

まとめ

• データの表の見出しのセルはth要素、データのセルはtd要素で書きます
• 行と列の両方に見出しがあるときは、scope属性にcolかrowを付けて向きを示します
• 表の題はcaption要素に入れると、読み上げのソフトで表を見つけやすくなります
• 複雑な表は、id属性とheaders属性で結び付けるか、単純な表に分けられないかを考えます