th 要素・td 要素 headers 属性 (HTML, XHTML 1)

[1] HTML の th 要素および td 要素の headers 属性は、当該のデータこまの見出し情報を示します。

仕様書: HTML 4

headers IW:HTML4:"struct/tables.html#adef-headers"
11.4.1 Associating header information with data cells IW:HTML4:"struct/tables.html#header-data"

[2] 現在のデータこまの見出し情報を提供する割には、 th 要素にもこの属性があったりします。

属性値

[3] この属性の値は IDREFS です。それぞれの値はこまの名前 (id) です。

こまの名前であって見出しこまの名前とは特に限定されていません。常識的には見出しこまを指定するものですが、 HTML 4 的には見出しこまとデータこまをあまり区別する気がないようなので、本当にこまの名前なのかもしれません。

[4] HTML 4 仕様書の記号によれば、この属性の値は大文字・小文字を区別します。 SGML 的には IDREFS で、 HTML 4 は NAMECASE GENERAL YES なので、属性値は自動的に大文字に統一されます。というあたり、なんだかなぁ。 (噂のID問題参照。)

[6] この属性は省略可能です。 headers 属性がなく、 scope 属性の影響下にもないこまの見出しは、 >>10 の算法で求められます。

見出し情報検出算法

[10] headers がなく、 scope の適用下にもないこまの見出し情報は、次の算法により求めても構いません。

仕様書: HTML 4 11.4.3 Algorithm to find heading information IW:HTML4:"struct/tables.html#idx-table-19"

[11]

空の見出しこま並びを用意する
こまの位置から左に向かって行見出しこまを探す
- 見出しこまが見つかれば、見出しこま並びにそのこまを入れる
- 見出しこま並びでの並び順は文書順 (左から右へ)
- 見出しこまを過ぎてデータこまが見つかればこの方向は探索終了
- 見出しこまが headers 属性を持っていれば、
  1. 見出しこま並びに headers 参照こま群を挿入
  2. この方向は探索終了
- 表の端まできたらこの方向は探索終了
こまの位置から上に向かって列見出しこまを探す
- 見出しこまが見つかれば、見出しこま並びに (列見出しの後に) そのこまを入れる
- 見出しこま並びでの並び順は文書順 (上から下へ)
- 見出しこまを過ぎてデータこまが見つかれば探索終了
- 見出しこまが headers 属性を持っていれば、
  1. 見出しこま並びに headers 参照こま群を挿入
  2. 探索終了
- 表の端まできたら探索終了

ただし、 axis を有するこまは見出しこまとして扱う

(表方向性が左から右の場合。)

[12] 見出しこまが headers を持っているときにこま群をどこに挿入するのか HTML 4 仕様書にはちゃんとかかれていません (前に? 後ろに?)。またぎ (rowspan・colspan) こま対策も抜けています。

レンダリング

[5] HTML 4 仕様書によれば、著者は通常、非視覚的UA がデータこまについての見出し情報 (例: こま情報の前に読まれる見出し情報) をレンダリングするのを助けるために headers 属性を使いますが、スタイル・シートとあわせて使っても構わないそうです。

他との関係

[8] 見出しこま側で scope 属性を使うことができます。 scope と headers は用途としては同じものですが、データこま側に使う headers 属性の方が複雑な表にも対応できます。 (しかしほとんどの場合、 scope を使えば十分です。)

例

[7]

<TABLE border="1" 
       summary="This table charts the number of cups
                of coffee consumed by each senator, the type 
                of coffee (decaf or regular), and whether 
                taken with sugar.">
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<TR>
   <TH id="t1">Name</TH>
   <TH id="t2">Cups</TH>
   <TH id="t3" abbr="Type">Type of Coffee</TH>
   <TH id="t4">Sugar?</TH>
<TR>
   <TD headers="t1">T. Sexton</TD>
   <TD headers="t2">10</TD>
   <TD headers="t3">Espresso</TD>
   <TD headers="t4">No</TD>
<TR>
   <TD headers="t1">J. Dinnen</TD>
   <TD headers="t2">5</TD>
   <TD headers="t3">Decaf</TD>
   <TD headers="t4">Yes</TD>
