HTML

col is like a column helper you put inside colgroup to style entire vertical columns at once—things like color, borders, and width—and with span you can say how many columns it should cover.

col 要素

colgroup要素と col要素の違い
属性
使用例

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

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

HTML

<col 属性名="値">

col要素は表の縦列をグループ化しませんが、複数の縦列に対して同じ属性やスタイルをまとめて指定することができます。なお、グループそのものは colgroup が担当し、col の span は「この col を何本の列に効かせるか」を示します。

span属性には、属性やスタイルを適用する縦列の数を指定します。span属性の値に指定できるのは 1 以上の整数で、負の数値を指定することはできません。

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

HTML

<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要素を使用します。

属性

span属性: 縦列の数を指定

列に効くCSS（超要約）

効く: background-*、border-*、width、visibility
効かない: padding、margin、多くの text-*、vertical-align（セル側で指定）

※ 列に効かない見た目調整は、td/th（セル）で指定します。

span 属性の要点: 値は 1以上の整数。0 は不可です。

使用例

HTML

<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>

CSS

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

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

col 要素のサンプル

日本の男女別人口推移
年	男性	女性	合計
平成12年	62,110,764人	64,815,079人	126,925,843人
平成17年	62,348,977人	65,419,017人	127,767,994人

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

あわせて、表の見出しセル（年・男性・女性・合計）には scope="col" を付けると、支援技術に「列見出し」であることが伝わりやすくなります。

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

HTML