th要素

このエントリーをはてなブックマークに追加

th要素は表の見出しセルをマークアップするための要素です。

tr要素の子要素として利用できます。

<table>
	<thead>
		<tr>
			<th>見出し1</th>
			<th>見出し2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>本文1-1</td>
			<td>本文1-2</td>
		</tr>
		<tr>
			<td>本文2-1</td>
			<td>本文2-2</td>
		</tr>
	</tbody>
</table>

colspan属性

colspan属性を指定することで横方向のセルを連結させることができます。値には連結したいセルの数を数値を指定することができます。

以下のサンプルではtfood要素内のth要素を3つ連結してマークアップしています。

<table>
	<thead>
		<tr>
			<th>品目</th>
			<th>単価</th>
			<th>数量</th>
			<th>値段</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>アイテム1</td>
			<td>¥1,000</td>
			<td>2</td>
			<td>¥2,000</td>
		</tr>
		<tr>
			<td>アイテム2</td>
			<td>¥500</td>
			<td>1</td>
			<td>¥500</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th colspan="3">合計</th>
			<td>¥2,000</td>
		</tr>
	</tfoot>
</table>

rowspan属性

rowspan属性を指定することで縦方向のセルを連結させることができます。値には連結したいセルの数を数値を指定することができます。

以下のサンプルでは商品のセルと値段のセルを縦方向に3つ結合しています。

<table>
		<tr>
			<th rowspan="3">商品</th>
			<td>アイテム1</td>
			<td rowspan="3">値段</td>
			<td>1,000円</td>
		</tr>
		<tr>
			<td>アイテム2</td>
			<td>2,000円</td>
		</tr>
		<tr>
			<td>アイテム3</td>
			<td>3,000円</td>
		</tr>
</table>

ブラウザでは以下のように表示されます(解りやすいようにtd要素とth要素のCSSにborderを指定しています。)。

rowspan属性

headers属性

headers属性は見出しとなるセルを指定するための属性です。見出しとなるセルにはid属性を付加しておき、headers属性には指定されているid属性を指定します。

下記のサンプルではtbody要素内のtd要素はthead要素内のth要素(#m1と#m2)と関連付け、tfoot要素内のtd要素はtfoot要素内のth要素(#m3)とthead要素内のth要素(#m2)と関連付けを行なっています。

<table>
	<thead>
		<tr>
			<th id="m1">商品名</th>
			<th id="m2">値段</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td headers="m1">商品1</td>
			<td headers="m2">1,000円</td>
		</tr>
		<tr>
			<td headers="m1">商品2</td>
			<td headers="m2">500円</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th id="m3"td>合計</th>
			<td headers="m2 m3">1,500円</td>
		</tr>
	</tfoot>
</table>

scope属性

scope属性は見出しセルの見出し範囲を指定するための属性です。scope属性に指定できる値は以下のキーワードです。

row rowを指定すると見出しセルの有効範囲はセルと同じ行のセルです
col colを指定すると見出しセルの有効範囲はセルと同じ列のセルです
rowgroup rowgroupを指定すると見出しセルの有効範囲はセルと同じ行グループのセルです
colgroup colgroupを指定すると見出しセルの有効範囲はセルと同じ列グループのセルです。

次のサンプルでは「row」と「col」を利用して見出しセルの有効範囲を指定してます。

<table>
  <caption>連絡帳</caption>
  <tr>
    <td></td>
    <th scope="col">名前</th>
    <th scope="col">電話番号</th>
    <th scope="col">Fax</th>
    <th scope="col">都市</th>
  </tr><tr>
    <td>1.</td>
    <th scope="row">山田 太郎</th>
    <td>412-212-5421</td>
    <td>412-212-5400</td>
    <td>東京</td>
  </tr><tr>
    <td>2.</td>
    <th scope="row">田中 花子</th>
    <td>410-306-1420</td>
    <td>410-306-5400</td>
    <td>大阪</td>
  </tr><tr>
    <td>3.</td>
    <th scope="row">山本 次郎</th>
    <td>281-564-6720</td>
    <td>281-511-6600</td>
    <td>名古屋</td>
  </tr>
</table>

scope属性で表すことができない複雑な見出しセルに関してはheaders属性を利用して見出しセルを指定するのが良いでしょう。

abbr属性

abbr属性は見出しセルに対してシンプルな見出しを指定できる属性です。

次のサンプルではth要素内のラベルに「名前」や「Name」といった重複した内容が表示されています。そこでaddr属性を利用して「名前」のみを見出しとして指定しています。

<table>
  <caption>連絡帳</caption>
  <tr>
    <td></td>
    <th abbr="名前">名前(Name)</th>
    <th abbr="電話番号">電話番号(Tel)</th>
    <th abbr="Fax">Fax</th>
    <th abbr="都市">都市(City)</th>
  </tr><tr>
    <td>1.</td>
    <th>山田 太郎</th>
    <td>412-212-5421</td>
    <td>412-212-5400</td>
    <td>東京</td>
  </tr><tr>
    <td>2.</td>
    <th>田中 花子</th>
    <td>410-306-1420</td>
    <td>410-306-5400</td>
    <td>大阪</td>
  </tr><tr>
    <td>3.</td>
    <th scope="row">山本 次郎</th>
    <td>281-564-6720</td>
    <td>281-511-6600</td>
    <td>名古屋</td>
  </tr>
</table>

sorted属性

HTML5.1よりsorted属性を指定することでと表の並び順をソートすることが可能になる。

参考URL

4.9.10 The th element - HTML5 - W3C
4.9.10 The th element - HTML5.1 - W3C

登録日 : 2014年07月04日 最終更新日 : 2014年7月8日

同じカテゴリー(テーブル)のエントリー

検索

スポンサードリンク

バージョン

リファレンス