HTML

HyperText Markup Language td element.

td 要素

　td要素の td とは「table data」の略で、テーブルのデータ・セルを表します。td要素には、セルのデータを表すコンテンツを入れます。

　表を作成する際には tr要素で表の横部分を指定し、その中に th要素や td要素で表題や縦軸を指定してセルを定義します。

　table要素および tr要素は、レイアウトのために使用されることがありますが、本来の使用方法ではありませんので、レイアウトで同様の効果が欲しい場合はスタイルシートを利用しましょう。

　また、td要素のカテゴリーはセクショニング・ルートですので、たとえ td要素の中に h1要素などの見出し要素を入れたとしても、そのドキュメントのアウトラインに現れることはありません。

Sample

A1 B1 C1
A2 B2 C2
A3 B3 C3

HTML source


<table>
	<thead>
		<tr>
			<th>A1</th>
			<th>B1</th>
			<th>C1</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>A2</th>
			<td>B2</td>
			<td>C2</td>
		</tr>
		<tr>
			<th>A3</th>
			<td>B3</td>
			<td>C3</td>
		</tr>
	</tbody>
</table>

CSS source


table {
	border-collapse: collapse;
	margin: 1em auto;
}

table td, th {
	padding: 0 2em;
	border: 1px solid;
}

table thead th {
	background: #b0e0e6;
}

table tbody th {
	background: #f0f8ff;
}

td 要素の概要

Category 「カテゴリー」
セクショニング・ルート
Content model 「コンテンツ･モデル」
Flow content 「フロー・コンテンツ」
利用可能な場所
tr要素の子として利用します。
開始タグ
必須
終了タグ
該当の td要素の直後に別の td要素または th要素が来る場合、または、該当の td要素が親要素の中で最後の要素となる場合に省略することが可能です。
要素固有の属性
colspan
該当のセルが及ぶ範囲の列数を指定します。
rowspan
該当のセルが及ぶ範囲の行数を指定します。
headers
該当のセルに対応するヘッダー・セル（th要素）の id属性の値を指定します。
標準的なスタイル
td {
	display: table-cell;
	padding: 1px;
	vertical-align: inherit;
	border-color: gray;
}

colspan属性と rowspan属性

　下記の基準となる表を使って、colspan属性と rowspan属性の動きを見てみます。

A1 B1 C1
A2 B2 C2
A3 B3 C3
A4 B4 C4

HTML source


<table>
	<tr>
		<td>A1</td>
		<td>B1</td>
		<td>C1</td>
	</tr>
	<tr>
		<td>A2</td>
		<td>B2</td>
		<td>C2</td>
	</tr>
	<tr>
		<td>A3</td>
		<td>B3</td>
		<td>C3</td>
	</tr>
	<tr>
		<td>A4</td>
		<td>B4</td>
		<td>C4</td>
	</tr>
</table>

CSS source


table {
	border-collapse: collapse;
	margin: 1em auto;
}

table td {
	border: 1px solid;
	padding: 0 2em;
}

colspan属性

　colspan属性は、複数列にまたがるセルを設定したい場合に使用します。

A1 B1 C1
A2 C2
A3 B3
A4 B4 C4

HTML source


<table>
	<tr>
		<td>A1</td>
		<td>B1</td>
		<td>C1</td>
	</tr>
	<tr>
		<td colspan="2">A2</td>
		<td>C2</td>
	</tr>
	<tr>
		<td>A3</td>
		<td colspan="2">B3</td>
	</tr>
	<tr>
		<td>A4</td>
		<td>B4</td>
		<td>C4</td>
	</tr>
</table>

　colspan属性は、該当のセルが及ぶ範囲の列数を表します。この属性の値には、１以上の整数を入れなければいけません。このコンテンツ属性を指定すると、自信を含めて指定された数だけ右にあるスロットが、該当のセルの範囲となります。

　ここでは、「2」を指定しましたので、２列にまたがったセルとなりました。

　ここで注意して頂きたいのが、２行目、３行目で colspan属性を使ったときに td要素が１つ減っているところです。これを、もし消さずに書いた場合はどうなるでしょうか。

A1 B1 C1
A2 B2 C2
A3 B3 C3
A4 B4 C4

　「C2」のセルと「C3」のセルが飛び出してしまいました。このように表の形が崩れてしまいますので、colspan属性を使う際には注意が必要です。

　この表は、横３つ、縦４つのグリッドで構成されています。つまり、合計１２個のスロットを持つテーブルになります。しかし、colspan属性を使って複数スロットにまたがるようにすると、その分だけスロットを多く使うことになりますので、td要素の数を減らす必要がある点に注意してください。

　では、どのセルを減らすべきか？ これは表の使い方で考え方が変わるので一概に言えませんが、ここでは、２列目は「B2」にあたるセルと「C3」にあたるセルを削除することで表全体の見た目を整えました。

　colspan属性は、td要素だけでなく、th要素でも利用することができます。

rowspan属性

　rowspan属性は、複数行にまたがるセルを設定したい場合に使用します。

A1 B1 C1
A2 B2 C2
B3 C3
A4 B4

HTML source


