th要素

th要素は、表（テーブル）の見出しセルを表す要素。

カテゴリー どのカテゴリーにも属さない。
コンテキスト tr要素の子要素として使用できる。
コンテンツ・モデル フロー・コンテンツを内包できる。
ただし、header要素、footer要素、セクショニング・コンテンツ、ヘッディング・コンテンツを子孫要素に持つことはできない。
属性 グローバル属性。
任意属性： colspan属性、rowspan属性、headers属性、scope属性、abbr属性。
ブラウザ対応

構文

<th></th>

要点

  • th要素は、表（テーブル）の見出しセルを表す要素である。
  • 行を表すtr要素の子要素として使う。
  • th要素内のテキストを、太字、中央寄せで表示するブラウザが多い。

属性

任意属性

属性 説明
colspan属性 水平方向のセルの結合数（セルがまたがる列数）を指定する属性。
rowspan属性 垂直方向のセルの結合数（セルがまたがる行数）を指定する属性。
headers属性 対応する見出しセル（th要素）を指定する属性。
scope属性 見出しセルの対象を指定する属性。
abbr属性 見出しセルの内容の略称を指定する属性。

サンプルコード

thead要素、tfoot要素、 tbody要素の子要素であるtr要素の子要素として

<table>
	<thead>
		<tr>
			<th>ヘッダーの見出しセル</th>
			<th>ヘッダーの見出しセル</th>
			<th>ヘッダーの見出しセル</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>見出しセル</th>
			<td>データセル</td>
			<td>データセル</td>
		<tr>
		</tr>
			<th>見出しセル</th>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>フッターの見出しセル</th>
			<td>フッターのデータセル</td>
			<td>フッターのデータセル</td>
		</tr>
	</tfoot>
</table>

table要素の子要素であるtr要素の子要素として

<table>
	<tr>
		<th>見出しセル</th>
		<th>見出しセル</th>
		<th>見出しセル</th>
		<th>見出しセル</th>
	</tr>
	<tr>
		<th>見出しセル</th>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
	<tr>
		<th>見出しセル</th>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
</table>

サンプル

thead要素、tfoot要素、 tbody要素の子要素であるtr要素の子要素として

HTMLソースコード
<style scoped>
	table.sampleTable td {
			text-align: right;
	}
</style>
<table border="1" class="sampleTable">
	<thead style="background-color: lime">
		<tr>
			<td></td>
			<th>うどん</th>
			<th>そば</th>
			<th>合計</th>
		</tr>
	</thead>
	<tbody style="background-color: aqua">
		<tr>
			<th>東京店</th>
			<td>720,000</td>
			<td>880,000</td>
			<td>1,600,000</td>
		</tr>
		<tr>
			<th>大阪店</th>
			<td>810,000</td>
			<td>850,000</td>
			<td>1,660,000</td>
		</tr>
	</tbody>
	<tfoot style="background-color: yellow">
		<tr>
			<th>合計</th>
			<td>1,530,000</td>
			<td>1,730,000</td>
			<td>3,260,000</td>
		</tr>
	</tfoot>
</table>
実際の表示
うどん そば 合計
東京店 720,000 880,000 1,600,000
大阪店 810,000 850,000 1,660,000
合計 1,530,000 1,730,000 3,260,000

table要素の子要素であるtr要素の子要素として

HTMLソースコード
<style scoped>
	table.sampleTable td {
			text-align: right;
	}
</style>
<table border="1" class="sampleTable">
	<tr>
		<td></td>
		<th>うどん</th>
		<th>そば</th>
		<th>合計</th>
	</tr>
	<tr>
		<th>東京店</th>
		<td>720,000</td>
		<td>880,000</td>
		<td>1,600,000</td>
	</tr>
	<tr>
		<th>大阪店</th>
		<td>810,000</td>
		<td>850,000</td>
		<td>1,660,000</td>
	</tr>
	<tr>
		<th>合計</th>
		<td>1,530,000</td>
		<td>1,730,000</td>
		<td>3,260,000</td>
	</tr>
</table>
実際の表示
うどん そば 合計
東京店 720,000 880,000 1,600,000
大阪店 810,000 850,000 1,660,000
合計 1,530,000 1,730,000 3,260,000