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

最終更新日:2017年10月04日  (初回投稿日:2011年07月05日)

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

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

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

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

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

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

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

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

scope属性

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

scope属性には「colrowcolgrouprowgroup、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>要素が、その下方向(縦方向)のセルの見出しだということを示します。

<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>要素が、その右方向(横方向)のセルの見出しだということを示します。

  <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>要素でグルーピングしたグループに対しての見出しセルだということを示します。

<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」だと示しています。

<tbody>
  <tr>
    <th rowspan="3" scope="rowgroup">A</th>
</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」についてメモ。
次回の記事は、2017年10月に書いたものですが、テーブル関連の記事と一緒に読めるように、初回投稿日を 2011年7月6日に操作しています。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.