<table>
	<tr>
		<td>A1</td>
		<td>B1</td>
		<td>C1</td>
	</tr>
	<tr>
		<td rowspan="2">A2</td>
		<td>B2</td>
		<td>C2</td>
	</tr>
	<tr>
		<td>B3</td>
		<td rowspan="2">C3</td>
	</tr>
	<tr>
		<td>A4</td>
		<td>B4</td>
	</tr>
</table>

　rowspan属性は、該当のセルが及ぶ範囲の行数を表します。このコンテンツ属性の値には、１以上の整数を入れなければいけません。このコンテンツ属性を指定すると、自信を含めて指定された数だけ下にあるスロットが、該当のセルの範囲となります。

　ここでも、「2」を指定しましたので、２列にまたがったセルとなっています。

　ここでさらに注意して頂きたいのが、２行目、３行目で rowspan属性を使ったときに、３行目、４行目の td要素が１つ減っているところです。colspan属性と違い縦にまたがりますので、次の行に当たる部分から td要素が減っています。

　colspan属性と違い複数行にまたがった場合、より複雑になりますのでご注意ください。ここでも、もし消さずに書いた場合はどうなるか見てみます。

A1 B1 C1
A2 B2 C2
A3 B3 C3
A4 B4 C4

　おそらく、皆さんの予想とは違った形でセルが飛び出しているのではないでしょうか？

　ここでも表全体の見た目を揃えるために、「A3」と「C4」のセルを削除しています。これは文章でどんなに説明するより、実際に書いてみてどのような表になるのか見てみるのが一番理解につながると思いますので、皆さんもどのような表になるのか書いてみることを推奨致します。

　colspan属性の動きを理解してからの方が、rowspan属性の理解は早いと思います。

　また、rowspan属性も、td要素だけでなく、th要素でも利用することができます。

colspan属性と rowspan属性の併用

　colspan属性と rowspan属性のそれぞれの動きは理解できたでしょうか？ colspan属性と rowspan属性を併用して使う場合は、さらに複雑化しますので、それぞれの動きをしっかりと理解した上で使うことを推奨します。

A1 B1 C1
A2 B2
A3
A4

　いかがでしょうか？ 皆さんは正しく表示できたでしょうか？

HTML source


<table>
	<tr>
		<td>A1</td>
		<td>B1</td>
		<td>C1</td>
	</tr>
	<tr>
		<td>A2</td>
		<td colspan="2" rowspan="3">B2</td>
	</tr>
	<tr>
		<td>A3</td>
	</tr>
	<tr>
		<td>A4</td>
	</tr>
</table>

　基本的な考え方は、上記の colspan属性と rowspan属性の使い方と何も変わりませんが、２つの考え方が同時に発生しているので複雑化しています。ここの例でいくと、まずは基本となる１２スロットの表を作った上で、「colspan="2"」がどういった動きをするのか確認して、調整し、その後に「rowspan="3"」がどういった動きをするのか...と分けて考えればさほど難しくはないと思います。

headers 属性

　headers属性は、該当の td要素が、どの th要素のヘッダー・セルに結び付いているのかを指定するために使います。

　ヘッダー・セルがテーブルの最上行と最左列に限られているのであれば、どのデータ・セルが、どのヘッダー・セルに結び付くのか明らかですので、headers属性を使う必要はありません。しかし、複雑なテーブル構造の場合は、headers属性を使うことで、明示的にヘッダー・セルを指定するのが良いでしょう。

　この属性は、通常のブラウザのレンダリングでは何も影響がありませんが、スクリーン・リーダーなどの支援テクノロジーでサポートされることが期待されたものです。

　headers属性には、対応するヘッダー・セル（th要素）の id属性の値をセットします。複数の id属性の値をセットすることも可能ですが、その場合は半角スペースで区切ります。

　先ほど使った例を、headers属性を使って書き直すと、以下の通りとなります。

headers属性のマークアップ例


<table>
	<caption>タクシー運賃表</caption>
	<thead>
		<tr>
			<th rowspan="3"></th>
			<th colspan="2" id="fare1">距離制運賃</th>
		</tr>
		<tr>
			<th id="fare1-1">初乗運賃（ 2.0km まで）</th>
			<th id="fare1-2">加算運賃</th>
		</tr>
		<tr>
			<th colspan="2" id="fare2">時間距離併用制運賃</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th rowspan="2" id="type1">特定大型</th>
			<td headers="type1 fare1 fare1-1">790円</td>
			<td headers="type1 fare1 fare1-2">258m ごとに 90円加算</td>
		</tr>
		<tr>
			<td colspan="2" headers="type1 fare2">1分 35秒ごとに 90円加算</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th rowspan="2" id="type2">大型</th>
			<td headers="type2 fare1 fare1-1">750円</td>
			<td headers="type2 fare1 fare1-2">272m ごとに 90円加算</td>
		</tr>
		<tr>
			<td colspan="2" headers="type2 fare2">1分 40秒ごとに 90円加算</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th rowspan="2" id="type3">普通</th>
			<td headers="type3 fare1 fare1-1">710円</td>
			<td headers="type3 fare1 fare1-2">288m ごとに 90円加算</td>
		</tr>
		<tr>
			<td colspan="2" headers="type3 fare2">1分 45秒ごとに 90円加算</td>
		</tr>
	</tbody>
</table>