VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:01エイチティーエムエル、リファレンス解説です。
0:04HTMLタグ編の十一本目は、ティーエイチタグです。
0:09これは、表の中で見出しになるセルを作るためのタグです。
0:13たとえば料金表では、参加費や日程といった項目名があり、その横や下に実際の値が並びます。
0:21この項目名の部分がティーエイチで、値の部分とは役割が違います。
0:26今回は、基本の書き方から、スコープ属性の使い方、複雑な表での工夫まで、初心者向けに順番に解説します。
0:35表を、目で見て分かるだけでなく、機械にも正しく伝わる形にするための大切なタグです。
0:42料金表や時間割、成績表など、表は身近なページにたくさん登場します。
0:47その一つ一つの見出しを正しく書くことが、読みやすい表への第一歩です。
0:53まず、よく似たタグとの違いを押さえましょう。
0:56表のセルには二種類あります。
0:58見出しを入れるティーエイチと、実際のデータを入れるティーディーです。
1:02ブラウザーでは、ティーエイチの文字が太字で中央寄せに表示されることが多いため、
1:06文字を目立たせる目的で使いたくなるかもしれません。
1:10しかし、記事でもはっきり書かれているとおり、単に太字にする目的では使いません。
1:15使い分けの基準は見た目ではなく意味です。
1:18そのセルが周りのデータの見出しになっているかどうかで判断してください。
1:22この考え方が、表作りの土台になります。
1:25表を読む側だけでなく、検索や読み上げなどの機械にとっても、この区別は大切な手がかりになります。
1:31基本の書き方です。
1:32ティーエイチは、開始タグと終了タグを明示して使います。
1:37置く場所は、行を作るティーアールの中であり、さらにその外側にはテーブルが必要です。
1:44コード例では、一番上の行に項目と内容という二つの見出しを並べ、その下の行に、
1:49参加費、無料というデータを入れています。
1:54列の見出しは、このようにティーヘッドの中の行に並べる書き方が一般的です。
2:00まずは、テーブル、行、セルという階層を守って書く形を覚えましょう。
2:06順番や入れ子が崩れると、ブラウザーが補正して意図と違う構造になることがあります。
2:13ティーエイチで最も大切な属性が、スコープです。
2:16見出しが、どの範囲のデータに対応するのかを示します。
2:20列の見出しならスコープ、イコール、コル、行の見出しならスコープ、イコール、
2:24ローと書きます。
2:27コード例の上段は列見出し、下段の第一回は行見出しの例です。
2:32目で表を見れば対応は自然に分かりますが、読み上げソフトはセルを順番に読み上げるため、
2:38この指定があると、データを読み上げるときに対応する見出しも一緒に伝えることができます。
2:45見出しを書いたら、スコープもセットで考える習慣を付けましょう。
2:50値には、ほかに行と列をまとめる指定もありますが、基本の二つをまず使いこなすことが大切です。
2:57記事の活用事例を見てみましょう。
2:59テーマは、セルがどのデータの見出しかを伝えることです。
3:04コードでは、参加費というティーエイチと、無料というティーディーが、同じ行に横並びになっています。
3:13ここで参加費には、スコープ、イコール、ローが付いていて、この行の見出しであることが分かります。
3:21項目と値が横に並ぶタイプの表では、この書き方がよく使われます。
3:26試すときは、練習用ファイルに表ごと貼り付け、保存して再読み込みし、開発者ツールで構造が崩れていないかを確認してください。
3:37小さな表でも、見出しとデータの対応を意識して書く練習になります。
3:42セルを広げる属性も知っておきましょう。
3:45コルスパン、はセルが横方向に何列分を占めるか、ロースパンは縦方向に何行分を占めるかを指定します。
3:52たとえば、午前の予定という見出しを二列分の幅で大きく表示したいときは、コルスパンに二を指定します。
4:00その際、スコープにはコルグループを使うと、複数の列をまとめた見出しであることを示せます。
4:06ただし、セルを結合すると表の構造は一気に複雑になります。
4:10まずは結合のない表で基本を身に付けてから、必要な場面でだけ使うようにしましょう。
4:16結合したあとは、列数や行数の数え違いがないか、表全体を見直すことが大切です。
4:22複雑な表のための仕組みも紹介します。
4:24行と列の両方に見出しがあるような大きな表では、スコープだけでは対応が十分に伝わらないことがあります。
4:31そんなときは、見出しセルにアイディーを付け、データセルのヘッダーズ属性で、
4:35そのアイディーを指定して関連付けます。
4:39コード例では、行事と参加費という見出しにそれぞれアイディーを付け、データ側から参照しています。
4:45複数の見出しと関連付けたい場合は、空白で区切って並べることもできます。
4:50最初から使う必要はありませんが、表が複雑になったときの引き出しとして覚えておきましょう。
4:57そのほかの属性を確認します。
4:59エイビービーアール、は見出しセルの短い表現を示す属性で、長い見出しを短く伝える場面で、
5:03支援技術などに利用されます。
5:07また、ほかの要素と同じ共通属性も使えます。
5:10文書の中で一意な識別子のアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、
5:14内容の言語を示すラングなどです。
5:19アプリ独自の値を保持するデータ属性も使えますが、秘密情報を置く場所ではありません。
5:25属性はたくさん付けることが目的ではなく、その表に必要なものを、正しい要素に付けることが大切です。
5:31よくある間違いを三つ紹介します。
5:34一つ目は、見出しのセルをティーディーで書いてしまうことです。
5:38見た目をシーエスエスで太字にしても、意味の上ではデータのままなので、見出しとして伝わりません。
5:46二つ目は逆に、太字や中央寄せの見た目が欲しいだけでティーエイチを使うことです。
5:52レイアウト目的の使用は避け、見出しでない場所には使わないでください。
5:57三つ目は、スコープの付け忘れです。
5:59特に行見出しと列見出しが混在する表では、対応が曖昧になりやすいため注意しましょう。
6:06書き終えたら、表の途中のデータを一つ指さして、その見出しがどれかを声に出して確認する習慣がおすすめです。
6:13三百二十ピクセル程度の狭い画面でも、見出しとデータが欠けずに読めるかどうかも、
6:17あわせて確認しましょう。
6:21ブラウザー互換性を確認します。
6:23記事が参照するエムディーエヌの記録では、ティーエイチはクロームが一以降、
6:29エッジが十二以降、ファイアフォックスが一以降、サファリが一以降に対応しています。
6:34今回扱ったスコープ、コルスパン、ロースパン、ヘッダーズ、エイビービーアールといった属性も、
6:40同じく古いバージョンから対応していると記録されています。
6:45古くからある基本要素なので、現在の主要なブラウザーでは安心して使えます。
6:50ただし、これは要素本体と主な属性の対応状況です。
6:53モバイル版では実装や配信条件が異なる場合もあるため、公開前には対象の実機でも表示を確認しておきましょう。
7:01最後に練習とまとめです。
7:03ティーエイチは、表の中でデータの見出しになるセルを作るタグでした。
7:08大切なポイントは三つです。
7:10一つ目は、見出しはティーエイチ、データはティーディーと、意味で使い分けること。
7:16二つ目は、スコープ属性で列の見出しか行の見出しかをはっきり示すこと。
7:21三つ目は、複雑な結合表では、スコープで足りるかを確認し、必要ならアイディーとヘッダーズで関連付けることです。
7:30練習として、自作ページの表で、見出しセルにスコープを付けるところから始めてみてください。
7:37お疲れさまでした。
7:38次回もHTMLタグを一つずつ学んでいきましょう。

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

この動画で学べること

thタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。見出しセル。scope="col" や scope="row" で対応を明確にします。

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