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属性の場合、文書内で複数の指定が可能です。 |
同様の効果を付与したいとき、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タグと一緒に使っていきます。
主にテーブルのコードは、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<table> <thead> <tr> <th>サンプル</th> </tr> </thead> <tbody> <tr> <td>サンプル</td> </tr> </tbody> <tfoot> <tr> <td>サンプル</td> </tr> </tfoot> </table> |
のように、theadタグ→tbodyタグ→tfootタグの順にグループ化するタグをコーディングしていきます。
サイト上では、出力されるデータを見るので、コード情報を見なければ、tbodyタグが使われているのか分かりません。
しかし、コーディングする側は、3つのタグを使うことで、情報が分かりやすく、CSSで調整がしやすいです。
違う意味のタグですが、テーブル内で一緒に使う関係性があるタグなので、tbodyタグを使うときはセットで使う事を覚えておきましょう。
tbodyタグの応用的な使い方
tbodyタグ・theadタグのみを組み合わせたテーブル
tfootタグは使わず、tbodyタグとtheadタグを使った組み合わせのテーブルもあります。
実際にコードを以下に記載します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<table> <caption>成績表</caption> <thead> <tr> <th>教科</th> <th>判定</th> </tr> </thead> <tbody> <tr> <th>国語</th> <td>4</td> </tr> <tr> <th>数学</th> <td>3</td> </tr> <tr> <th>社会</th> <td>3</td> </tr> <tr> <th>理科</th> <td>2</td> </tr> <tr> <th>英語</th> <td>5</td> </tr> </tbody> </table> |
tfootタグを使わないケースのコーディングもあるので、覚えておきましょう。
tbodyタグを使わないテーブル
tbodyタグを使わずに、テーブルを作る方法もあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<table> <caption>成績表</caption> <tr> <th>教科</th> <th>判定</th> </tr> <tr> <th>国語</th> <td>4</td> </tr> <tr> <th>数学</th> <td>3</td> </tr> <tr> <th>社会</th> <td>3</td> </tr> <tr> <th>理科</th> <td>2</td> </tr> <tr> <th>英語</th> <td>5</td> </tr> </table> |
上記のコードのようにtbodyタグでグループ化せずとも、同様のテーブルができます。
しかし、テーブルによっては、tbodyタグ無しでコーディングすると、確認や調整に時間がかかる場合があります。
簡単なテーブルならば、tbodyタグを使わずにをコーディングするもの良いでしょう。
作るテーブルに応じてtbodyタグを使い分けてください。
まとめ
いかがでしたか？
今回、
についてご紹介していきました。
この記事を参考にすることで、テーブルを作り出す手助けになります。理解度を深めれば、複雑なテーブルも作り出せるようになるでしょう。
tbodyの使い方で困っている方の力になれたら幸いです。
