col要素
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属性
コンテンツカテゴリ
- なし
子要素にしていい要素の種類
- 空要素のため、子孫になる要素を持ちません
親要素にしていい要素の種類
-
colgroup要素
- ただし、 colgroup要素 がspan属性を持たない場合
仕様書と策定状況
最終更新：2017年6月22日
ミツエーリンクスでは、デジタルメディアにおける企業と顧客とのコミュニケーション課題を解決する、さまざまなサービスをご提供しています。ぜひ一度サービスページをご覧ください。