比較表をHTMLで作る：見出し・スマホ・読み上げ

比較表をHTMLで作るときは、table要素で組み、表の題をcaptionに、行と列の見出しをthとscopeで書きます。表を画像にしてはいけません。スマホで横に長くなる表は、列を減らすか、表の枠の中だけを横に動かすか、1件ずつのカードにするかを、その表の使われ方で決めます。

何を比べるか、どの公式情報を載せるかは、HTMLの前に決まっている話です。中身の作り方は比較ページの作り方⁠に書いたので、ここでは、決まった中身をどう組んで、どう見せるかに絞ります。

最低限の組み方

樹脂の止水板を3社⁠で比べる表を、架空の値で書くと次のようになります。

<table>
  <caption>止水板の比較（架空の例）</caption>
  <thead>
    <tr>
      <th scope="col">製品・メーカー</th>
      <th scope="col">高さ</th>
      <th scope="col">設置</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">A社 製品X</th>
      <td>600mm</td>
      <td>工具なし</td>
    </tr>
    <tr>
      <th scope="row">B社 製品Y</th>
      <td>450mm</td>
      <td>ボルト固定</td>
    </tr>
  </tbody>
</table>

ポイントは3つ⁠の要素です。

比較表なら、1列目の製品名を行の見出し（th）⁠にするのが要です。表を読み上げで聞く人は、セルの値を聞くたびに、どの製品のどの項目かを知る必要があるからです。

thとscopeは、MDNでどう説明されている？

MDNのth要素の説明は、thを表のセルのグループの見出しとし、そのグループの範囲をscope属性とheaders属性で決めるとしています。scopeの値は、row（その行のすべてのセル）⁠、col（その列のすべてのセル）⁠、rowgroup、colgroupの4つです。

単純な表では、scopeを書かなくてもブラウザが範囲を推測します。それでもMDNは、次の理由で明示を勧めています。

一部の支援技術では正しく推論できない場合があるため、見出しのスコープを明示的に指定することで、ユーザーの使い勝手が改善する可能性があります。

captionは、tableの最初に置く

MDNのcaption要素の説明では、captionはtableの最初の子要素にする必要があります。表がfigureの唯一の中身なら、captionの代わりにfigcaptionを使う、とも書かれています。

表の上に段落や見出しで「主なメーカーの比較」⁠と書くだけだと、その文と表のつながりは機械には分かりません。captionに書けば、その表の名前として扱われます。

読み上げでは、どう聞こえる？

W3Cの表のチュートリアルは、スクリーンリーダーは1セルずつ読み上げ、そのセルに関係する見出しのセルも合わせて伝えるので、利用者が文脈を見失わないと説明しています。thとscopeが無い表では、数字だけが続けて読まれます。

captionについては、W3Cの題と要約の説明が、captionは表の見出しのように働き、多くのスクリーンリーダーが読み上げるとしています。利用者は、表の中身を全部聞く前に、その表を読むかどうかを決められます。WCAGを満たすために常に必要なものではない、とも書かれていますが、比較表に付けて困ることはありません。

セルを結合すると、組み方が難しくなる

縦や横にセルを結合した表は、見出しとセルの関係が単純ではなくなります。W3Cの複雑な表の説明は、そうした表では見出しにidを付け、各セルのheaders属性で関係する見出しを並べる書き方を示しています。同時に、多くの場合は小さな表に分けて組み直すことを考える価値がある、としています。

比較表で結合したくなるのは、「同じメーカーの製品が2つある」ときなどです。結合せず、行ごとにメーカー名を書いたほうが、読み上げでも、スマホで並べ替えても崩れません。

表を画像にしない理由

デザインを崩さないために、表を画像にして貼る作り方があります。これは使いません。

WCAGの達成基準1.4.5は、使っている技術で見た目を作れるなら、情報を伝えるのに画像の文字ではなくテキストを使うよう求めています。HTMLとCSSで作れる表は、この「作れる」⁠に当たります。

困るのは、読み上げだけではありません。

• 拡大すると文字がぼやけ、スマホでは読めない大きさになる
• 型番や数字を選んでコピーできない
• ブラウザの翻訳が効かない
• 1か所直すたびに、画像を作り直すことになる

Googleの画像のSEOの説明は、画像の中身を、代替テキスト、キャプションなどのページの内容、コンピュータビジョンの仕組みを使って理解するとしています。表の数字そのものを、画像からだけで読んでもらう前提には立てません。

スマホで横に長い表は、どう見せる？

列の多い表は、スマホの幅には収まりません。選べるのは、だいたい次の3つです。

まず、列を減らせないかを考える

最初に考えるのは、スマホの幅に合わせて列を減らすことです。比べるのに要る列だけを表に残し、細かい仕様は製品ごとのページに送ります。

列を減らせば、横に動かす必要も、作りを変える必要もなくなります。PCとスマホで同じ表を見せられるので、直すときも1か所で済みます。

比べる表は、枠の中だけ横に動かす

W3CのReflowの説明（達成基準1.4.10）⁠は⁠、幅320 CSSピクセルで、内容を縦のスクロールだけで読めることを求めています。ただし、使い方や意味のために2次元の配置が要る部分は例外で、その例としてデータの表を挙げています。

例外になるのは、表の部分だけです。同じ説明は、表を専用の枠に入れて、その枠の中で横に動かせるようにすれば、表のまわりの文章は画面の幅に合わせて折り返せる、としています。逆に、ページ全体が横にはみ出し、表の後ろの段落まで横に動かさないと読めないのは、達成できていない例として挙がっています。

この形にするなら、1列目の製品名を固定しておくと、横に動かしても、どの製品の値かを見失いません。

1行ずつ読む表は、カードにする

項目が多く、読む人が1社ずつ見ていく表なら、1件⁠を1枚⁠のカードにして縦に並べます。カードの中は「項目名と値」⁠の組を並べます。

カードにすると、横に並べて見比べることはできなくなります。比べることが目的の表をカードにすると、読む人は上下に何度も行き来することになります。比べる表は枠の中で横に動かし、カードは1件ずつ読む表に使う、と分けて考えます。

セルの中身で気をつけること

組み方が正しくても、中身の書き方で読めなくなることがあります。

• 数字と単位を1つ⁠のセルに入れ、単位を列ごとにそろえる
• 値が無いときは、「—」⁠と「非公表」⁠と「対象外」⁠を分ける
• 記号（○・△）⁠を使うなら、意味を表の下に書く
• 略語は、表の中で初めて出る所で正式な名前も書く

値が無いセルの書き分けは、データ型のサイトでは特に要ります。「—」⁠が⁠、メーカーが公表していないのか、その製品には無い機能なのか、まだ確かめていないのかが分からないと、読む人は比べられません。

全ページで列の並びが同じなら、表のHTMLを1つ⁠の型から作れます。scopeやcaptionを入れ忘れても、型を直せば全ページに効きます。表の作りを1つ⁠の型にしておけば、スマホでの見え方も型の段階で確かめられます。確かめ方はスマホ表示の確かめ方に、読み上げを含めた使いやすさの点検はユーザビリティとは⁠に書きました。メーカー図鑑の検索での数字はメーカー図鑑の実測⁠にまとめています。データで比べるサイトの全体はデータベース型サイトから読めます。

仕様・出典の確認日：2026年10月26日⁠。