* th 要素・td 要素 headers 属性 (HTML, XHTML 1)
[1] [[HTML]] の [CODE(HTMLe)[[[th]]]] 要素および [CODE(HTMLe)[[[td]]]]
要素の [DFN[[CODE(HTMLa)[headers]] 属性]]は、
当該のデータこまの見出し情報を示します。
仕様書: [[HTML 4]]
- [CODE(HTMLa)[headers]]
- 11.4.1 Associating header information with data cells
[2] [Q[現在の''データ''こまの見出し情報を提供]]する割には、
[CODE(HTMLe)[th]] 要素にもこの属性があったりします。
[[#comment]]
** 属性値
[3] この属性の値は [CODE(SGML)[[[IDREFS]]]] です。
それぞれの値はこまの名前 ([CODE(HTMLa)[[[id]]]]) です。
[Q[こまの名前]]であって[Q[見出しこまの名前]]とは特に限定されていません。
常識的には見出しこまを指定するものですが、 HTML 4
的には見出しこまとデータこまをあまり区別する気がないようなので、
本当に[Q[こまの名前]]なのかもしれません。
[4] HTML 4 仕様書の記号によれば、この属性の値は大文字・小文字を区別します。
SGML 的には [CODE(SGML)[IDREFS]] で、 HTML 4 は
[CODE(SGML)[[[NAMECASE]] [[GENERAL]] YES]]
なので、属性値は自動的に大文字に統一されます。
というあたり、なんだかなぁ。 ([[噂のID問題]]参照。)
[6] この属性は省略可能です。
[CODE(HTMLa)[headers]] 属性がなく、 [CODE(HTMLa)[[[scope]]]]
属性の影響下にもないこまの見出しは、 >>10 の算法で求められます。
[[#comment]]
*** 見出し情報検出算法
[10] [CODE(HTMLa)[headers]] がなく、 [CODE(HTMLa)[scope]]
の適用下にもないこまの見出し情報は、次の算法により求めても構いません。
仕様書: HTML 4 11.4.3 Algorithm to find heading information
[11]
= 空の見出しこま並びを用意する
= こまの位置から左に向かって行見出しこまを探す
-- 見出しこまが見つかれば、見出しこま並びにそのこまを入れる
-- 見出しこま並びでの並び順は[[文書順]] (左から右へ)
-- 見出しこまを過ぎてデータこまが見つかればこの方向は探索終了
-- 見出しこまが [CODE(HTMLa)[[[headers]]]] 属性を持っていれば、
=== 見出しこま並びに [CODE(HTMLa)[headers]] 参照こま群を挿入
=== この方向は探索終了
-- 表の端まできたらこの方向は探索終了
= こまの位置から上に向かって列見出しこまを探す
-- 見出しこまが見つかれば、見出しこま並びに (列見出しの後に) そのこまを入れる
-- 見出しこま並びでの並び順は[[文書順]] (上から下へ)
-- 見出しこまを過ぎてデータこまが見つかれば探索終了
-- 見出しこまが [CODE(HTMLa)[[[headers]]]] 属性を持っていれば、
=== 見出しこま並びに [CODE(HTMLa)[headers]] 参照こま群を挿入
=== 探索終了
-- 表の端まできたら探索終了
- ただし、 [CODE(HTMLa)[[[axis]]]] を有するこまは見出しこまとして扱う
([[表方向性]]が左から右の場合。)
[12] 見出しこまが [CODE(HTMLa)[headers]] を持っているときにこま群をどこに挿入するのか
HTML 4 仕様書にはちゃんとかかれていません (前に? 後ろに?)。
またぎ ([CODE(HTMLa)[[[rowspan]]]]・[CODE(HTMLa)[[[colspan]]]])
こま対策も抜けています。
[[#comment]]
** レンダリング
[5] HTML 4 仕様書によれば、著者は通常、
非 [[視覚的UA]] がデータこまについての見出し情報
(例: こま情報の前に読まれる見出し情報) をレンダリングするのを助けるために
[CODE(HTMLa)[headers]] 属性を使いますが、
[[スタイル・シート]]とあわせて使っても構わないそうです。
[[#comment]]
** 他との関係
[8] 見出しこま側で [CODE(HTMLa)[[[scope]]]] 属性を使うことができます。
[CODE(HTMLa)[scope]] と [CODE(HTMLa)[headers]] は用途としては同じものですが、
データこま側に使う [CODE(HTMLa)[headers]] 属性の方が複雑な表にも対応できます。
(しかしほとんどの場合、 [CODE(HTMLa)[scope]] を使えば十分です。)
[[#comment]]
** 例
[7]
[PRE(HTML)[
Cups of coffee consumed by each senator
| Name |
Cups |
Type of Coffee |
Sugar? |
| T. Sexton |
10 |
Espresso |
No |
| J. Dinnen |
5 |
Decaf |
Yes |
]PRE]
(HTML 4 仕様書より)
レンダリング例:
[PRE[
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
]PRE]
[9] >>7 の例のような単純な構造の表では、
[CODE(HTMLa)[headers]] 属性の代わりに [CODE(HTMLa)[[[scope]]]]
属性を使うことができます。
[PRE(HTML)[
Cups of coffee consumed by each senator
| Name |
Cups |
Type of Coffee |
Sugar? |
| T. Sexton |
10 |
Espresso |
No |
| J. Dinnen |
5 |
Decaf |
Yes |
]PRE]
この場合 >>7 とまったく同じレンダリング結果が期待できます。
[13]
[CITE@en[General Electric : Our Company : News]] ([[General Electric]] 著, [CODE[2007-05-26 17:23:46 +09:00]] 版)
実世界例
([[名無しさん]])
[14]
[CITE@en[Tide Tables - Broads Authority]] ([[http://www.broads-authority.gov.uk/]] 著, [CODE[2007-05-26 17:23:45 +09:00]] 版)
実世界例
([[名無しさん]])
[[#comment]]
** メモ
[15]
[CITE@en[WebAIM: E-mail List Archives]] ([CODE[2007-05-26 17:23:43 +09:00]] 版)
([[名無しさん]])
[16]
[CITE[6 Web-Based Information and Applications Accessibility Guidelines]] ([CODE[2007-05-26 17:23:42 +09:00]] 版)
誤って [CODE(HTMLa)@en[[[header]]]] とした解説
([[名無しさん]])
[17]
[CITE[nsf.gov - Web Development Policy and Standards Manual: Example 15: Tables - US National Science Foundation (NSF)]] ([CODE[2007-05-26 17:35:39 +09:00]] 版)
>
[PRE(HTML invalid example code)[
BIO |
10 |
25 |
]PRE]
なんだこりゃ。
([[名無しさん]] [WEAK[2007-05-26 08:37:52 +00:00]])
[18]
[CITE[Section 508,§1194.22, Rule H - Section 508 - NOAA's National Weather Service]] ([CODE[2007-01-17 22:30:30 +09:00]] 版)
[CODE(HTMLa)@en[[[headers]]]] が [CODE(HTMLe)@en[[[span]]]] を指している。 [[HTML 4]] でいう
[CODE(HTMLa)@en[[[axis]]]] と合体させたような使い方がしたかったらしいが・・・。
([[名無しさん]] [WEAK[2007-05-26 08:39:37 +00:00]])
[19]
[CITE@en[Re: Complex Table Examples]] ([[Ian Hickson]] 著, [CODE[2007-05-18 07:08:17 +09:00]] 版)
([[名無しさん]] [WEAK[2007-05-26 08:51:46 +00:00]])
[20]
[CITE@en-gb[Juicy Studio: The HTML Scope/Headers Debate]] ([CODE[2007-06-03 09:34:57 +09:00]] 版)
([[名無しさん]] [WEAK[2007-06-03 00:47:18 +00:00]])
[21]
[CITE[HTML5 IRC logs: freenode / #whatwg / 20070703]] ([TIME[2007-07-04 00:05:44 +09:00]] 版)
([[名無しさん]] [WEAK[2007-07-03 15:09:10 +00:00]])
[22]
テーブルとアクセシビリティ -- ごく簡単なHTMLの説明 ([CODE[2002-02-06]] 版)
([[名無しさん]])
[[#comment]]
* メモ
[23] [CITE@en[Adding ''''''[''''''SameObject'''''']'''''' to DOMTokenLists · whatwg/html@ec1dc4d]]
([TIME[2016-02-18 11:11:00 +09:00]] 版)
[24] [CITE@en[Make a.ping and tableCell.headers strings, not DOMTokenLists]]
( ([[domenic]]著, [TIME[2016-05-17 15:09:30 +09:00]]))
[25] [CITE@en[Stop using White_Space]]
([[annevk]]著, [TIME[2019-08-30 16:18:30 +09:00]])
[26] [CITE@en[Should the 'empty cell' definition ignore Default_ignoreable code points? · Issue #4854 · whatwg/html]]
([TIME[2020-07-13 12:58:06 +09:00]])
[27] [CITE@en[Stop using White_Space by annevk · Pull Request #4860 · whatwg/html]]
([TIME[2020-07-13 12:58:41 +09:00]])