tbodyの概要
タグは、tableタグの中で表の本体部分（データ部分）をグループ化するためのタグです。通常、thead（表のヘッダー）やtfoot（表のフッター）と組み合わせて使用されます。
| 表の本体部分をグループ化する HTMLタグ | ||
|
<tbody><tr><td>データ</td></tr></tbody> 概要 |
||
tbodyタグの基本的な使い方
以下の例では、theadとtbodyを使って表を構造化しています。
<table border="1">
<thead>
<tr>
<th>名前</th>
<th>年齢</th>
<th>職業</th>
</tr>
</thead>
<tbody>
<tr>
<td>田中</td>
<td>30</td>
<td>エンジニア</td>
</tr>
<tr>
<td>佐藤</td>
<td>25</td>
<td>デザイナー</td>
</tr>
</tbody>
</table>実行例：
| 名前 | 年齢 | 職業 |
|---|---|---|
| 田中 | 30 | エンジニア |
| 佐藤 | 25 | デザイナー |
tbodyタグの応用：tfootと組み合わせる
tfootタグを追加することで、表の合計値や注釈を表示できます。
<table border="1">
<thead>
<tr>
<th>商品</th>
<th>価格</th>
</tr>
</thead>
<tbody>
<tr>
<td>ノートパソコン</td>
<td>120,000円</td>
</tr>
<tr>
<td>スマートフォン</td>
<td>80,000円</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合計</td>
<td>200,000円</td>
</tr>
</tfoot>
</table>実行例：
| 商品 | 価格 |
|---|---|
| ノートパソコン | 120,000円 |
| スマートフォン | 80,000円 |
| 合計 | 200,000円 |
注意事項
- tbodyタグは省略可能だが、
theadやtfootと一緒に使用すると構造が明確になる。 - JavaScriptでデータを操作するときに、tbodyタグがあると行の追加・削除が簡単になる。
- tbodyの背景色を変更すると、表のデータ部分のみのスタイルを設定できる。
- テーブルを正しく構造化することで、可読性とアクセシビリティが向上する。
よくある質問
- Q: tbodyタグは必須ですか？
- A: いいえ、省略可能ですが、
theadやtfootと一緒に使うことで、表の構造を整理できます。 - Q: tbodyタグはCSSでスタイリングできますか？
- A: はい、背景色やボーダーを変更するのに役立ちます。
- Q: tbodyのデータをJavaScriptで操作できますか？
- A: はい、
document.querySelector("tbody")を使うと行の追加・削除が簡単にできます。 - Q: tbodyタグを入れないとどうなりますか？
- A: ブラウザが自動的に補完しますが、構造がわかりにくくなります。
まとめ
tbodyタグは、表の本体部分をグループ化するためのタグ。theadやtfootと組み合わせると、表の構造が明確になる。- JavaScriptでデータ操作するときに便利。
- CSSで背景色やボーダーを変更し、表を見やすくできる。