【HTML Living Standard】tbody要素の使い方
tbody要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
tbodyオブジェクトは、HTMLのテーブル（表）の本体部分を表すオブジェクトです。これは、<table>要素内で使用され、表のヘッダーである<thead>要素やフッターである<tfoot>要素とは区別された、実際のデータを格納する主要な部分を定義します。tbodyを使用することで、テーブル内の複数の行（<tr>要素）を論理的なグループとしてまとめることができます。
このオブジェクトの主な目的は、テーブルの構造をセマンティックに明確にすることにあります。Webブラウザや検索エンジン、スクリーンリーダーなどの補助技術は、tbodyの存在によって、テーブルのどの部分が主要なデータであるかを正確に理解し、適切に処理できます。例えば、長いテーブルで<thead>と<tfoot>を固定しつつ、tbody部分だけをスクロールさせる、といった表示制御を容易にします。また、印刷時に<thead>や<tfoot>を各ページに繰り返し表示させながら、<tbody>の内容をページ分割する、といった高度なレイアウトを実現する際にも重要です。
tbodyオブジェクトは、1つ以上の<tr>要素を子要素として持ち、その<tr>要素の中にセル（<td>または<th>）が配置されます。<table>要素の直下には、通常、<caption>、colgroup、<thead>、<tbody>、<tfoot>の順で配置されますが、tbodyはテーブル本体の中核をなす部分として、テーブルデータの構造化に不可欠な要素です。
構文(syntax)
1<table> 2 <tbody> 3 <tr> 4 <td>セルデータ1</td> 5 <td>セルデータ2</td> 6 </tr> 7 <tr> 8 <td>セルデータ3</td> 9 <td>セルデータ4</td> 10 </tr> 11 </tbody> 12</table>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
html tbodyとはテーブル本体を定義する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>tbody要素のサンプル</title> 7 <style> 8 table { 9 width: 80%; 10 border-collapse: collapse; 11 margin: 20px auto; 12 } 13 th, td { 14 border: 1px solid #ddd; 15 padding: 8px; 16 text-align: left; 17 } 18 th { 19 background-color: #f2f2f2; 20 } 21 tfoot td { 22 font-weight: bold; 23 background-color: #eee; 24 } 25 </style> 26</head> 27<body> 28 29 <h1>商品リスト</h1> 30 31 <table> 32 <caption>商品の在庫状況</caption> 33 <thead> 34 <tr> 35 <th>商品ID</th> 36 <th>商品名</th> 37 <th>価格</th> 38 <th>在庫数</th> 39 </tr> 40 </thead> 41 <!-- tbody要素は、テーブルの本体部分をグループ化します。 42 <thead>（ヘッダー）と<tfoot>（フッター）とは別に、 43 テーブルの主要なデータ行を含みます。 --> 44 <tbody> 45 <tr> 46 <td>P001</td> 47 <td>ノートPC</td> 48 <td>120,000円</td> 49 <td>15</td> 50 </tr> 51 <tr> 52 <td>P002</td> 53 <td>ワイヤレスマウス</td> 54 <td>3,500円</td> 55 <td>50</td> 56 </tr> 57 <tr> 58 <td>P003</td> 59 <td>USBキーボード</td> 60 <td>5,800円</td> 61 <td>30</td> 62 </tr> 63 </tbody> 64 <tfoot> 65 <tr> 66 <td colspan="3">合計商品数</td> 67 <td>3種類</td> 68 </tr> 69 </tfoot> 70 </table> 71 72</body> 73</html>
HTMLのtbody要素は、<table>（テーブル）内で表の「本体」にあたる部分をグループ化するために使用されます。この要素は、テーブルの主要なデータ行（<tr>要素）を含み、表の構造を明確にする役割を担っています。
テーブルは通常、<thead>（ヘッダー部分）や<tfoot>（フッター部分）といった要素で構成されますが、tbodyはそれらとは別に、中心となる情報が並ぶ部分を定義します。例えば、商品リストのような表では、theadに「商品ID」「商品名」といった見出しが入り、tfootに「合計商品数」のような集計情報が入るのに対し、tbodyには個々の商品の詳細データが並びます。
これにより、ブラウザやスクリーンリーダーなどの支援技術がテーブルの論理的な構造をより正確に理解できるようになり、アクセシビリティの向上にも繋がります。また、CSSを使ってテーブルのヘッダー、本体、フッターそれぞれに異なるスタイルを適用しやすくなるため、デザイン面でも柔軟性が高まります。
ご提示のサンプルコードでは、「ノートPC」「ワイヤレスマウス」「USBキーボード」といった具体的な商品データが<tbody>内に配置されており、テーブルの本体部分として明確に区別されています。tbody要素には、特定の「引数」や「戻り値」という概念はありません。これは、HTMLがドキュメントの構造を定義するマークアップ言語であるためです。
<tbody>要素は、HTMLテーブルの主要なデータ行をグループ化するために使用されます。<thead>（テーブルヘッダー）や<tfoot>（テーブルフッター）と併用することで、テーブルの構造が意味的に整理され、コードの可読性やメンテナンス性が向上します。
初心者が注意すべき点として、<tbody>の直接の子要素には必ず<tr>（テーブル行）を配置し、その中に<td>（データセル）や<th>（ヘッダーセル）を記述してください。<tbody>内に直接<td>や<th>を記述することはできません。
また、<tbody>要素は省略可能ですが、アクセシビリティの向上やCSSによるスタイリング、JavaScriptでの動的なテーブル操作を容易にするためにも、積極的に利用することが推奨されます。これにより、テーブルの各セクションを明確に識別し、独立して操作できるようになります。
HTML tbodyタグでテーブル本体を構造化する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>tbodyタグのサンプル</title> 7 <style> 8 /* 見やすいように簡単なスタイルを追加 */ 9 table { 10 width: 80%; 11 border-collapse: collapse; 12 margin: 20px auto; 13 } 14 th, td { 15 border: 1px solid #ddd; 16 padding: 8px; 17 text-align: left; 18 } 19 th { 20 background-color: #f2f2f2; 21 } 22 caption { 23 font-size: 1.2em; 24 margin-bottom: 10px; 25 } 26 </style> 27</head> 28<body> 29 <!-- 30 <table>要素内でtbodyタグはテーブルの本体（データ行）を定義します。 31 通常、<thead>（ヘッダー行）や<tfoot>（フッター行）と組み合わせて使用され、 32 テーブルの内容を構造化するのに役立ちます。 33 --> 34 <table> 35 <!-- テーブルのキャプション（表題） --> 36 <caption>月間売上レポート</caption> 37 <thead> 38 <!-- テーブルのヘッダー部分 --> 39 <tr> 40 <th>商品名</th> 41 <th>数量</th> 42 <th>単価</th> 43 <th>合計金額</th> 44 </tr> 45 </thead> 46 <tbody> 47 <!-- 48 テーブルの本体部分（実際のデータ行）。 49 複数の<tr>要素（テーブル行）を含めることができます。 50 --> 51 <tr> 52 <td>ペン</td> 53 <td>100</td> 54 <td>50円</td> 55 <td>5,000円</td> 56 </tr> 57 <tr> 58 <td>ノート</td> 59 <td>50</td> 60 <td>120円</td> 61 <td>6,000円</td> 62 </tr> 63 <tr> 64 <td>消しゴム</td> 65 <td>75</td> 66 <td>80円</td> 67 <td>6,000円</td> 68 </tr> 69 </tbody> 70 <!-- <tfoot>（テーブルのフッター部分）も追加できますが、今回はtbodyの理解を優先し省略します。 --> 71 </table> 72</body> 73</html>
HTMLの<tbody>タグは、ウェブページでデータの一覧表示によく使われる「表（テーブル）」を作成する際に、その「本体」、つまりメインとなるデータ部分を定義するために使用されます。これは<table>要素の中に記述され、表の実際のデータ行をグループ化する重要な役割を持ちます。
このタグを使うことで、テーブルの見た目だけでなく、その構造を明確にすることができます。具体的には、表の項目名（ヘッダー）を示す<thead>タグや、合計値などを表示するフッター部分の<tfoot>タグと組み合わせることで、テーブルを論理的に「ヘッダー」「本体」「フッター」と分割し、管理しやすくなります。<tbody>タグの内部には、各データ行を表す複数の<tr>要素（テーブル行）が含まれ、その中に具体的なデータセルである<td>要素を配置します。
サンプルコードでは、「月間売上レポート」のテーブルにおいて、「ペン」「ノート」「消しゴム」といった各商品の売上データが<tbody>内にまとめられています。このように、<tbody>を使うことで、ヘッダー部分とデータ本体部分が明確に区別され、可読性が向上するだけでなく、JavaScriptでのデータ操作やCSSでのスタイル適用が構造的に行いやすくなります。<tbody>タグ自体に特別な引数や戻り値はなく、テーブルの構造化を目的とした要素です。
<tbody>タグは、HTMLテーブルの本体部分、すなわち実際のデータ行（<tr>要素）をグループ化するために使われる重要な要素です。このタグは必ず<table>要素の直下に配置し、<thead>（テーブルヘッダー）や<tfoot>（テーブルフッター）タグと組み合わせることで、テーブルの構造をより明確に定義します。初心者が間違いやすい点として、<tr>要素を直接<table>の子要素として記述せず、必ず<thead>、<tbody>、<tfoot>のいずれかの内部に配置するようにしてください。
<tbody>は省略してもブラウザが自動補完することがありますが、明示的に記述することでコードの可読性が向上し、テーブルの意味的な構造が明確になります。これにより、CSSによるスタイリングやJavaScriptでのデータ操作が容易になり、ウェブページのアクセシビリティも向上します。テーブルのデータ部分を正しく構造化することは、保守しやすく、より堅牢なHTMLを作成する上で不可欠なポイントです。