th 要素 (HTML)

[1] HTML の td 要素型は、表の見出しこま (header cell) をあらわします。

[6] 仕様書:

HTML 4
- 11.2.6 Table cells: The TH and TD elements IW:HTML4:"struct/tables.html#edef-TH"

[2]

局所名

th

名前空間名

http://www.w3.org/1999/xhtml

開始タグ

必須

終了タグ

省略可能 (HTML 4), 必須 (XHTML 1)

内容模型

%flow*

出現できる文脈

tr 直下

属性

属性名	属性値	既定値	説明	状態	出典
`abbr`	`%Text`	(なし)	省略形	[HTML 4]
`align`			揃え	[HTML 4] `%cellhalign`
`axis`	`#IDREF`	(なし)	関連する見出し	[HTML 4]
`background`	`%URI`		背景画像	非標準
`bgcolor`			背景色	[HTML 4] 非推奨
`bordercolor`	`%Color`		境界色	非標準
`bordercolordark`	`%Color`		境界色	非標準
`bordercolorlight`	`%Color`		境界色	非標準
`char`			揃える文字	[HTML 4] `%cellhalign`
`charoff`			揃える文字	[HTML 4] `%cellhalign`
`class`			級	[HTML 4] %coreattr
`colspan`	`NUMBER`	`1`	列またぎ	[HTML 4]
`dir`			書字方向	[HTML 4] %i18n
`headers`	`IDREFS`	(なし)	見出しこま	[HTML 4]
`height`			高さ	[HTML 4] 非推奨
`id`			一意識別子	[HTML 4] %coreattr
`lang`			自然言語	[HTML 4] %i18n
`xml:lang`			自然言語	[XHTML1]
`nowrap`	(真偽値属性)	(偽)	折返しなし	[HTML 4] 非推奨
`onclick`				[HTML 4] %events
`ondblclick`				[HTML 4] %events
`onkeydown`				[HTML 4] %events
`onkeypress`				[HTML 4] %events
`onkeyup`				[HTML 4] %events
`onmousedown`				[HTML 4] %events
`onmousemove`				[HTML 4] %events
`onmouseout`				[HTML 4] %events
`onmouseover`				[HTML 4] %events
`onmouseup`				[HTML 4] %events
`rowspan`	`NUMBER`	`1`	行またぎ	[HTML 4]
`scope`	`%Scope`	(なし)	見出し適用範囲	[HTML 4]
`style`			スタイル情報	[HTML 4] %coreattr
`title`			注釈的題	[HTML 4] %coreattr
`valign`			垂直配置	[HTML 4] `%cellvalign`
`width`			幅	[HTML 4] 非推奨
`xmlns`	`http://www.w3.org/1999/xhtml` 固定		名前空間名	W3C 勧告	XHTML m12n

状態

[14] HTMLElement の状態に加えて、

headers: DOMTokenList

レンダリング

[3] UA は、見出しこま (th) とデータこま (td) の別を利用して、著者のスタイル・シートがなくとも表をそれっぽく表示できます。 HTML 4 仕様書に挙げられているレンダリング例:

見出しこまを太字で表示する
見出しこまをデータこまとは異なる抑揚で読上げる
[5] 典型的レンダリング: 見出しこまを太字、水平垂直中央に配置 (IW:HTML4:"struct/tables.html#alignment")

UA は、見出しこまの内容または abbr 属性値のいずれかをレンダリングしなければなりません。

視覚UA は、こまの内容をすべて表示するには場所が足りないときに abbr を使うとよいかもしれません。
非視覚 UA は、こまの内容と一緒に見出しを表示するときには abbr を使うとよいかもしれません。

[4] 多くの視覚 UA の既定スタイルは >>5 です。

例

[7] th 中に p を使った例

NIKKEI NET(日経ネット):企業ニュース−企業の事業戦略、合併や提携から決算や人事まで速報 (2008-02-24 23:01:35 +09:00 版) http://www.nikkei.co.jp/news/sangyo/20080224AT1D220AC22022008.html

<table cellspacing="0" class="mini-market-tbl">
<tr><th><p>ソニー</p></th><td><p><a href='http://rd.nikkei.co.jp/stock/h/6758' target='betsuwaku' onClick='s_objectID="N-linkst"; var s=s_gi("nikkeicojpnnetprod,nikkeicojpglobal");s.linkTrackVars="prop7";s.prop7="N-linkst";s.tl(this,"o","N-linkst");'>株価</a> | <a href='http://nikkei.goo.ne.jp/perfect/basic_1213.html' target='betsuwaku' onClick='s_objectID="N-linkst"; var s=s_gi("nikkeicojpnnetprod,nikkeicojpglobal");s.linkTrackVars="prop7";s.prop7="N-linkst";s.tl(this,"o","N-linkst");'>企業情報</a> | <a href='http://www.sony.co.jp' target='betsuwaku' onClick='s_objectID="N-linkst"; var s=s_gi("nikkeicojpnnetprod,nikkeicojpglobal");s.linkTrackVars="prop7";s.prop7="N-linkst";s.tl(this,"o","N-linkst");'>ホームページ</a></p></td></tr>

