#?SuikaWiki/0.9
* th 要素・td 要素 headers 属性 (HTML, XHTML 1)
[1] [[HTML]] の [CODE(HTMLe)[[[th]]]] 要素および [CODE(HTMLe)[[[td]]]]
要素の [DFN[[CODE(HTMLa)[headers]] 属性]]は、
当該のデータこまの見出し情報を示します。

仕様書: [[HTML 4]]
- [CODE(HTMLa)[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] [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
<IW:HTML4:"struct/tables.html#idx-table-19">

[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)[
<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>
]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)[
<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>
]PRE]

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

[[#comment]]

** メモ

[[#comment]]

* メモ