HTML

The col element is used in HTML tables to apply styles and attributes to specific columns.

col 要素

　col要素は HTMLのテーブル要素で使用される要素です。col要素は特定の縦列にスタイルや属性を適用するために使用されます。

　col要素の基本的な構文は次の通りです

<col 属性名="値">

　col要素は表の縦列をグループ化しませんが、複数の縦列に対して同じ属性やスタイルをまとめて指定することができます。

　span属性には、属性やスタイルを適用する縦列の数を指定します。span属性の値に指定できるのは0より大きい正の整数で、負の数値を指定することはできません。

　col要素は通常、colgroup要素内に配置されます。colgroup要素は表の列のグループを定義し、それに含まれるcol要素にスタイルや属性を適用します。colgroup要素は省略可能ですが、複数のcol要素をまとめて管理する際に便利です。

<colgroup>
	<col 属性名="値">
	<col 属性名="値">
</colgroup>

　ただし、colgroup要素に span属性が指定されてある場合には col要素を配置することはできません。

colgroup要素と col要素の違い

　colgroup要素と col要素は混同しがちですが、以下の点を意識すると理解しやすいでしょう。

• colgroup要素は、表の縦列グループを表す要素です。
• col要素は、colgroup要素によってグループ化された縦列グループ内の１つ以上の縦列を表す要素です。
• colgroup要素は、表の縦列をグループ化しますが、グループ化した縦列にまとめて属性やスタイルを適用することができます。
• col要素は、表の縦列をグループ化しませんが、複数の縦列にまとめて属性やスタイルを適用することができます。
• colgroup要素は必ず <table> ～ </table>の中に配置します。
• col要素は必ず <colgroup> ～ </colgroup> の中に配置します。ただし、colgroup要素が span属性を持っている場合には、col要素を配置することはできません。
• colgroup要素が span属性を持っている場合には、空要素となります。
• まとめると、表の縦列をグループ化する場合、および、表の縦列をグループ化した上で属性やスタイルを指定する場合には colgroup要素を使用します。一方、表の縦列をグループ化することなく属性やスタイルを指定する場合には col要素を使用します。

HTML5 へのバージョンアップによる変更点

　col要素は、HTML5では align属性・char属性・charoff属性・valign属性・width属性が廃止され、span属性だけが残されています。

属性

span属性

縦列の数を指定

使用例

<table>
	<caption>日本の男女別人口推移</caption>
	<colgroup span="1"></colgroup>
	<colgroup>
		<col class="man">
		<col class="woman">
	</colgroup>
	<colgroup span="1"></colgroup>
	<thead>
		<tr>
			<th>年</th>
			<th>男性</th>
			<th>女性</th>
			<th>合計</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>平成12年</th>
			<td>62,110,764人</td>
			<td>64,815,079人</td>
			<td>126,925,843人</td>
		</tr>
		<tr>
			<th>平成17年</th>
			<td>62,348,977人</td>
			<td>65,419,017人</td>
			<td>127,767,994人</td>
		</tr>
	</tbody>
</table>

col.man {
	border-left:2px solid black;
	background-color:#ccccff;
}

col.woman {
	border-right:2px solid black;
	background-color:#ffcccc;
}

　この例では、col要素を 2つ使って、2列を 2つ目の列グループに入れています。class要素を指定すれば、それぞれの列に対して別々のスタイルを適用しやすくなります。ここでは、男性の列の背景色を青色に、女性の列の背景色を赤色にしています。

　col要素は通常は 1列を表しますが、col要素に span属性を指定することで、複数の列をまたがって表すことができます。col要素の span属性には、またがる列の数を表す 1以上の整数を入れます。前述の例の 2つ目の colgroup要素を次のようにマークアップすることも可能です。

<colgroup>
	<col span="2">
</colgroup>

　同じ列グループ内にある列に別々のスタイルを指定する必要がないのであれば、このように span属性で複数の列をまとめてしまうことができます。

col 要素の概要

カテゴリー

なし

コンテンツ･モデル

空

利用可能な場所

span属性が指定されていない colgroup要素の子として。

開始タグ

必須

終了タグ

禁止。
ただし、<col /> のように終了タグを表すスラッシュを開始タグに入れる表記は可能です。

要素固有の属性

span

列グループに入れる列の数を指定します。

標準的なスタイル

col {
	display: table-column;
}