<tbody>タグの解説
<tbody>は、テーブル（表）の中でデータの本体部分を表します。ここで言う本体とは、ヘッダー行とフッター行を除いた内容を収める行のことです。
<tbody>は、<table>の中で<thead>や<tfoot>と併用することで、有用な意味を提供できます。特に、画面に入り切らないほど長い行を持つ表である場合に役立ちます。逆にヘッダー行とフッター行を明示しない表であれば、省略されることの多いタグです。
スクロールが生じるほど大きな表の場合、<thead>や<tfoot>をテーブルの端に固定するように配置すれば、<tbody>の内容を見やすくできます。また、プリントアウトした時に複数のページにまたがる表では、<thead>や<tfoot>を共通の要素として扱い、<tbody>の内容だけを変えていく方法が取れます。さらに、ひとつの表の中に複数の<tbody>を使えば、セクションに分割したセルのまとまりを個別に管理したり整形できます。
このような操作は、構造化されていない表では実現できないため、巨大なデータを扱う表では積極的に<tbody>を活用しましょう。
テーブルの作成は、以下の流れで行います。
- まず
<table>で表の作成を開始する - 必要であれば
<caption>を配置する - 列をグループ化する場合
<colgroup>を配置する - 列に対して一括で属性を指定する場合
<col>を配置する <tr>で表の行（横軸）を定義する- 見出しが必要であれば
<th>を配置する - 個別のデータを
<td>で作成する - 必要に応じて
<thead>を定義する - 必要に応じて
<tbody>を定義する - 必要に応じて
<tfoot>を定義する
<tbody>タグの特徴
- テーブルの中の行をまとめます。レイアウトには影響を与えませんが、セルの構造を無視した配置は認められません。
- CSSの
displayは、既定値でtable-row-groupが適用されます。 - 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- ひとつの表の中で複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<tbody>要素に指定できる属性
align（非推奨）- セル内容の水平方向の配置を指定します。スタイルシートを使って下さい。
valign（非推奨）- セル内容の垂直方向の配置を指定します。スタイルシートを使って下さい。
bgcolor（非推奨）- セルの背景色を指定します。スタイルシートを使って下さい。
char（非推奨）- align属性の値に "char" を指定した場合にセル内の位置揃えの軸となる文字を指定します。
charoff（非推奨）- char属性で位置揃えの軸となる文字を指定した場合に、その文字から水平方向にどの位置までずらして表示するかを指定します。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<tbody>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<tbody>の対象は<tr>で囲われたセル行です。ここに指定された範囲が表の本体内容であることを表します。<thead>や<tfoot>を明示しない表では省略されることが多いタグでもあります。しかし、省略してもブラウザの開発者ツールなどで確認すると暗黙に存在することが確認できます。
<table>
<tbody>
<tr>
<td>セルA1</td>
<td>セルB1</td>
</tr>
</tbody>
</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>
表の中で複数の<tbody>を使う
ひとつの表の中で複数の<tbody>を使うと、以下のようにセクション分割を行うことができます。これにより、各行のグループが持つ意味的な関連性が明確になり、利用者やブラウザが正確に情報を把握するための助けになります。
<table>
<thead>
<tr>
<th>名前</th>
<th>担当</th>
<th>クラス</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="3">第十六期</th>
</tr>
<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>
<tbody>
<tr>
<th colspan="3">第十五期</th>
</tr>
<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>
<tbody>
<tr>
<th colspan="3">第十四期</th>
</tr>
<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 thead th {
background-color: #ccc;
}
.table th {
background-color: #eee;
}