<tbody>テーブルの本体を定義する

<tbody>タグは、テーブル(表)内のデータを構成する行グループ(table body)を表します。 tbody要素は、<colgroup>や<thead>よりも後、<tfoot>よりも前に記述します。

またテーブルの作成の仕方によっては、<thead>(テーブルヘッダ)、<tbody>(テーブルボディ)、<tfoot>(テーブルフッタ)の3つに分類する事ができます。 これらの要素は省略する事もできますが、分類する場合は<thead>~</thead>、<tbody>~</tbody>、<tfoot>~</tfoot>で各行グループを囲みます。 これらはtable要素の子要素として、caption要素、colgroup要素より後に配置するようにしてください。

また<tbody>は、テーブル(表)の本体として、ヘッダでもフッタでもない部分を定義する要素として使用できます。 <tbody>を省略し、tr要素を直接記述する事もできますが、tbody要素を使用した方がセマンティクスを考えるうえで、より明確にテーブルのデータを表す機能を果たすでしょう。

なおtbody要素は1つのテーブル内に必要な数だけ配置することが可能です。

HTML5での変更点

HTML5のtbody要素では、align属性、valign属性、char属性、charoff属性が廃止されています。 またtbody内へのtr要素の配置が必須ではなくなりました。

書式

  • <tbody 属性="値">~</tbody> ……… テーブル(表)の本体を定義する

使用した時の例

<table border=1>
<caption>テーブル(表)のサンプル2</caption>
 <thead>
  <tr>
    <th>商品</th>
    <th>販売実績</th>
    <th>在庫数</th>
  </tr>
 </thead>
 <tbody>
  <tr>
    <td>リンゴ</td>
    <td>100</td>
    <td>100</td>
  </tr>
  <tr>
    <td>缶詰</td>
    <td>200</td>
    <td>10</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
    <th>合計</th>
      <td>300</td>
      <td>110</td>
  </tr>
 </tfoot>
</table>


<!-- 複数のtbodyを使用の例 -->

<table border=1>
<caption>テーブル(表)のサンプル</caption>
 <thead>
  <tr>
    <th>商品</th>
    <th>販売実績</th>
    <th>在庫数</th>
  </tr>
 </thead>
 <tbody>
  <tr>
     <th colspan="3">本社</th>
  </tr>
  <tr>
    <td>リンゴ</td>
    <td>100</td>
    <td>100</td>
  </tr>
  <tr>
    <td>缶詰</td>
    <td>200</td>
    <td>10</td>
  </tr>
 </tbody>

 <tbody>
  <tr>
     <th colspan="3">東京支店</th>
  </tr>
  <tr>
    <td>リンゴ</td>
    <td>100</td>
    <td>100</td>
  </tr>
  <tr>
    <td>缶詰</td>
    <td>200</td>
    <td>10</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
    <th>合計</th>
      <td>600</td>
      <td>220</td>
  </tr>
 </tfoot>
</table>

ブラウザ上の表示例

テーブル(表)のサンプル
商品 販売実績 在庫数
リンゴ 100 100
缶詰 200 10
合計 300 110
テーブル(表)のサンプル2
商品 販売実績 在庫数
本社
リンゴ 100 100
缶詰 200 10
東京支店
リンゴ 100 100
缶詰 200 10
合計 600 220

対応ブラウザなどのデータ

形式 <tbody>~</tbody> カテゴリ なし
親要素 table 子要素 tr,script,template
開始タグ 省略可能 終了タグ 省略可能
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~