HyperText Markup Language col element.
col要素は、表の縦列に属性やスタイルを指定する際に使用します。col要素は表の縦列をグループ化しませんが、複数の縦列に対して同じ属性やスタイルをまとめて指定することができます。
span属性には、属性やスタイルを適用する縦列の数を指定します。span属性の値に指定できるのは0より大きい正の整数で、負の数値を指定することはできません。
col要素は、<colgroup> ~ </colgroup> の中だけでしか利用できません。ただし、colgroup要素に span属性が指定されてある場合には col要素を配置することはできません。
colgroup要素と col要素は混同しがちですが、以下の点を意識すると理解しやすいでしょう。
col要素は、HTML5では align属性・char属性・charoff属性・valign属性・width属性が廃止され、span属性だけが残されています。
HTML source
<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 source
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要素を指定すれば、それぞれの列に対して別々のスタイルを適用しやすくなります。ここでは、男性の列の背景色を青色に、女性の列の背景色を赤色にしています。
col要素は通常は 1列を表しますが、col要素に span属性を指定することで、複数の列をまたがって表すことができます。col要素の span属性には、またがる列の数を表す 1以上の整数を入れます。前述の例の 2つ目の colgroup要素を次のようにマークアップすることも可能です。
span属性のマークアップ例
<colgroup>
<col span="2" />
</colgroup>
同じ列グループ内にある列に別々のスタイルを指定する必要がないのであれば、このように span属性で複数の列をまとめてしまうことができます。
col {
display: table-column;
}