SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

再生時間 7:28動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:04HTMLタグ編の七本目は、ティーアールタグです。
  4. 0:08これは、表の横一列、つまり一行を表すタグです。
  5. 0:12表は、行と列で情報を整理するための仕組みですが、その一行分をまとめる役割を持つのが、
  6. 0:15このタグです。
  7. 0:19中には見出しセルや通常のセルを並べます。
  8. 0:23行そのものは文字を表示する場所ではなく、セルを横に束ねるための入れ物だと考えてください。
  9. 0:30今回は、基本の書き方から、置く場所のルール、よくある間違い、ブラウザーの対応まで、
  10. 0:34初心者向けに順番に解説します。
  11. 0:39ティーアールタグが活躍するのは、情報を表で整理する場面です。
  12. 0:44たとえば料金表なら、プラン名、月額、内容を一行に並べます。
  13. 0:49時間割なら、時間、科目、教室を一行にまとめます。
  14. 0:54大切なのは、一行を読むだけで、一件分の情報が理解できるようにすることです。
  15. 1:00見出しと値を横に並べる使い方も代表的で、項目名とその内容を対応付けて示せます。
  16. 1:07逆に、単に画面を横に区切りたいだけのレイアウト目的では、表は使いません。
  17. 1:13表は、行と列の関係に意味があるときに選ぶものだと覚えておきましょう。
  18. 1:20基本の書き方です。
  19. 1:21ティーアールタグは、開始タグと終了タグを明示して、その間にセルを入れます。
  20. 1:28置く場所は、テーブルタグの内側です。
  21. 1:31多くの場合は、後で学ぶティーボディなどのグループの中に行を書きます。
  22. 1:37コード例では、一行の中に、商品名と価格という二つのセルを並べています。
  23. 1:43行が増える場合は、このティーアールのまとまりを必要な回数だけ繰り返します。
  24. 1:50ブラウザーは、行の中のセルを左から右へ順番に並べて表示します。
  25. 1:55まず、この行とセルの関係をしっかり押さえてください。
  26. 2:00記事の活用事例を見てみましょう。
  27. 2:03見出しと値を一行にまとめた例です。
  28. 2:06最初のセルは、見出しを表すティーエイチタグで、会場という項目名を入れています。
  29. 2:13スコープ属性にロウを指定すると、この見出しが横方向の行見出しであることを示せます。
  30. 2:21次のセルは通常のデータセルで、第2教室という値を入れています。
  31. 2:26このように、項目名と値を同じ行に置くことで、読み手にも支援技術にも、対応関係が伝わりやすくなります。
  32. 2:36試すときは、保存して再読み込みし、表として正しく並ぶかを確認してください。
  33. 2:42行の中に入れる、二種類のセルを使い分けましょう。
  34. 2:46ティーエイチは見出しセルです。
  35. 2:48その行や列が何を表すのかを示す、ラベルのような役割を持ちます。
  36. 2:53一方、ティーディーはデータセルで、実際の値を入れます。
  37. 2:57太字で表示されるからティーエイチを使う、といった見た目で選ぶのは間違いです。
  38. 3:03見出しとして意味があるかどうかで判断してください。
  39. 3:07支援技術では、データセルを読むときに、対応する見出しもあわせて伝えられることがあります。
  40. 3:14正しく使い分けることで、表の意味が機械にも伝わるようになります。
  41. 3:18ティーアールタグを置く場所について、もう少し詳しく見ます。
  42. 3:23表の中の行は、役割ごとにグループで分けることができます。
  43. 3:27見出し行をまとめるのがティーヘッド、主なデータ行をまとめるのがティーボディ、
  44. 3:32合計などを示す末尾の行をまとめるのがティーフットです。
  45. 3:37ティーアールは、こうしたグループの内側に置くのが基本の形です。
  46. 3:42グループ分けをしておくと、長い表でも構造が読み取りやすくなり、シーエスエスで見出し行だけ色を変える、
  47. 3:47といった指定もしやすくなります。
  48. 3:52直接テーブルタグの下に書ける場合もありますが、グループを意識すると整理しやすくなります。
  49. 3:59属性を確認します。
  50. 4:01ティーアールタグには、この記事で必須となる専用の属性はありません。
  51. 4:06行ごとに特別な設定を持たせる仕組みではなく、必要に応じて共通のグローバル属性を使います。
  52. 4:13文書の中で一意な識別子のアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、
  53. 4:18内容の言語を示すラングなどです。
  54. 4:23アプリ独自の値を保持するデータ属性も使えますが、秘密情報を置く場所ではありません。
  55. 4:30セル側に付ける属性と、行側に付ける属性を混同しないように注意してください。
  56. 4:35たとえば見出しの対象を示すスコープは、行ではなく見出しセルの属性です。
  57. 4:41よくある間違いを三つ紹介します。
  58. 4:44一つ目は、ティーアールの直下に、ピータグやディブタグ、あるいは文章そのものを直接入れてしまうことです。
  59. 4:52行の中に置けるのは、セルだけです。
  60. 4:54文章は必ずセルの中に入れてください。
  61. 4:57決まりに合わない書き方をすると、ブラウザーが自動で位置を補正し、意図しない表示になることがあります。
  62. 5:05二つ目は、終了タグの書き忘れです。
  63. 5:08この教材では、開始と終了を明示して構造を分かりやすくします。
  64. 5:13三つ目は、行ごとにセルの数がばらばらになることです。
  65. 5:17列の対応がずれると、読み手が混乱します。
  66. 5:20表全体を見渡して、列数をそろえましょう。
  67. 5:23見た目についても触れておきます。
  68. 5:26ティーアールタグは表の構造を作るもので、色や罫線といった見た目は、シーエスエスで指定するのが原則です。
  69. 5:34たとえば、本文の偶数行だけに薄い背景色を付けると、長い表でも行を追いやすくなります。
  70. 5:41罫線の重ね方を指定するプロパティもあります。
  71. 5:44また、スマートフォンのような狭い画面では、列が多い表が横にはみ出すことがあります。
  72. 5:50三百二十ピクセル程度の幅でも内容が欠けないか、横スクロールで読めるかなどを確認しておくと安心です。
  73. 5:58意味と見た目を分けて考える習慣を、ここでも大切にしてください。
  74. 6:03ブラウザー互換性を確認します。
  75. 6:06記事が参照するエムディーエヌの記録では、ティーアールタグはクロームが一以降、
  76. 6:12エッジが十二以降、ファイアフォックスが一以降、サファリが一以降に対応しています。
  77. 6:18いずれも非常に古いバージョンから使える、表の基本要素です。
  78. 6:23現在の主要なブラウザーで、安心して使える仕組みの一つだと言えます。
  79. 6:28ただし、この表が示すのは要素本体の対応です。
  80. 6:32新しい属性や機能を使う場合は、それぞれ別に対応状況を確認してください。
  81. 6:38実際に使う環境でも、表示が崩れていないかを見ておくと、より確実です。
  82. 6:43最後に練習とまとめです。
  83. 6:45ティーアールタグは、表の一行を表すタグでした。
  84. 6:49大切なポイントは三つです。
  85. 6:51一つ目は、行の中には見出しセルとデータセルだけを置き、文章やほかの要素を直接入れないこと。
  86. 6:59二つ目は、見出しと値を同じ行にまとめることで、対応関係が伝わりやすくなること。
  87. 7:05三つ目は、専用の必須属性はなく、必要に応じて共通属性を使うことです。
  88. 7:11練習として、見出し行一列とデータ行二列からなる、三行の小さな表を作り、開発者ツールでソースと表示が一致しているかを確認してみてください。
  89. 7:22お疲れさまでした。
  90. 7:23次回もHTMLタグを一つずつ、丁寧に学んでいきましょう。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

trタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。表の1行。その中に th または td を置きます。

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