VIDEO LESSON

HTMLのtbodyタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:03動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03HTMLタグ編の十六本目は、ティーボディタグです。
0:07これは、表の中でデータ行をまとめるためのタグです。
0:10たとえば学習会の案内表なら、項目と値といった実際のデータが並ぶ部分がティーボディに入ります。
0:17見出し行をまとめるティーヘッド、合計などをまとめるティーフットと組み合わせることで、
0:22表が頭、本文、締めくくりという三つの部分に分かれます。
0:26表が長くなるほど、どこからどこまでがデータなのかが一目で分かる、このグループ分けの良さが実感できます。
0:34今回は、基本の書き方から、ブラウザーが自動で補う仕組み、使い方の注意点まで、
0:37初心者向けに順番に解説します。
0:41まず、表を分ける三つのグループを整理しましょう。
0:45ティーヘッドは見出し行の集まりで、項目名や列の名前が入ります。
0:49ティーボディはデータ行の集まりで、表の本文に当たります。
0:53そしてティーフットは、合計や件数など、表を締めくくる行の集まりです。
0:58この三つに分けておくと、後から見出し行だけ色を変えたり、データ部分だけスタイルを変えたりしやすくなります。
1:06見た目だけでなく、読み上げソフトにも表の構造が伝わりやすくなる点も大切です。
1:12どの行がどのグループか、意味で分けることが基本です。
1:16基本の書き方です。
1:17ティーボディは開始タグと終了タグを明示し、その中にティーアールで作った行を入れます。
1:24コード例では、テーブルの中にティーヘッドとティーボディを置き、ティーボディの中に二行のデータを並べています。
1:33一行目が定員は十二人、二行目が料金は無料、という内容です。
1:38入れ子の順番は、テーブル、グループ、行、セルです。
1:42ティーボディの直下にティーディーを直接書くことはできません。
1:48まずは見出し一行とデータ二、三行の小さな表から書いて、構造に慣れていきましょう。
1:54記事の活用事例を見てみましょう。
1:56テーマは、表のデータ行をまとめることです。
1:59見出し行はティーヘッドに入れ、ティーエイチにはスコープ、イコール、コルと書いて、
2:02列の見出しであることを示しています。
2:06データ行はティーボディに入れ、項目が定員、値が十二人という一行にしています。
2:11試すときは、練習用ファイルに表ごと貼り付けて保存し、再読み込みして表として表示されるかを確認してください。
2:17開発者ツールのエレメンツで、ティーボディの中にティーアールが正しく入っているかも確かめてみましょう。
2:23置く場所のルールを確認します。
2:25ティーボディはテーブルの直接の子として置き、ふつうはティーヘッドの後、ティーフットの前に書きます。
2:32中にはティーアールだけを入れ、その行の中にティーディーやティーエイチを置きます。
2:38表の説明であるキャプションがある場合は、その後にグループを続けます。
2:42また、ティーボディは一つの表に複数置くこともでき、内容のまとまりごとに分ける使い方もあります。
2:49不正な入れ子を書くとブラウザーが自動で直してしまうため、ソースと実際の構造がずれる原因になります。
2:55順番と入れ子を守って書きましょう。
2:58ここが記事で特に強調されている注意点です。
3:00ソースにティーボディを書かず、テーブルの直下にティーアールを書いても、表は表示されます。
3:07しかしブラウザーがエイチティーエムエルを解析するとき、ティーボディが自動で補われ、
3:12実際のディーオーエム、つまりブラウザー内部の構造にはティーボディが現れます。
3:18そのため、テーブルの直下のティーアールを直接対象にするシーエスエスやジャバスクリプトは、
3:22思った通りに動かないことがあります。
3:27迷ったときは、ソースではなく開発者ツールで実際の構造を確認する習慣を付けましょう。
3:32表が正しく表示されているのに指定だけが効かない、という不思議な現象は、この自動補正が原因であることが少なくありません。
3:41応用として、ティーボディを複数使う書き方も紹介します。
3:45一つの表の中にティーボディを二つ置き、午前の部と午後の部というように、内容のまとまりごとにデータ行を分けることができます。
3:55グループが分かれていると、シーエスエスでまとまりごとに背景色を変えたり、
4:00区切り線を付けたりしやすくなります。
4:04行見出しにはティーエイチを使い、値にはティーディーを使う点はこれまでと同じです。
4:11ただし、小さな表を細かく分けすぎると、かえって読みにくくなります。
4:16行数が多い表や、意味の区切りがはっきりある表で使うと効果的です。
4:22ティーボディの属性についてです。
4:24記事の通り、この要素に必須となる専用の属性はありません。
4:28必要に応じて、グローバル属性と呼ばれる共通の属性を使います。
4:32アイディーは文書内で一意な識別子、クラスはシーエスエスやジャバスクリプトでまとめて選ぶ目印、
4:36ラングは内容の言語の指定です。
4:40データ属性にはアプリ独自の値を保持できますが、秘密情報を置く場所ではありません。
4:46コード例のようにクラスを付ければ、グループ単位で見た目を変える対象にできます。
4:51セルに付ける属性と、グループに付ける属性を混同しないようにしましょう。
4:56ティーボディで分けておくと、シーエスエスでの活用が広がります。
5:01たとえば、ティーボディごとに背景色を少し変えて、まとまりの区切りを分かりやすくしたり、
5:07データ行にマウスを重ねたときだけ色を変える指定を、本文部分だけに絞ったりできます。
5:13見出し行はティーヘッド側でまとめて太字や色付けができるため、役割ごとに指定を分けられます。
5:20大切なのは、見た目を変えたいからといってタグの意味を変えないことです。
5:25意味はエイチティーエムエルのグループ分けで表し、色や余白などの見た目はシーエスエスで整える、
5:30この分担を守りましょう。
5:34ジャバスクリプトで表の行を絞り込むときも、ティーボディを対象にすれば、見出し行を巻き込まずにデータ行だけを操作できます。
5:43ブラウザー互換性を確認します。
5:45記事が参照するエムディーエヌの記録では、ティーボディ本体は、クロームが一以降、
5:51エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。
5:57ウェブのごく初期から使われてきた表の基本要素なので、現在使われているブラウザーならまず問題なく表示できます。
6:06ただし、これは要素本体の対応開始の記録であり、細かな表示の違いまで保証するものではありません。
6:13三百二十ピクセル程度の狭い画面や、文字を拡大したときにも内容が欠けないか、
6:18実際の利用環境で一度確認する習慣は付けておきましょう。
6:23最後に練習とまとめです。
6:24ティーボディは、表のデータ行をまとめる本文部分でした。
6:28大切なポイントは三つです。
6:30一つ目は、見出しはティーヘッド、データはティーボディ、合計はティーフットと、
6:34意味でグループを分けること。
6:38二つ目は、ティーボディは書かなくてもブラウザーに補われますが、構造をはっきりさせるために明示して書くこと。
6:45三つ目は、中にはティーアールを入れ、セルは行の中に置くという入れ子を守ることです。
6:51練習として、項目と値の二列で、見出し一行、データ三行、合計一行の案内表を作ってみてください。
6:58お疲れさまでした。
6:59次回もHTMLタグを一つずつ学んでいきましょう。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

tbodyタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。表のデータ行をまとめます。

解説記事・サンプルコードを読む：HTMLのtbodyタグとは？属性・使い方・ブラウザー互換性と活用例 →