表

バスの時刻表は表です。どのセルも、その行の見出しと列の見出しといっしょに見て初めて意味がわかります。

表はデータのためのもの

時刻表、価格表、アンケートの結果のように、情報に行と列があるときに表を使います。1990年代の終わりには、多くのサイトがページ全体のレイアウトを表でつくり、あるセルにメニュー、別のセルに本文を入れていました。これは本当に困ったことを引き起こします。スクリーンリーダーはどのセルもその行と列といっしょに読み上げるので、レイアウト用の表はわけのわからないスプレッドシートのように聞こえます。また、表のレイアウトは小さな画面にうまく合わせられません。今はレイアウトはCSSで行い、表はデータのために使います。

行、セル、見出し

表は一行ずつつくります。<table> が全体を包み、各 <tr>（table row）が一行で、行の中の各 <td>（table data）が一つのセルです。行や列の見出しになるセルには、かわりに <th>（table header）を使います。ブラウザーは初期設定でこれを太字で中央にそろえて表示します。列がそろうように、各行のセルの数は合わせましょう。

<table>
  <caption>Bread prices, October 2026</caption>
  <thead>
    <tr><th scope="col">Loaf</th><th scope="col">Weight</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Sourdough</th><td>800 g</td><td>6.50</td></tr>
    <tr><th scope="row">Rye</th><td>600 g</td><td>5.00</td></tr>
  </tbody>
</table>

表に自分自身を説明させる

三つのものを加えると、セルの格子がだれにでも読める表になります。一つ目は <caption> で、開始タグ <table> のすぐあとに置いて表に題をつけます。スクリーンリーダーは中身より先にこれを読み上げるので、聞く人は何についての表かがわかります。二つ目は各 <th> の scope 属性で、列の見出し（scope="col"）か行の見出し（scope="row"）かを示します。これがあれば、スクリーンリーダーはただ「5.00」と読むのではなく「Rye、Price、5.00」と読めます。三つ目は <thead>、<tbody>、<tfoot> で、見出しの行、本体の行、合計の行をまとめます。構造がはっきりし、CSSで部分ごとにスタイルをつけやすくなり、長い表を印刷するときにはブラウザーが各ページに見出しをくり返せます。

またがるセル

セルは、colspan でいくつかの列に、rowspan でいくつかの行にまたがらせることができます。週の時間割で、平日の五日間すべてにわたる昼休みは、colspan="5" をつけた一つのセルにできます。セルがまたがると、その行に必要なセルは少なくなります。ふつう6個のセルがある行で、そのうち一つに colspan="5" があれば、HTMLのその行のセルは2個だけです。またがるセルは、データの形に合うときに使いましょう。とても複雑な表はだれにとっても読みにくいので、大きな表を簡単な二つの表に分けたほうがよいこともよくあります。

横に広い表は、スマートフォンでは問題になることがあります。表は文章のように折り返せないので、列の多い表は画面より広くなることがあります。よくある対策は、CSSを使って表をそれだけで横にスクロールする要素で包み、ページのほかの部分まで広がらないようにすることです。

各セルのデータはできるだけ単純にしましょう。一つのセルに値は一つ、単位は各セルにくり返さず見出しに書き（「価格（ユーロ）」）、すき間をつくるための空のセルは使いません。こうしてつくった表は読み上げやすく、並べかえやすく、スプレッドシートにもきれいに貼りつけられます。