列をグループ化する

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>
...

【グループ単位の属性指定】

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

<colgroup align="center" valign="top"></colgroup>

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

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

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

以下の属性を使用すると、そのグループに含まれる各列の幅を指定することができます。（グループそのものの幅ではありません）

<colgroup width="100"></colgroup>

【列の幅について】

列の幅（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*」の指定は、内容を保持できる最小限の幅を意味します。