<tbody>: テーブル本体要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<tbody> は HTML の要素で、表の一連の行（<tr> 要素）を内包し、その部分が表（<table>）の本体部分を構成することを表します。

試してみましょう

<tbody> 要素は、親戚である <thead> や <tfoot> と共に、画面やプリンターでの描画で利用できる有用な意味的情報を提供します。

コンテンツカテゴリー なし
許可されている内容 0 個以上の <tr> 要素
タグの省略 <tbody> 要素の開始タグは、<tbody> 要素の中の最初のものが <tr> 要素であり、その要素の直前に終了タグが省略された <tbody> 要素、<thead> 要素、<tfoot> 要素がない場合、省略できます。（空要素の場合は省略できません。） <tbody> 要素の終了タグは、<tbody> 要素の直後に <tbody> 要素または <tfoot> 要素が続く場合、または親要素にまだコンテンツがない場合に省略できます。
許可されている親要素 <table> 要素。 <tbody> 要素は <caption>, <colgroup>, <thead> の各要素の後に配置することができます。
暗黙の ARIA ロール rowgroup
許可されている ARIA ロール すべて
DOM インターフェイス HTMLTableSectionElement

属性

この要素にはグローバル属性があります。

非推奨の属性

align

この列挙属性は各セルの中身について、水平方向の配置方法を制御します。以下の値が指定可能です。

  • left: 中身をセルの左側に揃えます。
  • center: 中身をセル内で中央揃えにします。
  • right: 中身をセルの右側に揃えます。
  • justify: 中身がセル内で両端揃えになるように、テキストコンテンツに空白を挿入します。
  • char: テキストコンテンツを特定の文字に対して、最小のオフセットで揃えます。特定の文字は char 属性および charoff 属性で定義します。

この属性を設定しない場合は、値が left であるとみなされます。

この属性は非推奨であるため、代わりに CSS の text-align プロパティを使用してください。

メモ: text-align プロパティには、 align="char" と同等の機能がどのブラウザーでも実装されていません。 text-align のブラウザーの互換性の節 で <string> の値を確認してください。

bgcolor

表の背景色です。 6 桁の 16 進 RGB コードの先頭に '#' をつけたものです。定義済みの色キーワードのうちの一つを利用することもできます。

この属性は非推奨であり、代わりに CSS の background-color プロパティを使用してください。

char

この属性は、列内のセルで揃える文字を設定します。よくある値としては、数値や金額を揃えようとするときのピリオド (.) があります。align 属性を char に設定していない場合は、この属性は無視されます。

charoff

この属性は、 char 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。

valign

この属性は、表本体の各行のセルにおける垂直方向のテキスト配置方法を指定します。以下の値が指定可能です。

  • baseline: テキストを可能な限りセルの下端に近づけますが、下端ではなく文字のベースラインに揃えます。文字がサイズ全体に渡る場合は、 bottom と同じ効果になります。
  • bottom: テキストを可能な限りセルの下端に近づけて配置します。
  • middle: テキストをセル内の中央に置きます。
  • top: テキストを可能な限りセルの上端に近づけて配置します。

この属性は非推奨であり、代わりに CSS の vertical-align プロパティを使用してください。

使用上のメモ

  • 表に (意味的なヘッダー行を識別するために) <thead> ブロックがある場合、 <tbody> ブロックはその後に置く必要があります。
  • <tbody> を使用する場合、表の行 (<tr> 要素) を <table> の直接の子として置くことはできませんが、 <tbody> の中には置くことができます。 <tbody> を使用する場合は、ヘッダーでもフッターでもない行をすべてその中に入れる必要があります。
  • 文書を印刷するとき、複数のページにまたがる表では、 <thead> および <tfoot> 要素が各ページで共通の（またはよく似た）情報を指定するのに対し、 <tbody> 要素の中身は一般に、ページごとに異なります。
  • 表が (ウィンドウのような) 画面に表示される場合で、表全体を表示するのに十分な大きさがないとき、ユーザーエージェントは <thead>, <tbody>, <tfoot>, <caption> ブロックを親である表から独立してユーザーがスクロールさせることができるようにするかもしれません。
  • 連続していれば、1 つの表の中に複数の <tbody> を使用することができます。これにより必要に応じて、巨大な表の行を複数のセクションに分割し、個別に整形することができます。

