[16-7] テーブルセルで使う scope属性と headers属性について

テーブルのセルになる <th>要素 と <td>要素に使える headers属性 と、<th> だけで使える scope属性があります。

この2つは 音声ブラウザ（音声読み上げソフト）で、テーブルの情報をゲットしやすくするための働きをします。
非視覚環境のユーザがターゲットで、複雑なテーブルを組む場合には、これらを使用することが推奨されています。

<th>要素で 使用する属性	scope属性	col、row、colgroup、rowgroup、auto という値があり、音声ブラウザがテーブルの構成をとらえるために使います。
	headers属性	セルがどの見出しセルに対応するものかを明示します。 <td>でも使えます。

<td>要素で 使用する属性	headers属性	セルがどの見出しセルに対応するものかを明示します。 <th>でも使います。

● 2017年10月、「sorted属性」は HTML5.1 ドラフトで策定中でしたが、勧告で消えましたので、本文中から削除しました。
● この記事は、2016年4月30日に書いたものですが、テーブル関連の要素（ <th> <td> ）に関する記事なので、時系列的に読みやすくするため、初回投稿日を 2011年7月5日に操作しています。ご了承ください。

このほかに、<th>要素だけで使う abbr属性もあります。
abbr属性は、見出しセルの内容を簡潔に表現する代替ラベルとして使います。
見出しセルの内容を拡張したり、言い換えたりしてもいいらしい。

下記は、見出しセルの内容を abbr属性で短くした例です。

<th abbr=“渋谷5月”>渋谷店2016年5月売上げ</th>

HTML5では abbr属性は無くなって「<th>要素は簡潔な表現にして詳しい表現は グローバル属性の title属性でする」という情報もあったのですが、W3C の HTML5勧告と、HTML5.1勧告に abbr属性はイキてきます。

それでは本日のメインテーマ、scope属性 と headers属性 を順に見ていきましょう。

scope属性

scope属性は <th>要素（見出し）だけで使う属性です。

scope属性には「col、row、colgroup、rowgroup、auto 」という値があります。
autoは音声ブラウザ（音声読み上げソフト）におまかせのデフォルト値。この属性を指定しなければこの autoになります。

ディスプレイ表示のブラウザなら、テーブルを見ればその構造は一目瞭然ですが、音声ブラウザなどでの複雑なテーブルの構造の場合、この scope属性のauto以外の値で「この見出しセルは、どの方向のセル群の見出しなのか」を明確にします。（その方向に音声ブラウザが読み上げるらしいです）

ここでは下のテーブルを例にして話を進めます。
scope属性を使っていますが、普通のブラウザではプレビューに変化はありません。

来店者数

エリア・店舗名		来店総数	新規来店	リピート
A	渋谷店	100	80	20
	神宮前店	150	100	50
	青山店	200	120	80
B	三軒茶屋店	100	80	20
	二子玉川店	150	100	50
合計		700	480	220

HTMLはこのようになっています。

<table>
<caption>来店者数</caption>
<colgroup id="shop" span="2"></colgroup>
<colgroup id="count" span="3"></colgroup>
<thead>
  <tr>
    <th colspan="2" scope="colgroup">エリア・店舗名</th>
    <th scope="col">来店総数</th>
    <th scope="col">新規来店</th>
    <th scope="col">リピート</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th rowspan="3" scope="rowgroup">A</th>
    <th scope="row">渋谷店</td>
    <td>100</td>
    <td>80</td>
    <td>20</td>
  </tr>
  <tr>
    <th scope="row">神宮前店</td>
    <td>150</td>
    <td>100</td>
    <td>50</td>
  </tr>
  <tr>
    <th scope="row">青山店</td>
    <td>200</td>
    <td>120</td>
    <td>80</td>
  </tr>
</tbody>
<tbody>
  <tr>
    <th rowspan="2" scope="rowgroup">B</th>
    <th scope="row">三軒茶屋店</td>
    <td>100</td>
    <td>80</td>
    <td>20</td>
  </tr>
  <tr>
    <th scope="row">二子玉川店</td>
    <td>150</td>
    <td>100</td>
    <td>50</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <th colspan="2" scope="row">合計</th>
    <td>700</td>
    <td>480</td>
    <td>220</td>
  </tr>
</tfoot>
</table>

scope="col"

「col」は「column」の略で縦列のこと。
scope="col" を指定した <th>要素が、その下方向（縦方向）のセルの見出しだということを示します。

下の HTML は、サンプルのテーブルで scope="col"を指定した部分です。

<thead>
  <tr>
    <th colspan="2" scope="colgroup">エリア・店舗名</th>
    <th scope="col">来店総数</th>
    <th scope="col">新規来店</th>
    <th scope="col">リピート</th>
  </tr>
</thead>

scope="row"

「row」は 左右に一列になる行のこと。
scope="row" を指定した <th>要素が、その右方向（横方向）のセルの見出しだということを示します。

