col要素は、親要素であるcolgroup要素がグループ化している列のうち、1つ以上の列を表します。

列を3列持つテーブルの場合、次のように実装することができます。

<colgroup>

<col>

<col>

<col>

</colgroup>

span属性を用いることで、指定した列までの列と関連づきます。次のようにすることで、最後の2列と関連づけることが出来ます。

<colgroup>

<col>

<col span="2">

</colgroup>

col要素にスタイルを当てることで、関連づいている列それぞれに、col要素に当たっているスタイルと同様のスタイルが適用されます。

たとえば、次のように実装すると、先頭から2列は横幅が100pxになります。

<colgroup>

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

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

<col>

</colgroup>

あるいは次のように実装します。

<colgroup>

<col span="2" style="width: 100px;">

<col>

</colgroup>

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

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

使用例

<table>

<caption>好きな寿司ネタベスト3</caption>



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

<colgroup>

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

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

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

</colgroup>



<thead>

<tr>

<td></td>

<th>1位</th>

<th>2位</th>

<th>3位</th>

</tr>

</thead>



<tbody>

<tr>

<th>Aさん</th>

<td>かんぱち</td>

<td>ばい貝</td>

<td>つぶ貝</td>

</tr>



<tr>

<th>Bさん</th>

<td>大トロ</td>

<td>うに</td>

<td>いくら</td>

</tr>

</tbody>

</table>

使用可能な属性

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

コンテンツカテゴリ

  • なし

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

  • 空要素のため、子孫になる要素を持ちません

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

仕様書と策定状況

仕様書 策定状況
W3C 勧告
WHATWG Living Standard
最終更新:2017年6月22日

ミツエーリンクスでは、デジタルメディアにおける企業と顧客とのコミュニケーション課題を解決する、さまざまなサービスをご提供しています。ぜひ一度サービスページをご覧ください。

関連情報