VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04HTMLタグ編の十七本目は、テーブルタグです。
0:07これは、行と列の関係を持つデータを表として表すためのタグです。
0:12たとえば講座の名前と時間、商品の名前と料金のように、項目を縦と横で比べて読む情報がテーブルに向いています。
0:20逆に、ページ全体の配置を整える目的では使いません。
0:24今回は、表を形作る仲間のタグとの関係、基本の書き方、コード例、使うときの注意点まで、
0:29初心者向けに順番に解説します。
0:33表の全体像をつかむ回として聞いてください。
0:36身近な時刻表や価格表を思い浮かべると、イメージがつかみやすくなります。
0:42まず、どんな場面で使うかを整理しましょう。
0:45テーブルが向いているのは、行と列で照らし合わせることで意味が分かるデータです。
0:51時間割なら、曜日と時間帯が交わる場所に授業が入り、料金表なら、プランと項目が交わる場所に金額が入ります。
0:59一方、昔はページの配置にテーブルが使われたこともありましたが、今はレイアウトにはシーエスエスを使い、
1:04テーブルはデータの表だけに使います。
1:09書く前に、その情報に行と列の関係があるかを一度自問すると、タグ選びで迷いにくくなります。
1:16たとえば出席簿や在庫一覧も、行と列で読む典型的な例です。
1:20基本の書き方です。
1:22テーブルは開始タグと終了タグを明示し、その内側に表の中身を置きます。
1:27コード例では、まずキャプションで表の題名を示し、次にティーアールで行を作り、
1:32その行の中にティーエイチの見出しセルとティーディーのデータセルを置いています。
1:38ここで大切なのは入れ子の順番です。
1:41テーブルの直下にティーディーを直接書くことはできません。
1:45テーブル、行、セルという順番を守ります。
1:48まずは見出し一行とデータ一行の小さな表から書いて、構造に慣れていきましょう。
1:54ファイル名や置く場所に迷ったら、入門編で作った練習ファイルを使うと安心です。
1:59テーブルは一つのタグで完結せず、仲間のタグと役割を分けます。
2:04キャプションは表の題名です。
2:07ティーヘッド、ティーボディ、ティーフットは、それぞれ見出し行、データ行、
2:11合計行をまとめるグループです。
2:16ティーアールが一行を作り、その中に見出しセルのティーエイチと、データセルのティーディーを置きます。
2:24テーブルタグ自身は、いわば表全体を囲む枠の役割で、実際の文字が入るのはセルです。
2:31これまでの回で学んだグループのタグも、ここで一つに組み合わさります。
2:37名前が似ているタグが多いので、役割で覚えるのが近道です。
2:41記事の活用事例を見てみましょう。
2:44テーマは、項目を行と列で比較することです。
2:47キャプションに講座と時間と書いて、表全体の内容を一目で伝えます。
2:51見出し行はティーヘッドに入れ、講座と時間という列見出しをティーエイチで書き、
2:57データ行はティーボディに入れ、エイチティーエムエルが九十分という一行にしています。
3:02試すときは練習用ファイルに表ごと貼り付けて保存し、再読み込みして表として表示されるかを確認してください。
3:10開発者ツールのエレメンツで入れ子も確かめましょう。
3:13一行だけの小さな表でも、グループ分けをしておくと後で直しやすくなります。
3:18見出しセルの書き方をもう少し掘り下げます。
3:21ティーエイチにはスコープ属性を付けると、その見出しがどの範囲の見出しなのかをはっきり示せます。
3:28スコープ、イコール、コルは列の見出し、スコープ、イコール、ロウは行の見出しという意味です。
3:35たとえば九十分というデータは、列見出しの時間と、行見出しのエイチティーエムエルが交わる場所にあると分かります。
3:43見た目が同じでも、この対応付けがあることで、読み上げソフトでもどのセルの説明かが伝わりやすくなります。
3:51表が大きくなるほど、この対応付けの効果は大きくなります。
3:55テーブルの属性についてです。
3:57記事の通り、この要素に必須となる専用の属性はありません。
4:01必要に応じて、グローバル属性と呼ばれる共通の属性を使います。
4:06アイディーは文書内で一意な識別子、クラスはシーエスエスやジャバスクリプトで複数の要素をまとめて選ぶ目印、
4:11ラングは内容の言語の指定です。
4:16データ属性にはアプリ独自の値を保持できますが、秘密情報を置く場所ではありません。
4:21枠線や余白といった見た目は属性ではなく、シーエスエスで指定するのが現在の書き方です。
4:28迷った属性は無理に付けず、必要になったときに足すくらいで十分です。
4:33見た目と使いやすさの工夫です。
4:35枠線を引く、セルに余白を付ける、見出し行に色を付ける、といった装飾はすべてシーエスエスで行います。
4:43意味はエイチティーエムエルの構造で表し、見た目はシーエスエスで整える分担は、
4:46ほかのタグと同じです。
4:50もう一つ大切なのが小さい画面への配慮です。
4:54列が多い表はスマートフォンでは入りきらないため、表のラッパーに横スクロールを付けて、
4:58表自体は崩さずに読めるようにします。
5:03そのときも、見出しセルとデータセルの対応が保たれるように確認しましょう。
5:08色だけで区別せず、文字の意味でも区別が伝わるようにしておきましょう。
5:14よくある間違いを確認します。
5:16一つ目は、文章や画像を並べるためだけにテーブルを使うことです。
5:20それはレイアウトであり、シーエスエスの仕事です。
5:24二つ目は入れ子の間違いです。
5:26セルを行の外に書くなど不正な構造を書くと、ブラウザーが自動で補正して、書いたソースと実際の構造がずれてしまいます。
5:35三つ目は題名のない表です。
5:37キャプションを付けると、何の表なのかが利用者にもプログラムにも伝わりやすくなります。
5:43保存後は、開発者ツールで実際の構造を確認する習慣を付けましょう。
5:48公開前に一度、自分の表を声に出して読み上げてみるのも有効です。
5:52ブラウザー互換性を確認します。
5:55記事が参照するエムディーエヌの記録では、テーブル本体は、クロームが一以降、
6:01エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。
6:07ウェブのごく初期から使われてきた基本の要素なので、現在使われているブラウザーならまず問題なく表示できます。
6:16ただし、これは要素本体の対応開始の記録であり、細かな表示の違いまで保証するものではありません。
6:23三百二十ピクセル程度の狭い画面や文字拡大時にも、内容が欠けないかを実機で確認しましょう。
6:31身近なスマートフォンでも一度開いて、崩れがないか見てみましょう。
6:36最後に練習とまとめです。
6:38テーブルは、行と列の関係を持つデータの表そのものでした。
6:42大切なポイントは三つです。
6:45一つ目は、比べるデータにだけ使い、レイアウト目的では使わないこと。
6:50二つ目は、キャプション、グループ、行、セルという入れ子を守って書くこと。
6:56三つ目は、見出しセルにスコープを付けて、データとの対応をはっきりさせることです。
7:03練習として、講座と時間の二列で、見出し一行とデータ三行の表を作り、キャプションも付けてみてください。
7:11お疲れさまでした。
7:12次回もHTMLタグを一つずつ学んでいきましょう。
7:16小さな表を一つ完成させることが、次に進む一番の近道です。

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

この動画で学べること

tableタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。行と列の関係を持つデータの表。ページの配置目的には使いません。

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