サンプルのテーブルで scope="row"を指定した部分です。

  <tr>
    <th rowspan="3" scope="rowgroup">A</th>
    <th scope="row">渋谷店</td>
    <td>100</td>
    <td>80</td>
    <td>20</td>
  </tr>

この他に、神宮前店...などの店名や「合計」の th要素にも scope="row" を指定しています

scope="colgroup"

「colgroup」は 縦方向のグループのこと。
scope="colgroup" を指定した <th>要素が、テーブルの <colgroup> や <col>要素でグルーピングしたグループに対しての見出しセルだということを示します。

サンプルのテーブルで scope="colgroup"を指定した部分です。

<colgroup id="shop" span="2"></colgroup>
<colgroup id="count" span="3"></colgroup>
<thead>
  <tr>
    <th colspan="2" scope="colgroup">エリア・店舗名</th>
    <th scope="col">来店総数</th>
    <th scope="col">新規来店</th>
    <th scope="col">リピート</th>
  </tr>
</thead>

scope="rowgroup"

「rowgroup」は 横方向のグループのこと。
scope="rowgroup" を指定した <th>要素が、テーブルの <thead> <tbody> <tfoot>要素でグルーピングしたグループに対しての見出しセルだということを示します。

サンプルのテーブルでは、<tbody>〜</tbody> でセルをグルーピングしている部分が2つあります。
その見出しセルがそれぞれ「A」「B」だと示しています。

サンプルのテーブルで「A」に scope="colgroup"を指定した部分です。

<tbody>
  <tr>
    <th rowspan="3" scope="rowgroup">A</th>

サンプルのテーブルで「B」に scope="colgroup"を指定した部分です。

</tbody>
<tbody>
  <tr>
    <th rowspan="2" scope="rowgroup">B</th>

headers属性

headers属性は、テーブルセル（<th>も<td>も）に使える属性で、そのセルがどの見出しセルに対応しているかを構造的に示すために使います。

よく地図で、縦の列に A.B.C...として、横の行に 1.2.3...とふっといて、ある範囲を「B-1」とか「C-3」とかで示しますよね。
このheaders属性もそんなかんじのものです。
テーブルでは、地図の A.B.C...や 1.2.3...に当たるものは <th>に付けた任意の id名になります。

今日のサンプルのテーブルに この仕組みを適用すると、下のようなソースになります。
最初のソースに id属性と headers属性を追加していますよ。

<table>
<caption>来店者数</caption>
<colgroup id="shop" span="2"></colgroup>
<colgroup id="count" span="3"></colgroup>
<thead>
  <tr>
    <th colspan="2" scope="colgroup" id="area">エリア・店舗名</th>
    <th scope="col" id="coming">来店総数</th>
    <th scope="col" id="new">新規来店</th>
    <th scope="col" id="repeat">リピート</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th rowspan="3" scope="rowgroup" id="area-a">A</th>
    <th scope="row" id="shop1" headers="area area-a">渋谷店</td>
    <td headers="shop1 coming">100</td>
    <td headers="shop1 new">80</td>
    <td headers="shop1 repeat">20</td>
  </tr>
  <tr>
    <th scope="row" id="shop2" headers="area area-a">神宮前店</td>
    <td headers="shop2 coming">150</td>
    <td headers="shop2 new">100</td>
    <td headers="shop2 repeat">50</td>
  </tr>
  <tr>
    <th scope="row" id="shop3" headers="area area-a">青山店</td>
    <td headers="shop3 coming">200</td>
    <td headers="shop3 new">120</td>
    <td headers="shop3 repeat">80</td>
  </tr>
</tbody>
<tbody>
  <tr>
    <th rowspan="2" scope="rowgroup" id="area-b">B</th>
    <th scope="row" id="shop4" headers="area area-b">三軒茶屋店</td>
    <td headers="shop4 coming">100</td>
    <td headers="shop4 new">80</td>
    <td headers="shop4 repeat">20</td>
  </tr>
  <tr>
    <th scope="row" id="shop5" headers="area area-b">二子玉川店</td>
    <td headers="shop5 coming">150</td>
    <td headers="shop5 new">100</td>
    <td headers="shop5 repeat">50</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <th colspan="2" scope="row" id="total">合計</th>
    <td headers="total coming">700</td>
    <td headers="total new">480</td>
    <td headers="total repeat">220</td>
  </tr>
</tfoot>
</table>

例えば、「三軒茶屋店」の「新規来店」を示すセルだったら、下図のように
三軒茶屋店の id「shop4」と 新規来店の id「new」を半角スペースで区切った値「shop4 new」と書きます。

参考資料： HTML 5.1 - W3C Recommendation, 1 November 2016 - 4.9. Tabular data

次回予告

次回は「テーブルをレスポンシブ対応させるCSS」についてメモします。