列単位で属性を設定する

col要素で、表の列（縦列）の属性をまとめて設定することができます。

この要素を使用すると、列単位で属性やスタイルシートが設定できるようになります。

列数の指定方法

まとめる列数はspan属性で指定します。

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

<col span="3" align="center">

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

<col align="center">

記述する位置

col要素は、table要素内の下記の位置に配置します。

• table開始タグとtr開始タグの間に配置します。
• caption要素を使用している場合は、caption要素の後に配置します。
• 行のグループ化を行っている場合は、その要素よりも前に配置します。

上記を総合すると、配置位置は以下のようになります。

<table>
<caption>表のタイトル</caption>
<col align="center">
<thead>
<tr>
<th>ヘッダ部分</th>
</tr>
</thead>
...

また、次のようにcolgroup要素の中で使用することもできます。

<table>
<caption>表のタイトル</caption>
<colgroup>
<col align="center">
</colgroup>
<thead>
<tr>
<th>ヘッダ部分</th>
</tr>
</thead>
...

ただし、colgroup要素とcol要素を同じ階層に配置することはできません。

以下は不正な例となります

<table>
<caption>表のタイトル</caption>
<colgroup></colgroup>
<col align="center">
<thead>
<tr>
<th>ヘッダ部分</th>
</tr>
</thead>
...

colgroup要素との違いについて

colgroup要素が列を構造的にグループ化するのに対し、col要素は構造的なグループ化を行いません（見栄えの設定のみを行います）。

列の意味的なまとまりを表したい場合はcolgroup要素を、見栄えの設定のみを行いたい場合はcol要素を使用することになります。

列の幅について

列の幅（width=""）は、相対比率で指定することもできます。以下のように、整数の後にアスタリスク（ * ）を付けて指定します。（ただし、この指定方法は一部のブラウザでしか対応していないようです）

<col width="100">
<col width="1*">
<col width="2*">

上記の例では、1列目の幅を100ピクセルに指定、残りの幅を1対2の比率で2列目と3列目に分配しています。（全体の幅が400ピクセルの場合は、2列目が100ピクセル、3列目が200ピクセルになります）

*だけで指定すると、1*を指定した時と同じになります。また、0*の指定は、内容を保持できる最小限の幅を意味します。