<thead> 表(テーブル)のヘッダ行を定義する
取り扱い | 現行の標準 |
カテゴリ |
なし |
親にできる要素 | <table> 。配置は<caption> 、<colgroup> の後かつ<tbody> 、<tfoot> 、<tr> の前に許可される |
子にできる要素 | 0個以上の<tr> |
対応ブラウザ | caniuseで確認 |
<thead>タグの説明
<thead>
は、表(テーブル)の中でヘッダー行を定義する際に使用します。ここで言うヘッダーとは、表の列の見出しを表す行のことです。見出しの内容そのものは<th>
で指定しますが、それをグループ化する祭に役立ちます。
<thead>
は、<tbody>
や<tfoot>
と併用することで、有用な意味を提供できます。特に、画面に入り切らないほど長い行を持つ表である場合に、個別の振る舞いを与えることができるため便利です。
テーブルの作成は、以下の流れで行います。
<thead>タグの特徴
- テーブルの中の行をまとめます。レイアウトには影響を与えませんが、セルの構造を無視した配置は認められません。
- CSSの
display
は、既定値でtable-header-group
が適用されます。 - 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- 一つの表の中で複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<thead>に指定できる主な属性
- align(非推奨)
- セル内容の水平方向の配置を指定します。スタイルシートを使って下さい。
- valign(非推奨)
- セル内容の垂直方向の配置を指定します。スタイルシートを使って下さい。
- bgcolor(非推奨)
- セルの背景色を指定します。スタイルシートを使って下さい。
- char(非推奨)
- align属性の値に "char" を指定した場合にセル内の位置揃えの軸となる文字を指定します。
- charoff(非推奨)
- char属性で位置揃えの軸となる文字を指定した場合に、その文字から水平方向にどの位置までずらして表示するかを指定します。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<thead>の使い方とサンプル
<thead>
を使う場合、以下のような構造が基本となります。表の中でヘッダー、本体内容、フッターを明確に分けたい時に採用して下さい。
HTML
<table>
<thead>
<tr>
<td>名前</td>
<td>担当</td>
<td>クラス</td>
</tr>
</thead>
<tbody>
<tr>
<td>山本</td>
<td>会長</td>
<td>3ーA</td>
</tr>
<tr>
<td>田中</td>
<td>副会長</td>
<td>3ーC</td>
</tr>
<tr>
<td>飯田</td>
<td>書紀</td>
<td>2ーB</td>
</tr>
</tbody>
<tfoot style="text-align:right;">
<tr>
<td colspan="3">2045年4月1日現在</td>
</tr>
</tfoot>
</table>
表示確認
名前 | 担当 | クラス |
---|---|---|
山本 | 会長 | 3ーA |
田中 | 副会長 | 3ーC |
飯田 | 書紀 | 2ーB |
2045年4月1日現在 |
上記の例は、スタイルシートで装飾しています。
一つの表の中で複数の<tbody>
を使うと、以下のようなセクション分割を行うことができます。
HTML
<table class="table_data">
<thead>
<tr>
<th>名前</th>
<th>担当</th>
<th>クラス</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="3">第十六期</th>
</tr>
<tr>
<td>山本</td>
<td>会長</td>
<td>3ーA</td>
</tr>
<tr>
<td>田中</td>
<td>副会長</td>
<td>3ーC</td>
</tr>
<tr>
<td>飯田</td>
<td>書紀</td>
<td>2ーB</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="3">第十五期</th>
</tr>
<tr>
<td>岩井</td>
<td>会長</td>
<td>3ーC</td>
</tr>
<tr>
<td>渡辺</td>
<td>副会長</td>
<td>3ーB</td>
</tr>
<tr>
<td>曽根</td>
<td>書紀</td>
<td>2ーA</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="3">第十四期</th>
</tr>
<tr>
<td>新崎</td>
<td>会長</td>
<td>3ーB</td>
</tr>
<tr>
<td>林</td>
<td>副会長</td>
<td>3ーA</td>
</tr>
<tr>
<td>大久保</td>
<td>書紀</td>
<td>2ーC</td>
</tr>
</tbody>
<tfoot style="text-align:right;">
<tr>
<td colspan="3">2045年4月1日現在</td>
</tr>
</tfoot>
</table>
表示確認
名前 | 担当 | クラス |
---|---|---|
第十六期 | ||
山本 | 会長 | 3ーA |
田中 | 副会長 | 3ーC |
飯田 | 書紀 | 2ーB |
第十五期 | ||
岩井 | 会長 | 3ーC |
渡辺 | 副会長 | 3ーB |
曽根 | 書紀 | 2ーA |
第十四期 | ||
新崎 | 会長 | 3ーB |
林 | 副会長 | 3ーA |
大久保 | 書紀 | 2ーC |
2045年4月1日現在 |
<thead>に関連するHTMLタグ
表(テーブル)を作成する要素 | |
---|---|
<table> | 表(テーブル)を作成する |
<caption> | 表(テーブル)にキャプションを付ける |
<col> | 表(テーブル)の縦列の属性をまとめて指定する |
<colgroup> | 表(テーブル)の縦列をグループ化する |
<tr> | 表(テーブル)の横一行を定義する |
<th> | 表(テーブル)の見出しとなるセルを作成する |
<td> | 表(テーブル)のセルを作成する |
<thead> | 表(テーブル)のヘッダー行を定義する |
<tbody> | 表(テーブル)の本体部分を定義する |
<tfoot> | 表(テーブル)のフッター行を定義する |