HTML5 & CSS3 リファレンス - <tbody> （テーブル本体部）

<tbody> - テーブル本体部

■ 概要

項　　目	説　　明
記述形式	<tbody>～</tbody>
対応ブラウザー	H4+ / e4+ / N6+ / Fx1+ / Op6+ / Ch1+ / Sa1+
種　　類（カテゴリー）	なし
置ける場所	table要素の子要素（caption要素，colgroup要素，thead要素の後，ただし，この table要素の子要素に tr要素がないとき）
内包要素（コンテンツ・モデル）	０個以上の tr要素（コンテンツ・モデル: 直接指定）

■ 解説

<tbody> は Table BODY の略です。　thead要素，tbody要素，tfoot要素は，<table>～</table> 間の行（tr要素）を，ヘッダ，本体，フッタという３段構造の各グループに分割する要素です。

例えば，表のヘッダ部分にある項目数が多くて複数の tr要素によって記入する場合や，数表の最後に小計と総計を並べて複数の tr要素によって記入する場合には，それぞれ，thead要素や tfoot要素でこれらの tr要素のグループの表全体における役割を明確にすることが出来ます。

HTML4.01 までは，tfoot要素は tbody要素よりも前に記述する必要がありました。　しかし，HTML5 では，tbody要素の後に記述することも認められています。

なお，HTML5 では，要素の配置やレイアウトの目的のために表（テーブル）を使用することはできません。　レイアウトには，CSS を使いましょう。

■ 属性

種　　類	名　　称
【固有属性】	なし
【グローバル属性】	accesskey，class，contenteditable ， dir， hidden ，id， lang，spellcheck ，style， tabindex，title，translate
【ARIA role属性】で指定可能な値（役割）	任意の値（役割）
【ARIA aria-* 属性】で指定可能なもの	ARIA グローバル状態とプロパティ，指定可能な役割の任意の状態とプロパティ

■ CSSプロパティ

種　　類	名　　称
【よく使うもの】

■ 使用例

HTMLソース
HTML <body> ～ </body>	<table border> <caption>【表の例】</caption> <colgroup span=1 style="width:100px; text-align: center; background-color: #CCCCCC;"> <colgroup span=3 style="width:60px; text-align: right;"> <thead style="background-color: #CCCCCC;"> <tr> <th rowspan=2>品名</th><th colspan=3>見積金額</th> </tr> <tr> <th>単価</th><th>数量</th><th>価格</th> </tr> </thead> <tfoot> <tr> <th>小計</th><td><br></td><td><br></td><td>5,600</td> </tr> <tr> <th>総計</th><td><br></td><td><br></td><td>5,600</td> </tr> </tfoot> <tbody> <tr> <td>ぬいぐるみ</td><td>3,200</td><td>1</td><td>3,200</td> </tr> <tr> <td>チョコレート</td><td>800</td><td>3</td><td>2,400</td> </tr> </tbody> </table>

HTMLソース

HTML
<body> ～ </body>

<table border>
  <caption>【表の例】</caption>
  <colgroup span=1 style="width:100px; text-align: center;
                          background-color: #CCCCCC;">
  <colgroup span=3 style="width:60px; text-align: right;">
  <thead style="background-color: #CCCCCC;">
    <tr>
      <th rowspan=2>品名</th><th colspan=3>見積金額</th>
    </tr>
    <tr>
      <th>単価</th><th>数量</th><th>価格</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>小計</th><td><br></td><td><br></td><td>5,600</td>
    </tr>
    <tr>
      <th>総計</th><td><br></td><td><br></td><td>5,600</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>ぬいぐるみ</td><td>3,200</td><td>1</td><td>3,200</td>
    </tr>
    <tr>
      <td>チョコレート</td><td>800</td><td>3</td><td>2,400</td>
    </tr>
  </tbody>
</table>

ブラウザー表示例