Go to information

th要素

  1. th要素
  2. abbr属性
  3. align属性
  4. axis属性
  5. background属性
  6. bgcolor属性
  7. char属性
  8. charoff属性
  9. colspan属性
  10. headers属性
  11. height属性
  12. nowrap属性
  13. rowspan属性
  14. scope属性
  15. valign属性
  16. width属性
  17. その他の属性
  18. サンプル

th要素

th要素(table herder cell)は表の中でデータセルの見出しとなるセルを指定します。通常のデータセルである td要素とは視覚環境の UA における表示も違い、要素内の内容は水平(左右)方向が中央揃え(Firefox のみ左寄せ)で、垂直方向の中央にテキストは太字(ボールド体)で表示されます。

th要素は見出しの役割をもつセルに対して指定するもので、列に関するデータそのものは td要素で指定します。th要素には headers属性, scope属性でその見出しに関する情報を、abbr属性, axis属性でセルに関する情報を追加できます。このように表に関する要素に非視覚環境のための機能が多く定義されているのは、表は使い方によって情報の流れがどうしても複雑になってしまう傾向にあるためです。

見出しセルの中には、ブロック要素を含めることができます。たとえば、th要素の中に、さらに table要素を入れて、表を入れ子にすることも可能ですが、複雑な表の入れ子は、ウェブページのアクセシビリティを大幅に低下させてしまうこともあるので注意してください。この場合のアクセシビリティの低下とは、主に音声出力・点字出力の非視覚環境に対することを指します。表におけるアクセシビリティ云々は、HTML速習表(テーブル)を参照してください。

バージョン
要素型
tr要素の子要素
開始タグ
必須
終了タグ
非推奨
-
内包可能

abbr属性

バージョン
指定要素
必須
-
非推奨
-
属性値
テキスト

見出しセルの内容の省略形のテキストを指定します。繰り返して出現する内容に対して指定することで、非視覚環境では指定されている省略形で表現する(読み上げる)ことが期待されます。もともと省略形に近い内容の場合は、やみくもに abbr属性を付ける必要はありません。

align属性

バージョン
指定要素
必須
-
非推奨
-
属性値

見出しセルの内容の幅寄せやテキストの桁揃えを指定します。見出しセルの初期値は "center" です。値には次の5つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません(case-insensitive)。

left
内容とテキストを左揃えで表示する
right
内容とテキストを右揃えにする
center
内容とテキストを中央揃えにする
justify
文字を均等に配置し、テキストを両端揃えで表示する
char
char属性で指定した特定の文字を基準に揃えて表示する

align属性は非推奨ではありませんが CSStext-alignプロパティで同様の表現に代替できます。

axis属性

バージョン
指定要素
必須
-
非推奨
-
属性値
文字列

表が複雑な場合(3項目以上で構成)に、主に非視覚環境への配慮として表の td要素、またはth要素の内容を示したセルの分類名を指定します。axis属性を指定する場合には headers属性、または scope属性によって各セルを関連付けする必要があります。分類名はカンマ(,)区切りのリストで複数指定できます。

background属性

バージョン
ブラウザの独自機能
指定要素
必須
-
非推奨
-
属性値
URI

ブラウザの独自機能ですが、主要ウェブブラウザはずべて対応しています。見出しセルの背景となる画像ファイルの所在を URI で指定します。HTML の仕様には正式に定義されていないため、CSS の background-imageプロパティで代替することをお奨めします。

bgcolor属性

バージョン
指定要素
必須
-
非推奨
属性値

見出しセルの背景色を16進数RGB値、またはカラーネームで指定します。bgcolor属性は非推奨のため CSS のbackground-colorプロパティで代替することが推奨されています。

char属性

バージョン
指定要素
必須
-
非推奨
-
属性値
小数点

align属性の値に "char" を指定した場合にセル内の位置揃えの軸となる文字を指定します。たとえば、日本語や英語であればピリオド(.)、フランス語であればカンマ(,)のように lang属性XHTML では xml:lnag属性)で指定した言語に対応する小数点を指定することが可能です。"<th align="char" char=".">..." のように指定すれば、セル内の文字がピリオド(.)に合わせて揃えられることが期待されます(現状、char属性に対応している UA はありません)。

charoff属性

バージョン
指定要素
必須
-
非推奨
-
属性値

char属性により位置揃えが指定された場合、charoff属性でその文字から水平方向にどの位置までずらして表示するかを指定します。たとえば、小数点以下2桁で揃えたい場合は、"<th align="char" char="." charoff="2">..." と指定します。

また、文字揃えの際にずらす方向は dir属性による書字方向に依存します。dir属性の値が "ltr" の場合、左の余白からずれます。dir属性の値が "rtl" の場合、右の余白からずれます(仕様では char属性、及び charoff属性は必ずしもサポートする必要は無いとされているため対応している UA はありません)。

colspan属性

バージョン
指定要素
必須
-
非推奨
-
属性値
整数(pixels)

複数のセルを横(列)方向に結合します。値には結合する列の数を指定します。初期値は "1" です。"2" 以上を指定すると、そのセルから右の列が結合して列をまたぎます。"0" を指定した場合、そのセルから右の列全てを結合することになります。ただし、"0" を指定した場合に結合するセルは colgroup要素でグループ化されている範囲に限定されます。

headers属性

バージョン
指定要素
必須
-
非推奨
-
属性値
ID名

音声出力などの非視覚環境に対しての配慮として、headers属性が指定されたセルに関連する見出しセルの場所を明示します。th要素に指定された id属性の値を半角スペースで区切ることで複数の ID名を参照することが可能です。行、または列を一括して定義する場合には scope属性を指定します。

