th

提供: ASCII.jp HTMLリファレンス

ver.8~ ver.7~ ver.14~ ver.5.1~ ver.11.5~
意味 表の見出しセル
読み方 ティーエイチ/テーブル・ヘッダー・セル

カテゴリー

なし

親にできる要素/カテゴリー

tr要素の子要素として

子にできる要素/カテゴリー

フレージング・コンテンツ

<th 属性="値">~</th>

属性 概要
colspan 整数値 セルが占める列数
rowspan 整数値 セルが占める行数
headers 整数値 セルに対応するth要素のID
scope 文字列 見出しの状態

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 th要素は、表の見出しのセルを表します。

 colspan、rowspan、headers属性は、td要素と同じように指定できます。

 scope属性では、その見出しが対応する行・列の範囲を表す文字列を、以下の中から指定します。scope属性がない場合は、そのth要素は文脈に応じたセル範囲に結び付けられます。

文字列 意味
row 同じ行のいくつかのセルに対する見出し
col 同じ列のいくつかのセルに対する見出し
rowgroup 行のグループ全体のセルに対する見出し
colgroup 列のグループ前提のセルに対する見出し

サンプル

(body要素の内部)

<table border="1">
<thead>
<tr><th scope="col">番号</th><th scope="col">氏名</th><th scope="col">住所</th><th scope="col">電話番号</th></tr>
</thead>
<tbody>
<tr><th scope="row">1</th><td>山田 太郎</td><td>東京都新宿区若松町X-XX</td><td>03-1234-XXXX</td></tr>
<tr><th scope="row">2</th><td>鈴木 花子</td><td>神奈川県横浜市港北区菊名X-XX-XX</td><td>045-234-XXXX</td></tr>
<tr><th scope="row">3</th><td>高橋 和夫</td><td>埼玉県さいたま市浦和区駒場X-XX-XX</td><td>048-345-XXXX</td></tr>
</tbody>
</table>

(スタイルシート)

th[scope="col"] { background-color : #000099; color : #ffffff; }
th[scope="row"] { background-color : #ccffff; }

サンプル実行画像

よくある間違い、勘違い

 HTML4ではレイアウトやデザインに関する属性(widthなど)がありましたが、HTML5ではそれらは廃止されました。レイアウトやデザインに関することは、スタイルシートで指定します。

 <th width="100">・・・</th>
 <th style="width : 100px;">・・・</th>
Powered by Web Professional

目次