HTML【 表 】4～scope属性と headers属性

テーブルのセル（th、td）に使える属性に、「scope」属性と「headers」属性というものがあります。
この2つの属性は 音声ブラウザ（音声読み上げソフト）で、テーブルの情報を表現しやすくするための働きをします。
非視覚の環境のユーザへの配慮が必要なサイトでテーブルを組む場合には、これらを使用することが推奨されています。
　

１．概要

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

▲目次へ戻る

２．scope属性

　
scope属性には「col」「row」「colgroup」「rowgroup」「auto」という値があります。

autoは音声ブラウザ（音声読み上げソフト）の仕様通りとなる値で、scope属性のデフォルト値です。この属性の指定をしなければ、この autoになります。

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

下のようなテーブルを例にして紹介していきます。

表示の上では変化がありませんが、scope属性を使って次のように書いています。

<table>
　<caption>出金管理</caption>
　<colgroup id="item" span="2"></colgroup>
　<colgroup id="cost" 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">光熱費</th>
　　　<th scope="row">電気</th>
　　　<td>￥8,500</td>
　　　<td>￥8,000</td>
　　　<td>￥9,500</td>
　　</tr>
　　<tr>
　　　<th scope="row">ガス</th>
　　　<td>￥5,500</td>
　　　<td>￥5,000</td>
　　　<td>￥5,700</td>
　　</tr>
　　<tr>
　　　<th scope="row">水道</th>
　　　<td>￥4,000</td>
　　　<td>￥3,500</td>
　　　<td>￥4,300</td>
　　</tr>
　　<tr>
　　　<th rowspan="2" scope="rowgroup">通信費</th>
　　　<th scope="row">携帯電話</th>
　　　<td>￥15,000</td>
　　　<td>￥13,000</td>
　　　<td>￥9,000</td>
　　</tr>
　　<tr>
　　　<th scope="row">インターネット</th>
　　　<td>￥3,000</td>
　　　<td>￥3,000</td>
　　　<td>￥3,000</td>
　　</tr>
　</tbody>
　<tfoot>
　　<tr>
　　　<th colspan="2" scope="row">合計</th>
　　　<td>￥36,000</td>
　　　<td>￥32,500</td>
　　　<td>￥31,500</td>
　　</tr>
　</tfoot>
</table>

　
■「scope=”col”」の「col」は「column」の略で縦列のことです。
scope=”col” を指定したth要素が、その縦方向（下方向）のセルの見出しであることを表しています。

<th scope="col">当月料金</th>
<th scope="col">先月料金</th>
<th scope="col">昨年同月料金</th>

　
■「scope=”row”」の「row」は横列（行）のことです。
scope=”row” を指定したth要素が、その横方向（右方向）のセルの見出しであることを表しています。

<th scope="row">電気</th>
<th scope="row">ガス</th>
<th scope="row">水道</th>
<th scope="row">携帯電話</th>
<th scope="row">インターネット</th>
<th colspan="2" scope="row">合計</th>

　
■「scope=”colgroup”」の「colgroup」は縦方向のグループのことです。
scope=”colgroup”を指定したth要素が、テーブルの<colgroup>や<col>でグループ化したグループに対しての見出しセルであることを表しています。

<th colspan="2" scope="colgroup">科目</th>

　
■「scope=”rowgroup”」の「rowgroup」は横方向のグループのことです。
scope=”rowgroup” を指定したth要素が、テーブルの<thead> <tbody> <tfoot>でグループ化したグループに対しての見出しセルであることを表しています。
上のテーブルでは、<tbody> ～ </tbody>でセルをグループ化している部分が2つあります。そして、その見出しセルがそれぞれ「光熱費」「通信費」であるとことを表しているのです。

<th rowspan="3" scope="rowgroup">光熱費</th>
<th rowspan="2" scope="rowgroup">通信費</th>

▲目次へ戻る

３．headers属性

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

地図などで、縦の列を A.B.C…、横の行を 1.2.3…と範囲分けして、目的地周辺を「A-1」などで表すことがあると思います。headers属性もそのようなイメージです。

テーブルでは、<th>に付けるid名が、地図の A.B.C…や 1.2.3…に当たります。

上のテーブルにheaders属性を加えると、次のような書き方になります。

<table class="sample1">
<caption>出金管理</caption>
　<colgroup id="item" span="2"></colgroup>
　<colgroup id="cost" span="3"></colgroup>
　<thead>
　　<tr>
　　　<th colspan="2" scope="colgroup" id="subject">科目</th>
　　　<th scope="col" id="current">当月料金</th>
　　　<th scope="col" id="l_month">先月料金</th>
　　　<th scope="col" id="l_year">昨年同月料金</th>
　　</tr>
　</thead>
　<tbody>
　　<tr>
　　　<th rowspan="3" scope="rowgroup" id="utilities">光熱費</th>
　　　<th scope="row" id="electric" headers="subject utilities">電気</th>
　　　<td headers="electric current">￥8,500</td>
　　　<td headers="electric l_month">￥8,000</td>
　　　<td headers="electric l_year">￥9,500</td>
　　</tr>
　　<tr>
　　　<th scope="row" id="gas" headers="subject utilities">ガス</th>
　　　<td headers="gas current">￥5,500</td>
　　　<td headers="gas current">￥5,000</td>
　　　<td headers="gas l_year">￥5,700</td>
　　</tr>
　　<tr>
　　　<th scope="row" id="water" headers="subject utilities">水道</th>
　　　<td headers="water current">￥4,000</td>
　　　<td headers="water l_month">￥3,500</td>
　　　<td headers="water l_year">￥4,300</td>
　　</tr>
　　<tr>
　　　<th rowspan="2" scope="rowgroup" id="communication">通信費</th>
　　　<th scope="row" id="mobile" headers="subject communication">携帯電話</th>
　　　<td headers="mobile current">￥15,000</td>
　　　<td headers="mobile l_month">￥13,000</td>
　　　<td headers="mobile l_year">￥9,000</td>
　　</tr>
　　<tr>
　　　<th scope="row" id="internet" headers="subject communication">インターネット;</th>
　　　<td headers="internet current">￥3,000</td>
　　　<td headers="internet l_month">￥3,000</td>
　　　<td headers="internet l_year">￥3,000</td>
　　</tr>
　</tbody>
　<tfoot>
　　<tr>
　　　<th colspan="2" scope="row" id="total">合計</th>
　　　<td headers="total current">￥36,000</td>
　　　<td headers="total l_month">￥32,500</td>
　　　<td headers="total l_year">￥31,500</td>
　　</tr>
　</tfoot>
</table>

２．scope属性の時のソースに id属性とheaders属性を追加しています。

例えば、「携帯電話」の「当月料金」を示すセルは、携帯電話のid「mobile」と当月料金のid「current」を半角スペースで区切った値「mobile current」と書きます。

▲目次へ戻る