th要素(table herder cell)は表の中でデータセルの見出しとなるセルを指定します。通常のデータセルである td要素とは視覚環境の UA における表示も違い、要素内の内容は水平(左右)方向が中央揃え(Firefox のみ左寄せ)で、垂直方向の中央にテキストは太字(ボールド体)で表示されます。
th要素は見出しの役割をもつセルに対して指定するもので、列に関するデータそのものは td要素で指定します。th要素には headers属性, scope属性でその見出しに関する情報を、abbr属性, axis属性でセルに関する情報を追加できます。このように表に関する要素に非視覚環境のための機能が多く定義されているのは、表は使い方によって情報の流れがどうしても複雑になってしまう傾向にあるためです。
見出しセルの中には、ブロック要素を含めることができます。たとえば、th要素の中に、さらに table要素を入れて、表を入れ子にすることも可能ですが、複雑な表の入れ子は、ウェブページのアクセシビリティを大幅に低下させてしまうこともあるので注意してください。この場合のアクセシビリティの低下とは、主に音声出力・点字出力の非視覚環境に対することを指します。表におけるアクセシビリティ云々は、HTML速習の表(テーブル)を参照してください。
見出しセルの内容の省略形のテキストを指定します。繰り返して出現する内容に対して指定することで、非視覚環境では指定されている省略形で表現する(読み上げる)ことが期待されます。もともと省略形に近い内容の場合は、やみくもに abbr属性を付ける必要はありません。
見出しセルの内容の幅寄せやテキストの桁揃えを指定します。見出しセルの初期値は "center" です。値には次の5つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません(case-insensitive)。
align属性は非推奨ではありませんが CSS の text-alignプロパティで同様の表現に代替できます。
表が複雑な場合(3項目以上で構成)に、主に非視覚環境への配慮として表の td要素、またはth要素の内容を示したセルの分類名を指定します。axis属性を指定する場合には headers属性、または scope属性によって各セルを関連付けする必要があります。分類名はカンマ(,)区切りのリストで複数指定できます。
ブラウザの独自機能ですが、主要ウェブブラウザはずべて対応しています。見出しセルの背景となる画像ファイルの所在を URI で指定します。HTML の仕様には正式に定義されていないため、CSS の background-imageプロパティで代替することをお奨めします。
見出しセルの背景色を16進数RGB値、またはカラーネームで指定します。bgcolor属性は非推奨のため CSS のbackground-colorプロパティで代替することが推奨されています。
align属性の値に "char" を指定した場合にセル内の位置揃えの軸となる文字を指定します。たとえば、日本語や英語であればピリオド(.)、フランス語であればカンマ(,)のように lang属性(XHTML では xml:lnag属性)で指定した言語に対応する小数点を指定することが可能です。"<th align="char" char=".">..." のように指定すれば、セル内の文字がピリオド(.)に合わせて揃えられることが期待されます(現状、char属性に対応している UA はありません)。
char属性により位置揃えが指定された場合、charoff属性でその文字から水平方向にどの位置までずらして表示するかを指定します。たとえば、小数点以下2桁で揃えたい場合は、"<th align="char" char="." charoff="2">..." と指定します。
また、文字揃えの際にずらす方向は dir属性による書字方向に依存します。dir属性の値が "ltr" の場合、左の余白からずれます。dir属性の値が "rtl" の場合、右の余白からずれます(仕様では char属性、及び charoff属性は必ずしもサポートする必要は無いとされているため対応している UA はありません)。
複数のセルを横(列)方向に結合します。値には結合する列の数を指定します。初期値は "1" です。"2" 以上を指定すると、そのセルから右の列が結合して列をまたぎます。"0" を指定した場合、そのセルから右の列全てを結合することになります。ただし、"0" を指定した場合に結合するセルは colgroup要素でグループ化されている範囲に限定されます。
音声出力などの非視覚環境に対しての配慮として、headers属性が指定されたセルに関連する見出しセルの場所を明示します。th要素に指定された id属性の値を半角スペースで区切ることで複数の ID名を参照することが可能です。行、または列を一括して定義する場合には scope属性を指定します。
見出しセルの表示サイズの高さを指定します。height属性は非推奨のため CSS の heightプロパティで代替することが推奨されています。
見出しセル内のテキストの行末での折り返しを抑制します。通常、セル内に配置されたテキストは height属性, width属性等で指定されたセルの表示サイズに応じて、その領域を満たすと自動的に折り返して表示されます。nowrap属性はその折り返しを禁止する属性です。ただし、テキストがセルに指定されている表示サイズの領域を超える場合、セルのサイズ指定は無効となるため、表が表示域をはみ出して横スクロールを出すこともあります。HTML では nowrap、XHTML では属性値を省略できないため nowrap="nowrap" と記述します。
複数のセルを縦(行)方向に結合します。値には結合する行の数を指定します。初期値は "1" です。"2" 以上を指定すると、そのセルから下の行が結合して行をまたぎます。"0" を指定した場合、そのセルからそのセルから下の行全てを結合することになります。ただし、"0" を指定した場合に結合するセルは、tbody要素, tfoot要素, thead要素でグループ化されている範囲に限定されます。
音声出力などの非視覚環境に対しての配慮として、scope属性が指定されたセルに関連する見出しセルに続くデータ列の場所を一括で明示します。部分的に関連する見出しセルを定義する場合には headers属性を指定します。指定できる値には次の4つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません(case-insensitive)。
行グループとは tbody要素, tfoot要素, thead要素でグループ化された行を指し、列グループとは colgroup要素でグループ化された列を指します。
見出しセル内のテキストやイメージなどの内容の垂直(上下)方向の揃え方を指定します。初期値は "middle" です。値には次の4つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません(case-insensitive)。
valign属性は非推奨ではありませんが、CSS の vertical-alignプロパティで同様の表現に代替できます。
見出しセルの表示サイズの横幅を指定します。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>
table要素に指定されている summary属性は、表全体が表現している情報や表の構造を簡潔に説明するテキストを指定するもので、音声出力環境の UA の中には表の内容より先にこの summary属性の値を読み上げるものもあります。abbr属性は、主に見出しセルの th要素に設定し、見出しの内容を省略したテキストを指定します。ただし、もともと省略形に近い内容の場合は、そのまま同じ内容を記述するか、やみくもに abbr属性を付ける必要はありません。headers属性は、td要素に見出し情報を提供している th要素の id属性の値を指定します。これにより td要素の headers属性の値が th要素の id属性の値を参照します。複数の id属性の値を参照する場合には、半角スペースで区切って列挙することができます。axis属性は、td要素、または th要素のセル内容のを分類を行う機能で、headers属性と関連付けします。ここでは生徒の氏名を「name」、教科を「subject」と分類(カテゴリ分け)しています。これらの属性を使って作表することにより、たとえば、鈴木くんの英語の成績の "80" の部分を読み上げるにしても「subject:英, name:鈴木, 80」と読み上げることが期待され、視覚環境と同じ情報の流れで情報を参照することが可能になります。
http://w3g.jp/xhtml/dic/th直近の制作実績等:大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイム みんなのお国じまん New!