【HTML】th 要素の scope 属性の使い方

HTML で表を作るとき、th 要素の scope 属性を使ったことはあるでしょうか？筆者は長年ウェブ業界にいるにもかかわらず、お恥ずかしながら一度も使ったことがありません。先日、偶然に scope 属性を目にする機会があったので、自分の勉強を兼ねて調べたことをまとめてみました。

scope 属性の値の定義

scope 属性は、簡単に言えば、その th 要素が表すヘッダーはどこからどこまでの範囲を指しているのかを指定するものです。scope 属性に指定可能な値は row、col、rowgroup、colgroup の 4 つのいずれかです。WHATWG の HTML 仕様では次のように定義されています（日本語訳は筆者）。

おそらく、これだけ読んで理解するのは難しいですよね。以下、順を追って説明します。

ヘッダーセルが及ぼす範囲の基本

まずは普通の表からご覧ください。

<table class="table">
  <tr>
    <th>市区町村</th>
    <th>人口 (人)</th>
    <th>面積 (km<sup>2</sup>)</th>
  </tr>
  <tr>
    <th>東京都 千代田区</th>
    <td>58406</td>
    <td>11.66</td>
  </tr>
  <tr>
    <th>東京都 中央区</th>
    <td>141183</td>
    <td>10.21</td>
  </tr>
  <tr>
    <th>神奈川県 横浜市</th>
    <td>3724844</td>
    <td>437.49</td>
  </tr>
  <tr>
    <th>神奈川県 川崎市</th>
    <td>1475213</td>
    <td>143.00</td>
  </tr>
</table>

th 要素がいくつかマークアップされていますが、上の図では太字の部分に相当します。次の図では、これらの th 要素がどのセルの範囲のヘッダーになるのかを矢印で示しています。

scope=”rowgroup” と scope=”row”

次のマークアップをご覧ください。これまで 4 行だった表を、東京都と神奈川県で区分けするために thead と tbody 要素を使って都道府県でグループ化しています。そして、一番左側に新たに地域コードの列を追加しました。さらに、th 要素には本題でもある scope 属性を追加しています。

<table class="table">
  <thead>
    <tr>
      <th>地域コード</th>
      <th>市区町村</th>
      <th>人口 (人)</th>
      <th>面積 (km<sup>2</sup>)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <th scope="rowgroup">東京都</th>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>13101</td>
      <th scope="row">千代田区</th>
      <td>58406</td>
      <td>11.66</td>
    </tr>
    <tr>
      <td>13102</td>
      <th scope="row">中央区</th>
      <td>141183</td>
      <td>10.21</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td></td>
      <th scope="rowgroup">神奈川県</th>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>14100</td>
      <th scope="row">横浜市</th>
      <td>3724844</td>
      <td>437.49</td>
    </tr>
    <tr>
      <td>14130</td>
      <th scope="row">川崎市</th>
      <td>1475213</td>
      <td>143.00</td>
    </tr>
  </tbody>
</table>

では、scope 属性に “rowgroup” がセットされた「東京都」と「神奈川県」のヘッダーセルが及ぼす範囲を見てみましょう。

「東京都」の th 要素の scope 属性には “rowgroup” がセットされていますので、そのヘッダーが適用される範囲は、その th 要素から見て右下のセル全体です。ただし、tbody 要素の範囲内に限ります。同様に「神奈川県」の th 要素が及ぶ範囲も、その th 要素から見て右下のセル全体です。あくまでも、tbody 要素の範囲内という点、また、左側や上側のセルには及ばない点に注意してください。そのため、これらヘッダーセルは、その左側にある地域コードのセルには及びません。

最後に「千代田区」「中央区」など、th 要素の scope 属性に “row” がセットされたヘッダーセルが及ぼす範囲を見てみましょう。

scope 属性に “row” がセットされると、そのヘッダーセルが及ぼす範囲は、そのセルから見て右側にあるすべてのセルとなります。左側には及ぼさない点に注意してください。

以上、scope 属性の値が “rowgroup” と “row” の場合の例を見てみましたが、”colgroup” と “col” も、横か縦かの違いがあるだけで、考え方は同じです。

まとめ

正直に言うと、th 要素の scope 属性はややこしいですね。scope 属性は、構造が複雑な表でも、その構造をコンピューターからでも理解できるよう考え出されたのでしょう。現実的には、Google のロボットやスクリーンリーダーなどが scope 属性を理解しているのであれば、ウェブ制作者側にも scope 属性を使う意義が出てくるのですが、どうなのでしょうかね？

いずれにせよ、そもそも scope 属性を使わなければ構造を表現できないような複雑なテーブルを使わないようにして、できる限りシンプルな構造の表を作るよう心がける方が健全な気がしました。scope 属性を積極的に使いましょう、というオチでなくて、すみません。筆者はたぶん今後も使わないかもしれないです。。。