colgroup要素

colgroup要素は、親要素であるtable要素が持つ1つ以上の列を意味的なグループとして表します。

※ 行をグループとして表す方法についてはtbody要素を参照してください。

span属性を用いることで、指定した列までをグループとして表すことが出来ます。次のようにすることで、最初の列から3列を1つのグループとして表すことが可能です。

<colgroup span="3">

列を10列持つテーブルの中で、先頭から3列を1つのAグループ、それに続く2列をBグループ、それに続く5列をCグループとして表す場合には次のようになります。

<colgroup span="3">

<colgroup span="2">

<colgroup span="5">

colgroup要素にスタイルを当てることで、グループ化されている列それぞれに、colgroup要素に当たっているスタイルと同様のスタイルが適用されます。

たとえば、次のように実装すると、先頭から3列は背景が赤色に変化します。

<colgroup span="3" style="background: red;">

<colgroup span="2">

<colgroup span="5">

ただし、このスタイルはテーブル自体には影響しますが、その子孫（中のテキストや子要素など）には影響を及ぼしません。

故に、font-sizeプロパティやcolorプロパティなどは有効ではありません。主に、backgroundプロパティやwidthプロパティなどを指定します。

属性により変化するコンテンツモデル

colgroup要素は、span属性を持つ場合空要素として振舞いますが、span属性を持たない場合、コンテンツモデル（子要素にしていい要素の種類）が変化します。

span属性を用いずに3列を1つのグループとして表す場合はcol要素を子要素として配置して実装します。

<colgroup>

<col>

<col>

<col>

</colgroup>

col要素は、colgroup要素でまとめられた列グループの列それぞれに異なるスタイルを当てる場合などに用います。

子要素にcol要素を持っている場合でも、colgroup要素に当てられたスタイルは列グループの列それぞれに影響します。

たとえば、次のように実装した場合、3列目は横幅が200pxとなり、その他の列は横幅が100pxとなります。

<colgroup style="width: 100px;">

<col>

<col>

<col style="width: 200px;">

<col>

</colgroup>

使用例

<table>

<caption>カテゴリ別好きな食べ物ベスト3</caption>



<colgroup span="1" style="background: #f0f0f0;">

<colgroup>

<col style="background: #cef;">

<col style="background: #ccf;">

<col style="background: #dcd;">

</colgroup>

<colgroup>

<col style="background: #ffa;">

<col style="background: #fba;">

<col style="background: #f99;">

</colgroup>



<thead>

<tr>

<td rowspan="2"></td>

<th colspan="3">お寿司</th>

<th colspan="3">焼き鳥</th>

</tr>

<tr>

<th>1位</th>

<th>2位</th>

<th>3位</th>

<th>1位</th>

<th>2位</th>

<th>3位</th>

</tr>

</thead>



<tbody>

<tr>

<th>Aさん</th>

<td>かんぱち</td>

<td>ばい貝</td>

<td>つぶ貝</td>

<td>砂肝（塩）</td>

<td>ねぎま（塩）</td>

<td>皮（塩）</td>

</tr>



<tr>

<th>Bさん</th>

<td>大トロ</td>

<td>うに</td>

<td>いくら</td>

<td>レバー</td>

<td>ハツ（タレ）</td>

<td>とりもも（タレ）</td>

</tr>

</tbody>

</table>

使用可能な属性

• すべてのグローバル属性
• span属性

コンテンツカテゴリ

• なし

子要素にしていい要素の種類

• 0個以上のcol要素
  • ただしspan属性が持たない場合
• 0個以上のtemplate要素
  • ただしspan属性が持たない場合
• 空要素として扱われるため、子孫になる要素を持ちません
  • ただしspan属性を持つ場合

親要素にしていい要素の種類

• table要素
  • ただし最初の子要素として
• caption要素が存在する場合は、caption要素に続いて

仕様書と策定状況