列をグループ化する

colgroup要素で、表の列（縦列）を構造的にグループ化することができます。

グループ化の指定を行うと、グループ単位で属性やスタイルシートが設定できるようになります。

列数の指定方法

グループ化する列数は、colgroup要素のspan属性で指定するか、colgroup要素の中にcol要素を配置して指定します。

colgroup要素のspan属性で指定する場合

次の例では、3列をグループ化しています。

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

span属性を省略した場合は、1列をグループ化したことになります。

<colgroup></colgroup>

col要素で指定する場合

col要素にもspan属性があり、その属性で列数を指定することができます。また、その属性を省略した場合は1列を指定したことになります。

したがって、次の例では3列をグループ化したことになります。

<colgroup>
<col align="center">
<col span="2" align="right">
</colgroup>

記述する位置

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

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

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

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

列の幅について

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

<colgroup width="100"></colgroup>
<colgroup width="1*"></colgroup>
<colgroup width="2*"></colgroup>

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

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