[1] HTML の th
要素および td
要素の headers
属性は、
当該のデータこまの見出し情報を示します。
仕様書: HTML 4
headers
IW:HTML4:"struct/tables.html#adef-headers"[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"
axis
を有するこまは見出しこまとして扱う(表方向性が左から右の場合。)
[12] 見出しこまが headers
を持っているときにこま群をどこに挿入するのか
HTML 4 仕様書にはちゃんとかかれていません (前に? 後ろに?)。
またぎ (rowspan
・colspan
)
こま対策も抜けています。
[5] HTML 4 仕様書によれば、著者は通常、
非 視覚的UA がデータこまについての見出し情報
(例: こま情報の前に読まれる見出し情報) をレンダリングするのを助けるために
headers
属性を使いますが、
スタイル・シートとあわせて使っても構わないそうです。
[8] 見出しこま側で scope
属性を使うことができます。
scope
と headers
は用途としては同じものですが、
データこま側に使う 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 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
[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 ( 版) 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
(名無しさん)
[23] Adding [SameObject] to DOMTokenLists · whatwg/html@ec1dc4d ( 版) https://github.com/whatwg/html/commit/ec1dc4d4571c61cf0c0dfe3e562898635886b412
[24] Make a.ping and tableCell.headers strings, not DOMTokenLists ( (domenic著, )) https://github.com/whatwg/html/commit/7dd2e95b03edd19515c636152d63d3c74cb69d6f
[25] Stop using White_Space (annevk著, ) https://github.com/whatwg/html/commit/635a59996c72044852306e89a88b68536a2781d8
[26] Should the 'empty cell' definition ignore Default_ignoreable code points? · Issue #4854 · whatwg/html () https://github.com/whatwg/html/issues/4854
[27] Stop using White_Space by annevk · Pull Request #4860 · whatwg/html () https://github.com/whatwg/html/pull/4860