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

*記事作成日:
この記事は、2016年4月30日に書いたものですが、HTMLの テーブル関連の要素 <th> <td> に関する記事なので、時系列的に読みやすくするために、日付を 2011年7月5日に操作しています。ご了承ください。

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

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

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

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

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

また、sorted属性という <th>要素だけに使える属性がありますが、これはまだ HTML5.1ドラフトで策定中です。
これは <table>要素に指定する sortable属性とセットで使って、テーブルをソート可能なモノにするらしいですよ。おもしろそうですね。

<table sortable="sortable">
 <tr>
  <th sorted="1">見出し1</th>
  <td>内容1-1</td>
  <td>内容1-2</td>
 </tr>
 <tr>
  <th sorted="2">見出し2</th>
  <td>内容2-1</td>
  <td>内容2-2</td>
 </tr>
</table>

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

scope属性

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」と書きます。

*今回の記事の参考資料:W3C の HTML5 勧告ページ
<td>について→ 4.9.9 The td element <th>について→ 4.9.10 The th element

次回予告

次回からは、セクション要素についてまとめていきます。

HTML5から、セクション分けのための新要素が登場。以前やった<nav>もこのセクション要素です。このほかに<section><article><aside>があります。

セクション要素は、見出し要素(h1〜6)と一緒に使って、HTML文書内に「章・節・項」などの階層を作ってあげる役割です。HTML文書がすっきりし、CSSの指定もスマートになるので、ぜひ使いたい要素です。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 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 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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