列単位で属性を設定する

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要素を使用することになります。

【列単位の属性指定】

以下の属性を使用すると、セル内の文字の位置を列単位で指定することができます。

<col align="center" valign="top">

align="" は水平方向、valign="" は垂直方向の指定を行います。

※IE 8、Firefox、Safari、Chromeでは、上記の属性に対応していません。

align属性とvalign属性に関する詳細は、「セル内の文字の位置を指定する」をご覧ください。

以下の属性を使用すると、各列の幅を指定することができます。

<col width="100">

【列の幅について】

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

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

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

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