<thead>タグの解説
<thead>は、テーブル（表）の中でヘッダーに該当する行のブロックを定義します。ここで言うヘッダーとは、表の列の見出しを表す行のことです。見出しの内容そのものは<th>で指定しますが、それをグループ化する祭に役立ちます。
<thead>は、<tbody>や<tfoot>と併用することで、表に含まれる行に有用な意味を提供できます。特に、画面に入り切らないほど巨大なデータ構造を持つ表で活用できます。
テーブルの作成は、以下の流れで行います。
- まず
<table>で表の作成を開始する - 必要であれば
<caption>を配置する - 列をグループ化する場合
<colgroup>を配置する - 列に対して一括で属性を指定する場合
<col>を配置する <tr>で表の行（横軸）を定義する- 見出しが必要であれば
<th>を配置する - 個別のデータを
<td>で作成する - 必要に応じて
<thead>を定義する - 必要に応じて
<tbody>を定義する - 必要に応じて
<tfoot>を定義する
<thead>タグの特徴
- テーブルの中の行をまとめます。レイアウトには影響を与えませんが、セルの構造を無視した配置は認められません。
- CSSの
displayは、既定値でtable-header-groupが適用されます。 - 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- ひとつの表の中で複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<thead>要素に指定できる属性
align（非推奨）- セル内容の水平方向の配置を指定します。スタイルシートを使って下さい。
valign（非推奨）- セル内容の垂直方向の配置を指定します。スタイルシートを使って下さい。
bgcolor（非推奨）- セルの背景色を指定します。スタイルシートを使って下さい。
char（非推奨）- align属性の値に "char" を指定した場合にセル内の位置揃えの軸となる文字を指定します。
charoff（非推奨）- char属性で位置揃えの軸となる文字を指定した場合に、その文字から水平方向にどの位置までずらして表示するかを指定します。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<thead>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<thead>の対象は<tr>で囲われたセル行です。この要素は<tbody>よりも先に配置しなければならないため、必然的に最初の一行目を含むことになります。
<table>
<thead>
<tr>
<th>セル</th>
<th>セル</th>
</tr>
</thead>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>
<thead>の中に複数の行が配置されることも十分考えられます。最初の一行目の見出しが大きな分類を表し、二行目で小さな分類を表す場合などです。基本的に見出しのセルは<th>で作成しますが、内容によっては<td>と使い分けます。
<table>
<thead>
<tr>
<th>大見出し</th>
<th>大見出し</th>
</tr>
<tr>
<td>小見出し</td>
<td>小見出し</td>
</tr>
</thead>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>
表のヘッダー行とフッター行を定義して本体の範囲を示す
表の中でヘッダー行とフッター行を明示し、本体の内容となる範囲を示す場合は、以下のように記述します。
<table>
<thead>
<tr>
<th>名前</th>
<th>担当</th>
<th>クラス</th>
</tr>
</thead>
<tbody>
<tr>
<td>山本</td>
<td>会長</td>
<td>３ーＡ</td>
</tr>
<tr>
<td>田中</td>
<td>副会長</td>
<td>３ーＣ</td>
</tr>
<tr>
<td>飯田</td>
<td>書紀</td>
<td>２ーＢ</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">2045年4月1日現在</td>
</tr>
</tfoot>
</table>
.table {
inline-size: 100%;
border-spacing: 0;
border-block-start: 1px solid gray;
border-inline-start: 1px solid gray;
}
.table :where(th,td) {
padding-block: 0.25rem;
padding-inline: 0.5rem;
border-block-end: 1px solid gray;
border-inline-end: 1px solid gray;
text-align: center;
}
.table th {
background-color: #eee;
}