tbody とは？初心者でも安心の HTML 表の基本解説共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

tbody とは何か

HTML の表を作るときに登場する要素の一つが tbody です。tbody は表のデータの本体をまとめる部分として役割があります。見出しを集める thead や表の最後をまとめる tfoot とは別の役割を持ち、表の中のデータ行をひとまとめにするための区切りとして使われます。初心者の人はこれを知るだけで表の構造が見えやすくなります。

tbody の基本的な意味と役割

table 要素の中に tbody を置くとデータの行がこの部分にまとまります。実務でよく使われる理由は CSS でのスタイル指定やスクリーンリーダーの読み上げ順を安定させやすい点です。thead や tfoot を使う場合でも tbody にデータ行をまとめておくと後から編集しやすくなります。なお tbody は必須ではなく、表を作るときに省略しても動作しますが、セマンティックな意味づけやデザインの統一性の観点から tbody を使うのが推奨されることが多いです。

実例で学ぶ tbody の使い方

以下の例は tbody の基本的な使い方を示します。見出しは別の行として扱わず同じ行の中で th を使って表の列の見出しを表現します。この構造なら CSS で行ごとに背景色を変えたり、セルの間隔を調整したりしやすくなります。

項目	説明
tbody の役割	表のデータ行をまとめる部分。データを清潔に区分するために使われます。
thead との関係	見出し部分を別にすると読みやすくなります。必須ではないが区別が明確になることが多いです。
実用例	成績表や商品リストなど、データが並ぶ表の本体を包む場として活躍します。

tbody を使うときのコツと注意点

まず大事なのは 表の構造を論理的に整理することです。複雑な表では見出し行を誰が読んでも理解できるようにしておくと、後で CSS で行の色を変えたり、スマホ表示で縦長のデータを読みやすくしたりする際に便利です。tbody はデータ行をまとめる場所なので、データ以外の情報はここに入れないことも心がけましょう。

アクセシビリティと tbody

スクリーンリーダーを使う人にとって表の理解は重要です。tbody を適切に使うことで読み上げの順番が安定し、視覚に頼らず内容を把握しやすくなります。見出しとデータの対応がはっきりしていれば、全体の意味が伝わりやすくなります。

実務的なまとめと練習

実務で tbody を活用する場面は多くあります。まずは手元の表を作るときにデータ行を tbody にまとめる癖をつけましょう。次に CSS でtbody のデータ行のスタイルを統一し、見た目を整える練習をするのが良いです。最後に accessibility の観点から、表の構造を崩さずに見出しとデータの関係を保つ編集を心がけてください。

まとめ

tbody は表のデータ本体をまとめる大事な区分です。必須ではない場面もありますが、表の読みにくさを減らし、デザインを整え、アクセシビリティを高めるために使われることが多いのが特徴です。今回の例とポイントを参考に、実際の HTML コードで tbody を使い慣れていきましょう。

tbodyの関連サジェスト解説

tbody とは html: tbody とは html の tbody は table 要素の中でデータ本体を入れる区切りの部分です。表には見出しの行を持つ thead と、合計や脚注を置く tfoot があり、データが並ぶ本体は tbody に入れます。実際の使い方としては table の中を … 、 … 、 … の順に書くのが基本です。これを守ると、表の構造が分かりやすくなり、CSS でデータ部分だけを狙って装飾したり、JavaScript で行を追加・削除する時にも操作しやすくなります。特に長い表やデータを動的に入れ替える場面では tbody を使うと便利です。なお、HTML を直接書くときには、thead/tbody/tfoot の順序を崩してもブラウザはある程度動作させてくれますが、意味を明確にするためにも tbody を必ず書く癖をつけましょう。アクセシビリティの観点からも、視覚以外の支援技術が表の構造を正しく理解しやすくなります。身近な例として、名前と点数を並べた成績表を作るときには、見出し行を thead に、データの行を tbody に、最後に平均などの集計行を tfoot に分けて書くと整理しやすいです。

tbodyの同意語

テーブル本体: HTMLの tbody 要素を指す言い換え。表のデータ行が入る領域で、theadやtfootと区別してデータ本体を表します。
テーブルの本体: 同じく tbody が指す、表のデータ行が集まる部分。見出し部の thead や脚部の tfoot とは区別して説明するときに使われます。
表の本文: 表のデータ行が配置される領域を指す言い換え。thead/tfootと区別される“本文”部です。
表本文: 表のデータ本体を意味する言い換え。データ行が並ぶ部分を表します。
テーブルボディ: 英語 table body の直訳・借用表現。tbody が指す“表のデータ本体”の部分を指します。
tbody 要素: HTMLの正式名称。tbody という要素自体を指す呼び方です。
テーブルデータ部: 表のデータ行が集まる部位を指す表現。thead/tfoot とは別にデータを含む部分です。
表のデータ部: 表のデータ行が並ぶ領域を表す言い換え。データ本体として理解します。
表のデータ領域: 表のデータ行を含む領域を示す語。主にデータの表示部を説明するときに使います。
テーブル本文領域: 表の本文を含む領域を指す表現。データ行が並ぶ部分として理解します。

tbodyの対義語・反対語

thead: テーブルのヘッダー部分を表すタグです。theadはtbodyの対になる役割を果たし、列の見出しを格納します。通常はthタグで見出しを定義し、テーブルの構造を明確にします。theadは必須ではなく、必要に応じて追加します。
tfoot: テーブルのフッター部分を表すタグです。tfootはtbodyの下部に相当し、合計行や補足情報などを格納します。これも必須ではなく、データの要約がある場合に使います。

tbodyの共起語