<tr><th><p>シャープ</p></th><td><p><a href='http://rd.nikkei.co.jp/stock/h/6753' target='betsuwaku' onClick='s_objectID="N-linkst"; var s=s_gi("nikkeicojpnnetprod,nikkeicojpglobal");s.linkTrackVars="prop7";s.prop7="N-linkst";s.tl(this,"o","N-linkst");'>株価</a> | <a href='http://nikkei.goo.ne.jp/perfect/basic_1209.html' target='betsuwaku' onClick='s_objectID="N-linkst"; var s=s_gi("nikkeicojpnnetprod,nikkeicojpglobal");s.linkTrackVars="prop7";s.prop7="N-linkst";s.tl(this,"o","N-linkst");'>企業情報</a> | <a href='http://www.sharp.co.jp/' target='betsuwaku' onClick='s_objectID="N-linkst"; var s=s_gi("nikkeicojpnnetprod,nikkeicojpglobal");s.linkTrackVars="prop7";s.prop7="N-linkst";s.tl(this,"o","N-linkst");'>ホームページ</a></p></td></tr>
<tr><th><p>松下電器産業</p></th><td><p><a href='http://rd.nikkei.co.jp/stock/h/6752' target='betsuwaku' onClick='s_objectID="N-linkst"; var s=s_gi("nikkeicojpnnetprod,nikkeicojpglobal");s.linkTrackVars="prop7";s.prop7="N-linkst";s.tl(this,"o","N-linkst");'>株価</a> | <a href='http://nikkei.goo.ne.jp/perfect/basic_1208.html' target='betsuwaku' onClick='s_objectID="N-linkst"; var s=s_gi("nikkeicojpnnetprod,nikkeicojpglobal");s.linkTrackVars="prop7";s.prop7="N-linkst";s.tl(this,"o","N-linkst");'>企業情報</a> | <a href='http://panasonic.co.jp/' target='betsuwaku' onClick='s_objectID="N-linkst"; var s=s_gi("nikkeicojpnnetprod,nikkeicojpglobal");s.linkTrackVars="prop7";s.prop7="N-linkst";s.tl(this,"o","N-linkst");'>ホームページ</a></p></td></tr>

<tr><th><p>日立製作所</p></th><td><p><a href='http://rd.nikkei.co.jp/stock/h/6501' target='betsuwaku' onClick='s_objectID="N-linkst"; var s=s_gi("nikkeicojpnnetprod,nikkeicojpglobal");s.linkTrackVars="prop7";s.prop7="N-linkst";s.tl(this,"o","N-linkst");'>株価</a> | <a href='http://nikkei.goo.ne.jp/perfect/basic_1161.html' target='betsuwaku' onClick='s_objectID="N-linkst"; var s=s_gi("nikkeicojpnnetprod,nikkeicojpglobal");s.linkTrackVars="prop7";s.prop7="N-linkst";s.tl(this,"o","N-linkst");'>企業情報</a> | <a href='http://www.hitachi.co.jp/' target='betsuwaku' onClick='s_objectID="N-linkst"; var s=s_gi("nikkeicojpnnetprod,nikkeicojpglobal");s.linkTrackVars="prop7";s.prop7="N-linkst";s.tl(this,"o","N-linkst");'>ホームページ</a></p></td></tr>
<tr><th><p>キヤノン</p></th><td><p><a href='http://rd.nikkei.co.jp/stock/h/7751' target='betsuwaku' onClick='s_objectID="N-linkst"; var s=s_gi("nikkeicojpnnetprod,nikkeicojpglobal");s.linkTrackVars="prop7";s.prop7="N-linkst";s.tl(this,"o","N-linkst");'>株価</a> | <a href='http://nikkei.goo.ne.jp/perfect/basic_1458.html' target='betsuwaku' onClick='s_objectID="N-linkst"; var s=s_gi("nikkeicojpnnetprod,nikkeicojpglobal");s.linkTrackVars="prop7";s.prop7="N-linkst";s.tl(this,"o","N-linkst");'>企業情報</a> | <a href='http://canon.jp/' target='betsuwaku' onClick='s_objectID="N-linkst"; var s=s_gi("nikkeicojpnnetprod,nikkeicojpglobal");s.linkTrackVars="prop7";s.prop7="N-linkst";s.tl(this,"o","N-linkst");'>ホームページ</a></p></td></tr>

</table>