HTML <tbody> タグ

定義と使用方法

<tbody> タグは、HTMLテーブル内の本文内容をグループ化するために使用されます。

<tbody> タグと <thead> および <tfoot> 要素を組み合わせて使用して、テーブルの各部分（本文、ヘッダー、フッター）を指定します。

ブラウザはこれらの要素を使用して、テーブルの本文をスクロールする際にヘッダーとフッターを独立して表示することができます。また、複数のページにわたる大きなテーブルを印刷する際には、これらの要素を使用して、ページのトップとボトムにテーブルのヘッダーとフッターを印刷することができます。

注意：<tbody> 要素内には、少なくとも1つ以上の <tr>タグ。

<tbody> タグが以下の文脈で使用されなければなりません： <table> 要素のサブ要素は、どこでも <caption>、<colgroup> および <thead> 要素の後ろに。

ヒント：デフォルトでは、<thead>、<tbody>、および <tfoot> 要素はテーブルのレイアウトに影響を与えません。しかし、これらの要素のスタイルを設定することができます（以下の例を参照してください）！

インスタンス

例1

<thead>、<tbody>、および <tfoot> 要素を含む HTML テーブル：

<table>
  <thead>
    <tr>
      <th>月</th>
      <th>貯蓄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一月</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>二月</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合計</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

自分で試してみる

例2

CSSを使用して <thead>、<tbody>、および <tfoot> のスタイルを設定：

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>月</th>
      <th>貯蓄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一月</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>二月</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合計</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

自分で試してみる

例3

どのように揃えるか <tbody> の内容（CSSを使用）：

<table style="width:100%">
  <thead>
    <tr>
      <th>月</th>
      <th>貯蓄</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>一月</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>二月</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

自分で試してみる

例4

垂直に揃える方法 <tbody> の内容（CSSを使用）：

<table style="width:50%;">
  <tr>
    <th>月</th>
    <th>貯蓄</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td>一月</td>
      <td>￥3400</td>
    </tr>
    <tr style="height:100px">
      <td>二月</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

自分で試してみる

グローバル属性

<tbody> タグは以下のイベント属性をサポートしています HTMLでのグローバル属性。

イベント属性

<tbody> タグは以下のイベント属性をサポートしています HTMLでのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値を使用して表示します <tbody> 要素：

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート