
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="データテーブル">のように使用します。