HTML tbodyタグの詳細ガイド
tbodyタグの定義と使用説明
<tbody>
タグは、HTMLテーブルの本体部分をグループ化するために使用されます。テーブルには、見出し部分(<thead>
)、内容部分(<tbody>
)、及びフッター部分(<tfoot>
)があります。<tbody>
タグは、テーブルのデータ行を囲むため、データの整理やスタイリングが容易になります。
ブラウザのサポート状況
<tbody>
タグはすべての主要なブラウザでサポートされており、互換性の問題はほとんどありません。具体的には、以下のブラウザで完全にサポートされています:
- Google Chrome
- Mozilla Firefox
- Safari
- Microsoft Edge
- Opera
tbodyタグの属性
<tbody>
タグには、グローバル属性を含むいくつかの属性があります:
align
: テキストの配置(非推奨、CSSでスタイル指定することを推奨)char
: 水平配置の基準文字(非推奨)charoff
: 基準文字からのオフセット(非推奨)valign
: 垂直方向の配置(非推奨、CSSでスタイル指定することを推奨)
tbodyタグのイベント
<tbody>
タグは次のイベントリスナーを持つことができます:
onclick
: tbody内のクリックイベントondblclick
: tbody内のダブルクリックイベントonmouseover
: tbody上にマウスが乗ったときのイベントonmouseout
: tbodyからマウスが離れたときの事件
コード例
以下は、<tbody>
タグを使用して基本的なHTMLテーブルを作成する例です:
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>太郎</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>花子</td>
<td>30</td>
</tr>
</tbody>
</table>
関連するQA
- Q1: <tbody> タグは必須ですか?
A1: <tbody> タグは省略できますが、省略した場合にはブラウザが自動的に <tbody> タグを追加してレンダリングします。
- Q2: <tbody> タグ内に複数の <tr> タグを使用できますか?
A2: はい、<tbody> タグ内には複数の <tr> タグを含むことができます。
- Q3: <tbody> タグにはCSSクラスを適用できますか?
A3: はい、<tbody> タグにはCSSクラスやスタイルを適用できます。例えば、
<tbody class="データテーブル">
のように使用します。