HTMLのテーブルで使われるtbodyタグについて紹介

HTMLでテーブルを作る際に、tbodyタグはよく目にしますね。
tbodyタグは、テーブルを作る上で必要なタグで、多くのサイトで使われています。
テーブルを作るときに初心者が困る

・複雑で分からない
・tbodyタグの使い方

というポイントがあります。
シンプルな構造のテーブルなら簡単にコーディングしやすいですが、情報が多い構造になると文字列やタグも増えるので分かりづらくなります。

そこで今回は、tbodyタグの

・基本的な使い方
・少し複雑なテーブルを作る際のtbodyタグの使い方

について解説していきます。

tbodyタグとは

tbodyタグの読み方

tbodyは、「ティボディ」と読み、tableとbodyを掛け合わせたタグです。

テーブルの本体部分に使われるタグで、tbodyの名前が意味を表しています。

そのため、タグの中でも覚えやすいです。

tbodyタグはテーブル本体の行グループを表す

tbodyは、

テーブルの中で本体の行グループを表す

役割を持っているタグです。

グループを表すときは、<tbody>〜</tbody>のコードを記述します。ですが、tbodyタグは、グループを表すために使われるので、違う要素をtbodyタグ内にコーディングしなければいけません。

さらに、tbodyタグを使わないテーブルもあるので、使い方についてはこの記事内で詳しく説明をしていきます。

tbodyタグで利用できる属性

tbodyタグでは以下の属性を使うことができます。

属性 説明
style  タグに付与することで、直接CSSを記述できる属性です。
id  CSSでスタイルを適用する要素を、指定するために使われます。id属性は文書内で重複できません。
class  idと同様で、CSSでスタイルを適用する要素を、指定するために使われます。ですが、class属性の場合、文書内で複数の指定が可能です。
注意
align・char・charoff・valignの4つの属性が、最新の標準仕様で廃止されています。
同様の効果を付与したいとき、CSSを利用してください。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox  完全対応
nternet Explorer  完全対応
Opera  完全対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview  完全対応
Android版Chrome  完全対応
Android版Firefox  完全対応
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  完全対応

tbodyタグの基本的な使い方

tbodyタグの行グループを表すコード

実際にtbodyタグが行グループを表すコードを見ていきましょう。

See the Pen
tableサンプル
by 吉井大輝 (@DaiW)
on CodePen.

以上のコードを見てみると、tbodyタグは商品の名称や個数など、テーブルの本体を表示するためのグループ化に使われています。

ですが、tbodyタグはグループ化をする役割があるだけで、tbodyタグ内に他のタグや文字列を記述しないと中身が無い空白のまま表示されます。

tbodyタグとtheadタグ・tfootタグとの違い

tbodyタグの他に、theadタグ・tfootタグという2つのタグもテーブル内で使用します。

しかし、それぞれのタグごとに違う意味を持っています。

・theadタグ:テーブルのヘッダー

・tbodyタグ:テーブルの本体部分

・tfootタグ:テーブルのフッター

theadタグ・tbodyタグ・tfootタグそれぞれ意味は違いますが、tbodyタグと一緒に使っていきます。

主にテーブルのコードは、

のように、theadタグ→tbodyタグ→tfootタグの順にグループ化するタグをコーディングしていきます。

サイト上では、出力されるデータを見るので、コード情報を見なければ、tbodyタグが使われているのか分かりません。

 

しかし、コーディングする側は、3つのタグを使うことで、情報が分かりやすく、CSSで調整がしやすいです。

違う意味のタグですが、テーブル内で一緒に使う関係性があるタグなので、tbodyタグを使うときはセットで使う事を覚えておきましょう。

tbodyタグの応用的な使い方

tbodyタグ・theadタグのみを組み合わせたテーブル

tfootタグは使わず、tbodyタグとtheadタグを使った組み合わせのテーブルもあります。

実際にコードを以下に記載します。

tfootタグを使わないケースのコーディングもあるので、覚えておきましょう。

tbodyタグを使わないテーブル

tbodyタグを使わずに、テーブルを作る方法もあります。

上記のコードのようにtbodyタグでグループ化せずとも、同様のテーブルができます。

しかし、テーブルによっては、tbodyタグ無しでコーディングすると、確認や調整に時間がかかる場合があります。

簡単なテーブルならば、tbodyタグを使わずにをコーディングするもの良いでしょう。

作るテーブルに応じてtbodyタグを使い分けてください。

まとめ

いかがでしたか?

今回、

tbodyタグの使い方

についてご紹介していきました。

この記事を参考にすることで、テーブルを作り出す手助けになります。理解度を深めれば、複雑なテーブルも作り出せるようになるでしょう。

tbodyの使い方で困っている方の力になれたら幸いです。