<tbody>: TBODY 要素

最終更新:2026-10-13

<tbody>TBODY 要素

データ行(tr)をまとめるテーブル本体です。グループ化のため 1 つのテーブルに複数の tbody を置けます。

カテゴリテーブル
コンテンツモデルフローコンテンツ
許可される親要素フローコンテンツを受け入れる要素
閉じタグ必要 </tbody> タグ
ステータス標準

📝 構文

<tbody>
  <tr><td>...</td></tr>
</tbody>

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認:

🌐 ブラウザサポート

ブラウザ ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
<tbody> ✓ v1 ✓ v12 ✓ v1 ✓ v1 ✓ v1
すべての主要ブラウザでサポート
ヒント: tbody は省略してもブラウザーが暗黙的に挿入します。明示的に書くとスクリプト処理がしやすくなります。

❓ よくある質問

Qtbody は複数持てますか?
A持てます。これは正当で役に立つ構造です。データ行のグループごとに <tbody> を分け、CSS でグループごとに背景色を変えたり、tbody:nth-of-type() でグループごとの縞模様を作ったりできます。各 tbody は DOM 上で独立した行グループです。
QDOM でいつも tbody が見えるのはなぜですか?
AHTML のパーサーは table の行を必ず行グループに属させると決めているため、ソースで <tbody> を省略してもブラウザが暗黙のものを補います。これが「JS で table の子要素を見ると、tr ではなく tbody がある」理由です。DOM 構造とソースの書き方は完全には一致しません。
Qtbody、thead、tfoot の順序は重要ですか?
Aソースは thead → tbody → tfoot の順で書くのが推奨です。かつては tfoot を先に書くこと(ストリーミング描画で表尾を先に得るため)が許されていましたが、現代の標準は視覚順に従います。DOM ではブラウザが正しいグループに配置しますが、順序を間違えたソースをパーサーに直させるより、自分で正しく書く方が確実です。
今後さらにケーススタディを追加予定です。

📚 関連チュートリアル

Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%