th要素

Updated / Published

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

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

見出しセルの中には、ブロックレベル要素を含めることができます。たとえば、th要素の中に、さらに table要素を入れて、表を入れ子にすることも可能ですが、複雑な表の入れ子は、ウェブページのアクセシビリティを大幅に低下させてしまうこともあるので注意してください。この場合のアクセシビリティの低下とは、主に音声出力や点字出力などの非視覚環境に対することを指します。表の入れ子やセルの結合が多用されていると意図する情報の流れで読み上げられなかったり、または正しく点字変換ができないことがあります。たとえば、音声出力環境においては、表を読み上げる場合、左上から右下に1セルずつ読み上げるため、行や列の関係が把握し難く、情報と読み上げ内容を一致させるのは困難になりがちです。

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
要素型
tr要素の子要素
開始タグ
必須
終了タグ
  • XHTML 必須
  • HTML4.01 省略可
非推奨
-
内容モデル

abbr属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
必須
-
非推奨
-
属性値
テキスト

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

align属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
必須
-
非推奨
-
属性値
  • left
  • right
  • center
  • justify
  • char

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

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

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

HTML5では、align属性は廃止されました。

axis属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
必須
-
非推奨
-
属性値
文字列

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

HTML5では、axis属性は廃止されました。

background属性

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

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

bgcolor属性

バージョン
  • HTML4.01(T,F)
  • XHTML1.0(T,F)
指定要素
必須
-
非推奨
  • 非推奨
  • HTML4.01 Strict 廃止
  • XHTML1.0 Strict 廃止
  • XHTML1.1 廃止
属性値

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

HTML5では、bgcolor属性は廃止されました。

char属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
必須
-
非推奨
-
属性値
小数点

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

HTML5では、char属性は廃止されました。

charoff属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
必須
-
非推奨
-
属性値
  • 整数（pixels）
  • パーセンテージ値（%）

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

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

HTML5では、charoff属性は廃止されました。

colspan属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
必須
-
非推奨
-
属性値
整数（pixels）

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

HTML5では、colspan属性の値は正の整数となり、0を指定することはできなくなりました。

headers属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
必須
-
非推奨
-
属性値
ID名

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

height属性

バージョン
  • HTML4.01(T,F)
  • XHTML1.0(T,F)
指定要素
必須
-
非推奨
  • 非推奨
  • HTML4.01 Strict 廃止
  • XHTML1.0 Strict 廃止
  • XHTML1.1 廃止
属性値
  • 整数（pixels）
  • パーセンテージ値（%）

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

HTML5では、height属性は廃止されました。

nowrap属性

バージョン
  • HTML4.01(T,F)
  • XHTML1.0(T,F)
指定要素
必須
-
非推奨
  • 非推奨
  • HTML4.01 Strict 廃止
  • XHTML1.0 Strict 廃止
  • XHTML1.1 廃止
属性値
  • nowrap
  • nowrap="nowrap"（XHTML）

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

HTML5では、nowrap属性は廃止されました。

rowspan属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
必須
-
非推奨
-
属性値
整数（pixels）

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

scope属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
必須
-
非推奨
-
属性値
  • row
  • col
  • rowgroup
  • colgroup

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

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

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

valign属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
必須
-
非推奨
-
属性値
  • top
  • middle
  • bottom
  • baseline

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

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

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

HTML5では、valign属性は廃止されました。

width属性

バージョン
  • HTML4.01(T,F)
  • XHTML1.0(T,F)
指定要素
必須
-
非推奨
  • 非推奨
  • HTML4.01 Strict 廃止
  • XHTML1.0 Strict 廃止
  • XHTML1.1 廃止
属性値
  • 整数（pixels）
  • パーセンテージ値（%）

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

HTML5では、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>
  • table要素に指定されている summary属性は、表全体が表現している情報や表の構造を簡潔に説明するテキストを指定するもので、音声出力環境において、表の内容より先に summary属性の値を読み上げてもらうことを意図しており、最初に表がどのような内容を扱っているのかを示すことで、ユーザの理解を促すことが期待できます。
  • abbr属性は、主に見出しセルの th要素に設定し、見出しの内容を省略したテキストを指定します。ただし、もともと省略形に近い内容の場合は、そのまま同じ内容を記述するか、やみくもに abbr属性を付ける必要はありません。
  • headers属性は、td要素に見出し情報を提供している th要素の id属性の値を指定します。これにより td要素の headers属性の値が th要素の id属性の値を参照します。複数の id属性の値を参照する場合には、半角スペースで区切って列挙することができます。
  • axis属性は、td要素、または th要素のセル内容のを分類を行う機能で、headers属性と関連付けします。ここでは生徒の氏名を「name」、教科を「subject」と分類（カテゴリ分け）しています。

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