HTML5入門

対応するth要素のid

対応する見出しセル（th要素）のid属性値を指定する。半角スペース区切りで、複数指定することもできる。

対応する見出しセルを１つ指定

<table border="1">
	<tr>
		<th id="thA">見出しセルＡ</th>
		<th id="thB">見出しセルＢ</th>
		<th id="thC">見出しセルＣ</th>
	</tr>
	<tr>
		<td headers="thA">Ａ－１</td>
		<td headers="thB">Ｂ－１</td>
		<td headers="thC">Ｃ－１</td>
	</tr>
	<tr>
		<td headers="thA">Ａ－２</td>
		<td headers="thB">Ｂ－２</td>
		<td headers="thC">Ｃ－２</td>
	</tr>
	<tr>
		<td headers="thA">Ａ－３</td>
		<td headers="thB">Ｂ－３</td>
		<td headers="thC">Ｃ－３</td>
	</tr>
</table>

対応する見出しセルを２つ指定

<table border="1">
	<tr>
		<td></td>
		<th id="thA">見出しセルＡ</th>
		<th id="thB">見出しセルＢ</th>
		<th id="thC">見出しセルＣ</th>
	</tr>
	<tr>
		<th id="th1">見出しセル１</th>
		<td headers="thA th1">Ａ－１</td>
		<td headers="thB th1">Ｂ－１</td>
		<td headers="thC th1">Ｃ－１</td>
	</tr>
	<tr>
		<th id="th2">見出しセル２</th>
		<td headers="thA th2">Ａ－２</td>
		<td headers="thB th2">Ｂ－２</td>
		<td headers="thC th2">Ｃ－２</td>
	</tr>
	<tr>
		<th id="th3">見出しセル３</th>
		<td headers="thA th3">Ａ－３</td>
		<td headers="thB th3">Ｂ－３</td>
		<td headers="thC th3">Ｃ－３</td>
	</tr>
</table>

HTMLソースコード

<style scoped>
	table.sampleTable td {
			text-align: right;
	}
</style>
<table border="1" class="sampleTable">
	<tr>
		<td></td>
		<th id="thA">うどん</th>
		<th id="thB">そば</th>
		<th id="thC">合計</th>
	</tr>
	<tr>
		<th id="th1">東京店</th>
		<td headers="thA th1">720,000</td>
		<td headers="thB th1">880,000</td>
		<td headers="thC th1">1,600,000</td>
	</tr>
	<tr>
		<th id="th2">大阪店</th>
		<td headers="thA th2">810,000</td>
		<td headers="thB th2">850,000</td>
		<td headers="thC th2">1,660,000</td>
	</tr>
	<tr>
		<th id="th3">合計</th>
		<td headers="thA th3">1,530,000</td>
		<td headers="thB th3">1,730,000</td>
		<td headers="thC th3">3,260,000</td>
	</tr>
</table>

実際の表示