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

テーブルの「背骨」を作る：`

`で表のデータを整理整頓しよう！

HTMLを学び始めると、避けては通れないのが「テーブル（表）」ですよね。
「`

`の中に`

`を入れて、その中に`

`（ティーボディ）要素についてお話しします。

これを覚えると、ただ表が見やすくなるだけでなく、ブラウザやスクリーンリーダー（読み上げソフト）にとっても「ここがメインの内容ですよ！」と親切に教えてあげられる、一歩上のエンジニアになれますよ。

—

1. ` `って何者？：表の「中身」を包むギフトボックス

`

`を一言でいうと、「表のメインディッシュをひとまとめにするグループ」です。

想像してみてください。あなたは今、豪華なコース料理を提供しています。

• `

`（テーブルヘッド）： 前菜やメニュー表（見出し）

`

`（テーブルボディ）： メイン料理（データ本体）

`

`（テーブルフット）： 最後のデザートや合計金額（フッター）

このように役割を分けておくと、後から「あ、メイン料理の盛り付けを変えたいな」と思ったとき、メインの部分だけをCSSでサッと調整できるんです。

なぜわざわざグループ化するの？

HTMLを書き始めたばかりの頃は、「`

`なんて書かなくても表は表示されるし、面倒じゃない？」と思うかもしれません。確かに、ブラウザは気を利かせて「ここに`

`があるはずだね」と自動で補完してくれます。

ですが、自分で明示的に書くことには大きなメリットがあります。
1. CSSの適用がラクになる： 「メインのデータ部分だけ背景色を変えたい」といった指定が、クラス名を付けなくても `tbody tr { … }` と書くだけで完了します。
2. アクセシビリティの向上： 目が不自由な方が使う読み上げソフトに「ここからがデータの本体ですよ」という構造を正しく伝えることができます。

—

2. 実践！` `を使った基本のコード

では、実際に簡単な「お買い物リスト」のコードを見てみましょう。

`を並べて……」と書いているうちに、だんだんコードが長くなってきて、「あれ、ここって何のデータだっけ？」と迷子になってしまった経験はありませんか？ 今回は、そんな複雑になりがちな表を、まるで「本」のようにスッキリ整理してくれる`

商品名	価格
りんご	100円
みかん	50円

どうでしょう？ `

`で囲うだけで、「ここからが本番のデータなんだな」と視覚的にも構造的にもスッキリしますよね。

—

3. 「えっ、tbodyを複数使ってもいいの？」という疑問

ここからが少し面白いポイントです。実は、`

`は一つの表の中に複数並べてもOKなんです。

「え、そんなことして大丈夫？」と不安になるかもしれませんが、これも身近な例で考えると簡単です。例えば「スーパーのレシート」を想像してください。

• 1つ目の`
  `： 野菜コーナーの品々
• 2つ目の`
  `： お菓子コーナーの品々

このように、「カテゴリごとにグループを分けたい」という時に、`

`を複数使うと非常に便利なんです。

キャベツ	200円
レタス	150円
チョコレート	120円
ポテトチップス	100円

こうすることで、「野菜グループだけ背景を緑色にしたい」といったCSSの調整が、HTML構造を汚さずに自由自在にできるようになります。

—

まとめ：あなたのコードを「優しいコード」に

HTMLのタグは、単なる「表示のための命令」ではありません。「このデータはどういう関係性なのか」をブラウザや読み手に伝えるための「道しるべ」です。

• `
  `は、表のメインデータを守る大切な枠組み。
• 面倒くさがらずに書くことで、CSSが書きやすくなり、誰にとっても読みやすい表になる。
• グループ分けしたい時は、複数使ってOK！

最初は「タグが増えて面倒だな」と感じることもあるかもしれませんが、数ヶ月後の自分や、あなたのサイトを訪れるユーザーにとって、この小さな気遣いが大きな「分かりやすさ」に繋がります。

大丈夫、少しずつ構造を意識するだけで、あなたの書くHTMLは驚くほどプロフェッショナルなものに変わっていきますよ。まずは今日の練習で、`

`という箱を一つ、使ってみてくださいね！