--- title: ': テーブル本体要素' slug: Web/HTML/Element/tbody tags: - Element - HTML - HTML tabular data - Reference - Table Body - Table Contents - Tables - Web - tbody translation_of: Web/HTML/Element/tbody ---
{{HTMLRef}}

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

{{EmbedInteractiveExample("pages/tabbed/tbody.html","tabbed-taller")}}

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

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

属性

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

非推奨の属性

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

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

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

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

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

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

{{ htmlattrdef("char") }} {{deprecated_inline}}

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

{{ htmlattrdef("charoff") }} {{deprecated_inline}}
この属性は、 char 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。
{{ htmlattrdef("valign") }} {{deprecated_inline}}
この属性は、表本体の各行のセルにおける垂直方向のテキスト配置方法を指定します。以下の値が指定可能です。

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

使用上のメモ

例

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

基本的な例

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

HTML

表の HTML は下記のとおりです。なお、学生に関する情報を含む本体のセルはすべて、単一の <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;
}

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

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

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

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

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

結果

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

{{EmbedLiveSample("Basic_example", 650, 150)}}

複数の本体

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

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

結果

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

{{EmbedLiveSample("Multiple_bodies", 650, 250)}}

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> ブロックに配置され、最初の行に単一の {{HTMLElement("th")}} 要素に {{htmlattrxref("colspan", "th")}} 属性を付けて表の幅全体に広がるようにしています。このヘッダーが <tbody> 内の専攻の名前を示します。

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

CSS

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

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

仕様書

仕様書 状態 備考
{{SpecName('HTML WHATWG','tables.html#the-tbody-element','tbody 要素')}} {{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C','tabular-data.html#the-tbody-element','tbody 要素')}} {{Spec2('HTML5 W3C')}}

ブラウザーの互換性

{{Compat("html.elements.tbody")}}

関連情報