【HTML5】tbodyタグとは？使い方についてまとめ

tbodyの概要

tbodyはテーブル（表）をヘッダー・フッター・ボディに明示的に分ける時のボディ部分を表します。

注意点

tbodyはテーブル（表）にtheadがある場合、tbodyはその後に来る必要があります。tbodyを使用する場合、tableの直接の子要素としてtrを置くことはできませんが、tbodyの中に置くことができます。

tbodyのカテゴリー

コンテンツカテゴリー

コンテンツカテゴリなし

コンテンツモデル

コンテンツモデルなし

tbodyに入れられるタグ一覧

タグ早見表

0個以上のtr。スクリプトサポート要素。

入れられるタグのカテゴリー・モデル

コンテンツカテゴリなし
スクリプトサポーティング（スクリプト対応要素）

tbodyに使える属性

属性とは<tbody> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id	概要	要素に対してID固有の識別名を付けることができます。
id	属性の値	英字から始まる英数字
class	概要	要素に対して分類名を付けることができます。
class	属性の値	英字から始まる英数字
style	概要	要素に対して直接スタイルを指定することができます。
style	属性の値	スタイルシートのコード

グローバル属性一覧はこちら

スポンサードサーチ

tbodyの使い方

<table>
  <thead>
    <tr>
      <th>見出し1</th>
      <th>見出し2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ1</td>
      <td>データ2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>フッター1</td>
      <td>フッター2</td>
    </tr>
  </tfoot>
</table>

ブラウザ対応状況

ブラウザの対応（PC)
Chrome	あり
Safari	あり
Internet Explorer	あり
Edge	あり
Firefox	あり
Opera	あり
ブラウザの対応（SP)
Chrome	あり
Safari	あり
Samsung Internet	あり

tbodyの使い方についてまとめ