例

以下の例では、 <tbody> 要素の使用例を示します。このタグが使われているその他の例は、 <table> の例を参照してください。

基本的な例

これは比較的単純な例で、学生のグループについて情報を一覧する表を <thead> および <tbody> で作成し、本体内に行番号を表示します。

HTML

表の HTML は下記のとおりです。なお、学生に関する情報を含む本体のセルはすべて、単一の <tbody> 要素の中に入っています。

html
<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Major</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>コンピューター科学</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>ロシア文学</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>天体物理学</td>
    </tr>
  </tbody>
</table>

CSS

表を整形する CSS を次に示します。

css
table {
  border: 2px solid #555;
  border-collapse: collapse;
  font:
    16px "Lucida Grande",
    "Helvetica",
    "Arial",
    sans-serif;
}

まず、表の全体的なスタイル属性を設定し、表の外枠の太さ、スタイル、色を設定し、border-collapse を使用して、セル間に間隔と独自の境界線を置くのではなく、境界線が隣接セル間で共有されるようにします。font は、表の初期フォントを設定するために使用されます。

css
th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

それから、すべてのデータセルだけでなく、<td> および <th> のセルの間で共有されるスタイルを含む、テーブル内の大部分のセルに設定されるスタイルです。セルに対して、1 ピクセルの太さで薄い灰色の輪郭、パディングの調整、すべてのセルを text-align を使用して左揃えにします。

css
thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

最後に、<thead> ブロックに含まれるヘッダーのセルには追加の整形を行います。より暗い background-color にし、大きなフォントサイズにして、下の境界線に他のセルの境界線よりも太く暗い線を引きます。

結果

結果の表は次のようになります。

複数の本体

複数の <tbody> 要素を使用することで、表内の複数のセクションを作成することができます。それぞれに独自のヘッダー行がある場合もありますが、<thead> は表 1 つあたり 1 つしか置けません！。そのため、それぞれの <tbody> にヘッダーを作成するには、<th> 要素で埋められた <tr> を使用する必要があります。どのようにするかを見てみましょう。

前回の例から、リストに数人の学生を追加し、各行に学生の専攻を書く代わりに、学生を選考でグループ化し、ヘッダー行で選考を表すように更新しましょう。

結果

最初に、結果の表を見て、作ろうとしているものを知っておきましょう。

HTML

修正した HTML はこのようになります。

html
<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2">コンピューター科学</th>
    </tr>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
    </tr>
    <tr>
      <td>4077830</td>
      <td>Pierce, Benjamin</td>
    </tr>
    <tr>
      <td>5151701</td>
      <td>Kirk, James</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2">ロシア文学</th>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2">天体物理学</th>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
    </tr>
    <tr>
      <td>8892377</td>
      <td>Toyota, Hiroko</td>
    </tr>
  </tbody>
</table>

なお、各専攻は個別の <tbody> ブロックに配置され、最初の行に単一の <th> 要素に colspan 属性を付けて表の幅全体に広がるようにしています。このヘッダーが <tbody> 内の専攻の名前を示します。

そして、それぞれの専攻の <tbody> で残りの行は 2 つのセルから成り、最初の行は学生番号で、2 つ目の行は名前です。

CSS

CSS のほとんどは変更ありません。しかし、（<thead> に含まれるものではなく） <tbody> に直接含まれるヘッダーセルに対して、若干のスタイルを追加しましょう。これはそれぞれの専攻を示すヘッダーに使われます。

css
tbody > tr > th {
  background-color: #dde;
  border-bottom: 1.5px solid #bbb;
  font-weight: normal;
}

仕様書

Specification
HTML Standard
# the-tbody-element

ブラウザーの互換性

BCD tables only load in the browser

関連情報

  • <tbody> 要素のスタイル設定に役立つであろう CSS プロパティと擬似クラス:

    • :nth-child 擬似クラス: 列内のセルの配置を設定するため
    • text-align プロパティ: すべてのセル内コンテンツを '.' などの同一文字で揃えるための