height属性

バージョン
指定要素
必須
-
非推奨
属性値

見出しセルの表示サイズの高さを指定します。height属性は非推奨のため CSS の heightプロパティで代替することが推奨されています。

nowrap属性

バージョン
指定要素
必須
-
非推奨
属性値

見出しセル内のテキストの行末での折り返しを抑制します。通常、セル内に配置されたテキストは height属性, width属性等で指定されたセルの表示サイズに応じて、その領域を満たすと自動的に折り返して表示されます。nowrap属性はその折り返しを禁止する属性です。ただし、テキストがセルに指定されている表示サイズの領域を超える場合、セルのサイズ指定は無効となるため、表が表示域をはみ出して横スクロールを出すこともあります。HTML では nowrap、XHTML では属性値を省略できないため nowrap="nowrap" と記述します。

rowspan属性

バージョン
指定要素
必須
-
非推奨
-
属性値
整数(pixels)

複数のセルを縦(行)方向に結合します。値には結合する行の数を指定します。初期値は "1" です。"2" 以上を指定すると、そのセルから下の行が結合して行をまたぎます。"0" を指定した場合、そのセルからそのセルから下の行全てを結合することになります。ただし、"0" を指定した場合に結合するセルは、tbody要素, tfoot要素, thead要素でグループ化されている範囲に限定されます。

scope属性

バージョン
指定要素
必須
-
非推奨
-
属性値

音声出力などの非視覚環境に対しての配慮として、scope属性が指定されたセルに関連する見出しセルに続くデータ列の場所を一括で明示します。部分的に関連する見出しセルを定義する場合には headers属性を指定します。指定できる値には次の4つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません(case-insensitive)。

row
そのセルに関する見出し情報を行方向に適用
col
そのセルに関する見出し情報を列方向に適用
rowgroup
そのセルに関する見出し情報を行グループ全体に適用
colgroup
そのセルに関する見出し情報を列グループ全体に適用

行グループとは tbody要素, tfoot要素, thead要素でグループ化された行を指し、列グループとは colgroup要素でグループ化された列を指します。

valign属性

バージョン
指定要素
必須
-
非推奨
-
属性値

見出しセル内のテキストやイメージなどの内容の垂直(上下)方向の揃え方を指定します。初期値は "middle" です。値には次の4つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません(case-insensitive)。

top
セルの上辺に内容の上辺を揃えて表示する
middle
セルの垂直方向の長さの中央に表示する
bottom
セルの下辺に内容の下辺を揃えて表示する
baseline
テキストの1行目をベースラインで揃えて表示する(2行目以降は影響なし)

valign属性は非推奨ではありませんが、CSS の vertical-alignプロパティで同様の表現に代替できます。

width属性

バージョン
指定要素
必須
-
非推奨
属性値

見出しセルの表示サイズの横幅を指定します。width属性は非推奨のため CSS の widthプロパティで代替することが推奨されています。

その他の属性

共通属性
イベント属性

アクセシブルな表の作例

テスト結果
英語 数学 国語
鈴木くん 80 65 75
佐藤くん 50 95 40

この表はテスト結果の成績表です。成績表は縦方向の項目が「氏名」で、横方向の項目は「教科」で構成されています。行に対しての見出しには生徒の氏名が並んでいます。列に対しての見出しには「英語」「数学」「国語」といった教科名が並んでいます。この表を合成音声出力機器を使って通常どおりに読み上げた場合、左上から右下に1セルずつ順に「英語, 数学, 国語, 鈴木くん, 80, 65, 75, 佐藤くん, 50, 95, 40」と読み上げられていくことでしょう。しかし、"鈴木くん" と読み上げた次にいきなり "80" と数字だけを読み上げられても、一体何に対する "80" なのかがわかりません。そこで、表には非視覚環境のために定義されている多くの機能があるので、それらを使って非視覚環境が表現する情報の流れと視覚環境で参照した場合の情報の流れが一致するように工夫してみましょう。

記述例
<table summary="鈴木くんと佐藤くんのテスト結果一覧表">
<caption>テスト結果</caption>
<tr>
<td></td>
<th abbr="英" axis="subject" id="english">英語</th>
<th abbr="数" axis="subject" id="mathematics">数学</th>
<th abbr="国" axis="subject" id="linguistics">国語</th>
</tr>
<tr>
<th abbr="鈴木" axis="name" id="suzuki">鈴木くん</th>
<td headers="english suzuki">80</td>
<td headers="mathematics suzuki">65</td>
<td headers="linguistics suzuki">75</td>
</tr>
<tr>
<th abbr="佐藤" axis="name" id="satou">佐藤くん</th>
<td headers="english satou">50</td>
<td headers="mathematics satou">95</td>
<td headers="linguistics satou">40</td>
</tr>
</table>

これらの属性を使って作表することにより、たとえば、鈴木くんの英語の成績の "80" の部分を読み上げるにしても「subject:英, name:鈴木, 80」と読み上げることが期待され、視覚環境と同じ情報の流れで情報を参照することが可能になります。

現在位置
  1. W3G
  2. XHTML
  3. HTML辞典
  4. th要素
ナビゲーション
ステータス情報
作者
上田 遼
公開
2005-10-01T12:38:15+09:00
更新
2008-12-29T04:27:11+09:00
URI
http://w3g.jp/xhtml/dic/th
検索

直近の制作実績等:大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイム みんなのお国じまん New!