<col>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 ---
利用場所 span属性を持たないcolgroup要素の子要素として
内容

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

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

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

属性
任意属性
span="" まとめる列数 数値 1以上の整数

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つの列グループ内において、列の見栄えを個別に指定したい場合に使用することになります。

HTML5における変更点

使用例


<!DOCTYPE html>
<html>
<head>

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

<style>

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

</style>

</head>
<body>

<table border="1">
<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