<col>

更新日
仕様 HTML Living Standard
分類 ---
利用場所 span属性を持たないcolgroup要素の子要素として
内容 無し（空要素）

col要素は、列グループに含まれる1つ以上の列を表します。この要素は、colgroup要素の子要素として使用します。

  • colgroup要素にspan属性が指定されている場合は、この要素を配置することはできません。

<colgroup>
<col>
<col span="2">
</colgroup>
属性 値
任意属性
span="" まとめる列数 数値 1以上 ～ 1000以下の整数

col要素を使用すると、列単位でスタイルを設定できるようになります。（一部のプロパティのみ有効、セルの幅や背景などが設定可能です）

次の例では、各col要素にクラス名を指定して、奇数列と偶数列で異なるスタイルが適用されるようにしています。

<colgroup>
<col span="1" class="odd">
<col span="1" class="even">
<col span="1" class="odd">
<col span="1" class="even">
</colgroup>

列数の指定方法

span属性を指定すると、複数の列をまとめることができます。（そのまとまりに対して、スタイルを適用できるようになります）

次の例では、3列をまとめています。

<col span="3">

span属性を省略した場合は、1列を指定したことになります。

<col>

次の例では、1つの列グループ内に5つの列が存在することになります。

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

colgroup要素との違いについて

colgroup要素が意味的なまとまりを表すのに対して、col要素では列を表すだけとなります。

col要素は、1つの列グループ内において、列の見栄えを個別に指定したい場合に使用することになります。

旧HTMLからの変更点
  • HTML5：width属性、align属性、valign属性、char属性、charoff属性が廃止されました。
  • HTML5：table要素の直下に配置できなくなりました。

使用例


<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

<style>

table, th, td {
border: 1px #000000 solid;
}

colgroup.area {
width: 6em;
background-color: #ffffff;
}
colgroup.sale {
width: 3em;
}
colgroup.sale col.odd {
background-color: #b3dcff;
}
colgroup.sale col.even {
background-color: #e6f4ff;
}

</style>

</head>
<body>

<table>
<caption>販売数</caption>

<colgroup span="1" class="area"></colgroup>

<colgroup class="sale">
<col span="1" class="odd">
<col span="1" class="even">
<col span="1" class="odd">
<col span="1" class="even">
</colgroup>

<tr>
<th>地域</th>
<th>1月</th>
<th>2月</th>
<th>3月</th>
<th>4月</th>
</tr>
<tr>
<td>関東エリア</td>
<td>200</td>
<td>250</td>
<td>220</td>
<td>260</td>
</tr>
<tr>
<td>関西エリア</td>
<td>180</td>
<td>220</td>
<td>230</td>
<td>200</td>
</tr>
</table>

</body>
</html>
表示例
販売数
地域 1月 2月 3月 4月
関東エリア 200 250 220 260
関西エリア 180 220 230 200