</TABLE>

(HTML 4 仕様書より)

レンダリング例:

Caption: Cups of coffee consumed by each senator
Summary: This table charts the number of cups
         of coffee consumed by each senator, the type 
         of coffee (decaf or regular), and whether 
         taken with sugar.
Name: T. Sexton,   Cups: 10,   Type: Espresso,   Sugar: No
Name: J. Dinnen,   Cups: 5,    Type: Decaf,      Sugar: Yes

[9] >>7 の例のような単純な構造の表では、 headers 属性の代わりに scope 属性を使うことができます。

<TABLE border="1" 
       summary="This table charts the number of cups
                of coffee consumed by each senator, the type 
                of coffee (decaf or regular), and whether 
                taken with sugar.">
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<TR>
   <TH scope="col">Name</TH>
   <TH scope="col">Cups</TH>
   <TH scope="col" abbr="Type">Type of Coffee</TH>
   <TH scope="col">Sugar?</TH>
<TR>
   <TD>T. Sexton</TD>
   <TD>10</TD>
   <TD>Espresso</TD>
   <TD>No</TD>
<TR>
   <TD>J. Dinnen</TD>
   <TD>5</TD>
   <TD>Decaf</TD>
   <TD>Yes</TD>
</TABLE>

この場合 >>7 とまったく同じレンダリング結果が期待できます。

[13] General Electric : Our Company : News (General Electric 著, 2007-05-26 17:23:46 +09:00 版) http://www.ge.com/en/company/news/press/1q03earnings.htm

実世界例 (名無しさん)

[14] Tide Tables - Broads Authority (http://www.broads-authority.gov.uk/ 著, 2007-05-26 17:23:45 +09:00 版) http://broads-authority.gov.uk/boating/navigating/tide-tables.html

実世界例 (名無しさん)

メモ

[15] WebAIM: E-mail List Archives (2007-05-26 17:23:43 +09:00 版) http://www.webaim.org/discussion/mail_message.php?id=10594 (名無しさん)

[16] 6 Web-Based Information and Applications Accessibility Guidelines (2007-05-26 17:23:42 +09:00 版) http://www.usps.com/cpim/ftp/hand/as508a/508a_c6.html#508hdr39

誤って header とした解説 (名無しさん)

[17] nsf.gov - Web Development Policy and Standards Manual: Example 15: Tables - US National Science Foundation (NSF) (2007-05-26 17:35:39 +09:00 版) http://www.nsf.gov/web/guide/best_practices/access/example15.jsp

<td header="program">BIO</td>
<td headers="fiscal year 1999, quarter 1"> 10</td>
<td headers="fiscal year 1999, quarter 2">
25</td>

なんだこりゃ。 (名無しさん 2007-05-26 08:37:52 +00:00)

[18] Section 508,§1194.22, Rule H - Section 508 - NOAA's National Weather Service (2007-01-17 22:30:30 +09:00 版) http://www.nws.noaa.gov/sec508/htm/rule_h.htm

headers が span を指している。 HTML 4 でいう axis と合体させたような使い方がしたかったらしいが・・・。 (名無しさん 2007-05-26 08:39:37 +00:00)

[19] Re: Complex Table Examples (Ian Hickson 著, 2007-05-18 07:08:17 +09:00 版) http://lists.w3.org/Archives/Public/public-html/2007May/1036.html (名無しさん 2007-05-26 08:51:46 +00:00)

[20] Juicy Studio: The HTML Scope/Headers Debate (2007-06-03 09:34:57 +09:00 版) http://juicystudio.com/article/html-scope-headers-debate.php (名無しさん 2007-06-03 00:47:18 +00:00)

[21] HTML5 IRC logs: freenode / #whatwg / 20070703 (2007-07-04 00:05:44 +09:00 版) http://krijnhoetmer.nl/irc-logs/whatwg/20070703 (名無しさん 2007-07-03 15:09:10 +00:00)

[22] テーブルとアクセシビリティ -- ごく簡単なHTMLの説明 (2002-02-06 版) http://www.kanzaki.com/docs/html/tbl-access.html (名無しさん)