HTML / 要素

tbody要素の使い方

tbody要素は、表の本体にある行をまとめます。表に見出しや合計の行があるとき、どの行がデータの部分かをHTMLで表せます。

先に結論

表のデータ行をまとめる場所にはtbodyを使います。行はtrで作り、その中に見出しセルのthやデータセルのtdを置きます。

tbodyは行を意味の上でまとめる要素です。余白や色など、見た目を変える目的にはCSSを使います。

小さな例

<table>
  <caption>くだものの在庫</caption>
  <thead>
    <tr><th scope="col">品目</th><th scope="col">個数</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">りんご</th><td>3個</td></tr>
    <tr><th scope="row">なし</th><td>2個</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">合計</th><td>5個</td></tr>
  </tfoot>
</table>

くだものの在庫
品目	個数
りんご	3個
なし	2個
合計	5個

theadは列の見出し、tbodyは表の本体、tfootは合計などのまとめを置く部分です。ブラウザーでは、これらの中に書いた行も1つの表として表示されます。

行を複数のまとまりに分ける

本体の行を種類や月ごとに分けたい場合は、tbodyを複数置けます。たとえば、果物の行を1つのtbodyに、野菜の行を別のtbodyにまとめられます。

このようなまとまりを仕様では「行グループ」と呼びます。rowspan="0"を使ったセルは、同じ行グループの最後まで広がります。別のtbodyへは広がりません。

HTMLに書く行と、ブラウザーが作る行

tableのすぐ下にtrを書いても、ブラウザーは読み込んだHTMLからDOM（JavaScriptが見られるページの構造）を作るときに、間へtbodyを補います。ページのソースとDOMの親子関係が違うことがあります。

<table>
  <tr><td>りんご</td></tr>
</table>

// ブラウザーが作るDOMの親子関係
table → tbody → tr → td

新しくHTMLを書くときは、どの行をまとめるのか分かるようにtbodyを明示しましょう。ブラウザーによる補完に頼らずに済みます。

よくある間違い

tdやthをtbodyのすぐ下に置く。セルはtrの中に置きます。
表の見た目を整えるためだけにtbodyを分ける。意味のある行のまとまりを表すときに分けます。
tbodyを画面に表示される見出しだと思う。名前や説明が必要なときは、表のcaptionや見出しセルを使います。