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

<tbody> 要素は、親戚である <thead><tfoot> と共に有用な意味的情報を提供し、画面への表示や印刷ばかりでなく、アクセシビリティ目的にも利用できます。

コンテンツカテゴリ なし
許可されている内容 0 個以上の <tr> 要素
タグの省略 <table> 要素をグラフィカルに表示するにあたり、<tbody> 要素は必須ではない子要素です。ただし、<table> 要素の子要素として <tr> 要素が存在する場合は tbody を配置してはいけません。
許可されている親要素 <table> 要素。<tbody> 要素は <caption>, <colgroup>, <thead>, <tfoot> の各要素の後に配置することができます。
許可されている ARIA ロール すべて
DOM インターフェイス HTMLTableSectionElement

属性

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

廃止された属性

align HTML 4.01 では , HTML5 では
この列挙属性は各セルの中身について、水平方向の配置方法を制御します。以下の値を指定可能です。
  • left: 中身をセルの左側に揃えます。
  • center: 中身をセル内で中央揃えにします。
  • right: 中身をセルの右側に揃えます。
  • justify: 中身がセル内で両端揃えになるように、テキストコンテンツに空白を挿入します。
  • char: テキストコンテンツを特定の文字に対して、最小のオフセットで揃えます。特定の文字は char 属性および charoff 属性で定義します。

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

メモ: この属性は最新の標準仕様で廃止された (サポートされていない) ため、使用しないでください。
  • left, center, right, justify の値と同様の効果を得るには、 CSS の text-align プロパティを使用してください。
  • CSS3 で char の値と同様の効果を得るには、 text-align プロパティの値 char を使用できます 未実装
bgcolor
この属性は、列の各セルの背景色を定義します。値は sRGB で定義された6桁の16進数値のいずれかで、先頭に '#' を付加します。16個のあらかじめ定義された色文字列から、1つを使用することができます。
  black = "#000000"   green = "#008000"
  silver = "#C0C0C0"   lime = "#00FF00"
  gray = "#808080"   olive = "#808000"
  white = "#FFFFFF"   yellow = "#FFFF00"
  maroon = "#800000"   navy = "#000080"
  red = "#FF0000"   blue = "#0000FF"
  purple = "#800080"   teal = "#008080"
  fuchsia = "#FF00FF"   aqua = "#00FFFF"
使用上のメモ: この属性は標準外であり Internet Explorer の一部バージョンしか実装していませんので、使用しないでください。 <tbody> 要素は CSS を使用してスタイル付けをしてください。 bgcolor 属性と同様の効果を与えるには、 CSSbackground-color プロパティを適切な <td> 又は <th> 要素で使用してください。
char HTML 4.01 では , HTML5 では
この属性は、列内のセルで揃える文字を設定します。典型的な値に、数値や金額を揃えようとするときのピリオド (.) があります。align 属性を char に設定していない場合は、この属性を無視します。
メモ: この属性は最新の標準仕様で廃止された (サポートされていない) ため、使用しないでください。CSS3 で char と同じ効果を得るには、 text-align プロパティの値として char 属性で使用する文字のセットを使用することができます。未実装
charoff HTML 4.01 では , HTML5 では
この属性は、 char 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。
メモ: この属性は最新の標準仕様で廃止された (サポートされていない) ため、使用しないでください。
valign HTML 4.01 では , HTML5 では
この属性は、表本体の各行のセルにおける垂直方向のテキスト配置方法を指定します。以下の値が指定可能です:
  • baseline: テキストを可能な限りセルの下端に近づけますが、下端ではなく文字のベースラインに揃えます。文字がサイズ全体に渡る場合は、 bottom と同じ効果になります。
  • bottom: テキストを可能な限りセルの下端に近づけて配置します。
  • middle: テキストをセル内の中央に置きます。
  • top: テキストを可能な限りセルの上端に近づけて配置します。
メモ: この属性は最新の標準仕様で廃止された (そして対応していない) ため、使用しないでください。代わりに CSS の vertical-align プロパティを使用してください。

使用上のメモ

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

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

基本的な例

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

HTML

表の CSS はここに表示されます。なお、学生に関する情報を含む本体のセルはすべて、単一の <tbody> 要素の中に入っています。

<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 を次に示します。

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

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

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

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

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 はこのようになります。

<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> に直接含まれるヘッダーセルに対して、若干のスタイルを追加しましょう。これはそれぞれの専攻を示すヘッダーに使われます。

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

仕様書

仕様書 状態 備考
HTML Living Standard
tbody 要素 の定義
現行の標準  
HTML5
tbody 要素 の定義
勧告  

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1 あり1 あり あり あり
align ? あり なし1 あり ? ?
bgcolor ? なし なし あり ? ?
char ? あり なし2 あり ? ?
charoff ? あり なし2 あり ? ?
valign ? あり なし1 あり ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり
align ? ? あり なし1 ? ? ?
bgcolor ? ? なし なし ? ? ?
char ? ? あり なし2 ? ? ?
charoff ? ? あり なし2 ? ? ?
valign ? ? あり なし1 ? ? ?

1. See bug 915

2. See bug 2212

関連情報

  • 他の表関連 HTML 要素: <caption>, <col>, <colgroup>, <table>, <td>, <tfoot>, <th>, <thead>, <tr>
  • <tbody> 要素のスタイル設定に役立つであろう CSS プロパティと擬似クラス:
    • :nth-child 擬似クラス: 列内のセルの配置を設定するため
    • text-align プロパティ: すべてのセル内コンテンツを '.' などの同一文字で揃えるための

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, hashedhyphen
最終更新者: mfuji09,