【実務・中級編】tbody要素による本体のグループ化 – HTML実践ガイド

テーブルの「心臓部」を正しく仕分ける：tbody要素を使いこなすプロの流儀

フロントエンドの現場で「テーブルタグなんて、ただのデータの羅列でしょ？」と思っているなら、少し立ち止まって考えてみてください。

HTMLの構造化は、単なる見た目のためではありません。アクセシビリティ、保守性、そしてブラウザがDOMをどう解釈するかの「作法」そのものです。特に `tbody` 要素は、テーブルという巨大なデータの塊を整理し、ブラウザに対して「ここが我々の扱うメインコンテンツだ」と宣言するための重要なアンカーです。

今回は、意外と語られることの少ない `tbody` の真髄と、実務で差がつく「複数の `tbody` を使った構造化」について深掘りしていきましょう。

—

なぜ `tbody` を書く必要があるのか？

極端な話、ブラウザは `

` の中に `

` が直置きされていても、それなりに綺麗に描画してくれます。しかし、HTMLの仕様上、`thead` や `tbody` を省略した場合、ブラウザのパーサーは裏側で勝手にそれらを補完しています。

この「勝手な補完」に甘えると、CSSのセレクタ指定で思わぬ競合が起きたり、JavaScriptでDOM操作をする際に意図しないノードが混入したりと、後々泣きを見ることになります。プロとして、ブラウザの挙動をコントロール下におくこと。それが `tbody` を明示的に記述する最大の理由です。

複数の `tbody` を使うという選択肢

意外と知られていないのが、「`tbody` はひとつのテーブルに複数配置できる」 という仕様です。

これを使うと、例えば「売上データを月ごとに区切りたい」「商品カテゴリーごとにグループ分けしたい」といったケースで、論理的なセクション分けが可能になります。`thead` はあくまでテーブル全体のヘッダーとして固定し、その下のデータ群を `tbody` でブロック化する。これにより、CSSでグループごとの背景色分けや余白の調整が驚くほど直感的に行えるようになります。

実践：セマンティックかつ美しいテーブル構造

以下に、現場でそのまま使える、セマンティックで堅牢なテーブルコードのサンプルを提示します。グループごとに色を変えるといった運用も、この構造ならCSS一発で解決します。

項目	1月	2月
実店舗売上	1,200,000	1,350,000
ECサイト売上	800,000	950,000

フロントエンド・スペシャリストからのアドバイス

実務でこの構造を採用する際、一つだけ注意点があります。それは 「スクリーンリーダーへの配慮」 です。

複数の `tbody` を使う場合、それぞれのグループに意味があるなら、必要に応じて `tbody` に `aria-label` を付与したり、あるいは `tbody` の先頭行に「見出し用の行（`th` を含んだ `tr`）」を置くことを検討してください。

また、JavaScriptでテーブルを操作する際、`table.tBodies` というプロパティにアクセスすると、すべての `tbody` がコレクションとして取得できます。これを使えば、例えば「特定のグループだけを非表示にする」といったフィルタリング処理も、非常にエレガントに実装可能です。

まとめ：コードの「質」は構造の解像度で決まる

`tbody` をただのタグとして扱うのではなく、「データの論理的な塊」 として捉える。これだけで、あなたの書くHTMLは一気に洗練されます。

HTMLは単なるマークアップ言語ではなく、情報の設計図です。ブラウザという優秀なパートナーに、自分の意図を正しく伝えること。それができるエンジニアこそが、複雑なフロントエンドの世界で生き残る力を持つと私は信じています。

次はぜひ、あなたのプロジェクトの巨大なテーブルを、`tbody` で美しく切り分けてみてください。コードの可読性が、驚くほど変わるはずですよ。