SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:03HTMLタグ編の十五本目は、ティーディータグです。
  4. 0:07これは、表の中で通常のデータを入れるセルを作るためのタグです。
  5. 0:11たとえば料金表なら、講座名や金額といった実際の値がティーディーの中に入ります。
  6. 0:16見出しのセルにはティーエイチを使い、データのセルにはティーディーを使う、
  7. 0:19この役割分担が表作りの基本です。
  8. 0:23今回は、基本の書き方、置く場所のルール、セルを結合する属性、見出しと関連付ける方法まで、
  9. 0:27初心者向けに順番に解説します。
  10. 0:31まず、よく似たティーエイチとの違いを押さえましょう。
  11. 0:35ティーエイチは見出しセルです。
  12. 0:37何の列か、何の行かを示すラベルの役割を持ち、多くのブラウザーでは太字で中央寄せに表示されます。
  13. 0:44一方、ティーディーはデータセルで、見出しに対応する実際の値や文章を入れます。
  14. 0:50たとえば、講座という見出しの下にエイチティーエムエル、料金という見出しの下に無料、
  15. 0:53と入れるイメージです。
  16. 0:57太く見せたいからティーエイチを使う、という選び方は間違いです。
  17. 1:02見た目はシーエスエスで整え、タグは意味で選ぶことが大切です。
  18. 1:06基本の書き方です。
  19. 1:08ティーディーは開始タグと終了タグを明示し、その間に表示したいデータを書きます。
  20. 1:14コード例では、テーブル の中にティーアールで二行を作り、一行目に見出しセル、
  21. 1:18二行目以降にデータセルを並べています。
  22. 1:22一つのティーアールが表の一行に当たり、その中のセルの数が列の数になります。
  23. 1:27行ごとにセルの数がばらばらだと、表が崩れて見える原因になります。
  24. 1:32まずは見出し行一列分と、データ行を二、三行書く形から慣れていきましょう。
  25. 1:37保存して再読み込みすれば、罫線のないシンプルな表として表示されます。
  26. 1:42置く場所のルールも重要です。
  27. 1:44ティーディーをテーブルの直下に書くことはできず、必ずティーアール要素の中に置きます。
  28. 1:49さらに行のまとまりは、見出し部分のティーヘッド、本文部分のティーボディ、
  29. 1:53合計などのフッター部分のティーフットでグループ化できます。
  30. 1:57コード例のように構造を整えると、読み上げソフトにも表の意味が伝わりやすくなり、
  31. 2:02あとからシーエスエスで見出し行だけ色を付ける、といった指定も簡単になります。
  32. 2:07入れ子の順番は、テーブル、グループ、行、セル、と覚えておきましょう。
  33. 2:11不正な入れ子はブラウザーが自動で直してしまい、思った構造と違う表示になることがあります。
  34. 2:16記事の活用事例を見てみましょう。
  35. 2:19テーマは、データセルと見出しを関連付けることです。
  36. 2:22見出しセルのティーエイチには、コースとフィーというアイディーを付けています。
  37. 2:28そしてデータセルのティーディーには、ヘッダーズ属性で対応する見出しのアイディーを指定しています。
  38. 2:35こう書くと、このセルはどの見出しのデータなのかが、プログラムにもはっきり伝わります。
  39. 2:42試すときは練習用ファイルに表ごと貼り付けて保存し、再読み込みして表として表示されるかを確認してください。
  40. 2:49開発者ツールのエレメンツで、ティーディーがティーアールの中に正しく入っているかも確かめてみましょう。
  41. 2:57ここからはティーディーの主な属性です。
  42. 3:00まずコルスパンです。
  43. 3:01これはセルが横方向に何列ぶんを占めるかを指定します。
  44. 3:05たとえばコルスパン、イコール、二と書くと、そのセルは二列ぶんの幅で表示されます。
  45. 3:12コード例の最後の行では、二列を一つのセルにまとめ、全講座無料という補足を入れています。
  46. 3:18注意点は、広げた行ではセルの数をそのぶん減らすことです。
  47. 3:22列の合計がほかの行と合わないと、表の形がずれてしまいます。
  48. 3:27合計行や注意書きの行など、行全体に一つの内容を入れたい場面で使うと便利です。
  49. 3:33次はロースパンです。
  50. 3:34これはセルが縦方向に何行ぶんを占めるかを指定します。
  51. 3:39ロースパン、イコール、二と書くと、セルは二行ぶんの高さになります。
  52. 3:44コード例では、入門という分類のセルを二行にまたがらせ、その横にエイチティーエムエルとシーエスエスの行を並べています。
  53. 3:54ロースパンを使った行の次の行では、またがっている列のセルは書かなくてよい点が、
  54. 3:59コルスパンと共通の注意点です。
  55. 4:04ただし記事でも触れられているように、結合を増やすほど読み上げの順番や視線の動きは複雑になります。
  56. 4:12本当に必要か、表を分けられないかもあわせて考えましょう。
  57. 4:16ヘッダーズ属性について、もう少し補足します。
  58. 4:20単純な表なら、ティーエイチにスコープ属性を付けて、列の見出しか行の見出しかを示すだけで十分な場合が多いです。
  59. 4:28一方、コルスパンやロースパンで結合した複雑な表では、どのセルがどの見出しに対応するかが分かりにくくなります。
  60. 4:36そのときにヘッダーズ属性で、対応する見出しのアイディーを空白区切りで並べて明示すると、
  61. 4:42読み上げソフトがセルを読むときに見出しも一緒に伝えてくれます。
  62. 4:47結合を重ねて分かりにくくなる前に、表自体を二つに分ける方法も含めて、読み手にとって一番分かりやすい形を選ぶことが大切です。
  63. 4:56属性をまとめて整理します。
  64. 4:58ティーディーで主に使う専用属性は三つです。
  65. 5:01横に広げるコルスパン、縦に広げるロースパン、そして見出しと結び付けるヘッダーズです。
  66. 5:08それに加えて共通属性も使えます。
  67. 5:10アイディーは文書内で一意な識別子、クラスはシーエスエスやジャバスクリプトでまとめて選ぶ目印、
  68. 5:17ラングは内容の言語の指定、データ属性はアプリ独自の値を保持するために使います。
  69. 5:23コード例のように組み合わせて書けますが、データ属性に秘密情報を置く場所ではありません。
  70. 5:30また、幅や配置などの見た目は属性ではなく、シーエスエスで指定するのが現在の書き方です。
  71. 5:36ブラウザー互換性を確認します。
  72. 5:38記事が参照するエムディーエヌの記録では、ティーディー本体は、クロームが一以降、
  73. 5:43エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。
  74. 5:49ウェブのごく初期から使われてきた要素なので、現在使われているブラウザーならまず問題なく表示できます。
  75. 5:55今回扱ったコルスパン、ロースパン、ヘッダーズも、同じく初期のバージョンから対応しています。
  76. 6:01ただし、これは要素本体の対応開始の記録であり、細かな表示の違いまで保証するものではありません。
  77. 6:08スマホなど実際の利用環境でも一度表示を確認する習慣は付けておきましょう。
  78. 6:12最後に練習とまとめです。
  79. 6:14ティーディーは、表の通常のデータを入れるセルでした。
  80. 6:18大切なポイントは三つです。
  81. 6:20一つ目は、見出しはティーエイチ、データはティーディーと、意味で使い分けること。
  82. 6:26二つ目は、ティーディーは必ずティーアールの中に置き、テーブル全体の構造を守ることです。
  83. 6:32三つ目は、コルスパンとロースパンによる結合は控えめにし、複雑な表ではヘッダーズで見出しと関連付けることです。
  84. 6:40練習として、講座と料金の二列で、三行ほどの小さな料金表を作り、最後の行をコルスパンでまとめてみてください。
  85. 6:48お疲れさまでした。
  86. 6:50次回もHTMLタグを一つずつ学んでいきましょう。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

tdタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。通常のデータセル。colspan・rowspan による複雑な結合は読みやすさも確認します。

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