HTML表要素としての: テーブルの本体を表す要素。table内のデータ行を含むセクションです。
テーブル要素: table全体を指し、tbodyはその中のデータ本体を構成します。
thead: 表のヘッダー部を包む要素。通常は列名を含む行を保持します。
tfoot: 表のフッター部を包む要素。集計や総計行などを配置することがあります。
tr: テーブルの1行を表す要素。tbodyの子として複数の行が並びます。
td: データセルを表す要素。tbody内の行の各列を構成します。
th: 見出しセルを表す要素。通常thead内またはtbody内の先頭セルとして使われます。
表の本文: テーブルのデータ本体を指す表現。tbodyと同義で使われることがあります。
セマンティックHTML: 意味を持つHTML構造を使うことで、tbodyなどの意味が伝わりやすくなります。
アクセシビリティ: スクリーンリーダーが表の構造を正しく読み取れるよう、tbodyを含む適切なマークアップが重要です。
HTMLタグ: tbodyはHTMLのタグの一つで、tableの子要素として配置します。
データテーブル: 大量のデータを整理して表示する形式。tbodyはデータ部分を含みます。
セル: td/ thがテーブルのセルを構成します。
行: trが一行を表し、tbody内に複数の行が並びます。
列: 列はthead・tbody・tfootのセルの縦方向の並びを表します。
データ整列: td/ thによりデータを揃え、表の見た目を決定します。
CSSテーブル表示: CSSでtable・table-row・table-cellを使うと、tbodyの役割を保ちながら見た目を調整できます。
id属性: tbodyにはidを付けてJavaScriptで操作しやすくします。
class属性: tbodyにはclassを付けてスタイルを適用することが多いです。
data属性: data-属性を使ってtbodyに追加情報を付与することがあります。
JavaScriptDOM: DOM操作でtbodyを取得・変更・挿入・削除する場面がよくあります。
jQueryセレクタ: tbodyを選択して操作するケースが多く、$('tbody')のように参照します。
HTML5: tbodyはHTML5仕様で明確に定義され、セマンティックな表現を促します。
表の構造化: thead/tbody/tfootで表を構造化することで意味が伝わりやすくなります。
データ整形: テーブルの見た目を整える際、tbodyの中の内容を整形します。
ソート機能: テーブルのデータをソートする場合、tbodyの行を並べ替えることが多いです。
レスポンシブ表: スマホなど画面サイズに応じてtbody内の表示を切替える工夫が行われます。
アクセスビリティ向上: 適切なtbodyマークアップはスクリーンリーダーの解釈を助け、アクセシビリティの向上につながります。

tbodyの関連用語

tbody: テーブルの本体部分を構成する要素。行（tr）を集め、データセル（td）やヘッダセル（th）を配置します。複数の tbody を使って行をグループ化でき、ブラウザは省略時に tbody を自動的に作成します。
thead: テーブルのヘッダ部分を表す要素。列見出しを含み、通常は th を使います。scope 属性で列や行の関連を明示することが推奨されます。
tfoot: テーブルのフッタ部分を表す要素。集計行などを置くのに用い、thead と tbody の補完として使われます。
tr: テーブルの1行を表す要素。tbody、thead、tfoot の子として含み、各セルは td または th で表します。
td: データセルを表す要素。表の本体にデータを表示します。
th: 見出しセルを表す要素。通常はヘッダとして意味を持ち、scope 属性で行・列の関係を示します。
caption: テーブルの説明文を表示する要素。視覚的な説明や検索エンジンにとっての補助情報として役立ちます。
colgroup: 列のグループを定義する要素。col 要素と組み合わせて、列全体に対して幅やスタイルを適用します。
col: 列に対する属性を定義する要素。列全体のスタイルや幅を指定します。
table: HTML のテーブル要素。table の内部に thead、tbody、tfoot、tr、td、th が組み合わさって表を構成します。
border-collapse: CSS の border-collapse プロパティ。セルの境界線をどう結合するかを制御します。collapse で隣接セルの境界線を1本にします。
border-spacing: CSS の border-spacing プロパティ。セル間の空白を設定します（border-collapse が separate の場合に有効）。
table-layout: CSS の table-layout プロパティ。テーブルの幅の計算方法を指定します。auto は自動、fixed は固定幅です。
display_table: CSS の display: table の設定。要素を表のようにレイアウトします。行の表示には補助的な CSS が必要です。
semantic_html: HTML の意味的（セマンティック）なマークアップの考え方。テーブルはデータの構造を適切に伝えます。
accessibility: アクセシビリティ。スクリーンリーダーなど支援技術に適切に伝わるよう、適切な要素と属性を使います。
scope: th 要素で使われる属性。列見出しか行見出しか、関係する範囲を示します（col、row の値を設定します）。
aria-label: 要素の視覚的ラベルを補足的に提供する aria 属性です。
aria-labelledby: 別の要素の ID を参照してラベルを割り当てます。
aria-describedby: 要素の補足説明を関連付ける aria 属性です。
role: ARIA の役割を指定する属性。table、rowgroup、row、cell など、支援技術に意味を伝えます。
rowgroup: ARIA の役割の1つ。行のグループを意味します。通常は tbody に対応します。
table-row: ARIA の行の役割。行の中のセルをまとめる役割を補足します。
table-cell: ARIA のセルの役割。td または th のセルを支援技術に伝えます。
implicit_tbody: 省略された tbody が自動的に作成されるブラウザの挙動です。
multiple_tbody: テーブル内で複数の tbody を使い、データ行をグルーピングできます。
validation: HTML の検証。正しいマークアップを保つことでレンダリングの安定性とアクセシビリティを向上させます。