COLGROUP 元素指定表格中一列或一组列的默认属性。
COL 指定基于列的表格默认属性。
关于 COLGROUP 元素和 COL 的详细信息，参见 HTML 4.01 中说明：11.2.4 Column groups: the COLGROUP and COL elements 。
IE6 IE7 IE8(Q) 对 COL 和 COLGROUP 元素的属性及部分 CSS 特性支持较好，而IE8(S) Firefox Chrome Safari 不再支持 COL 及 COLGROUP 元素的部分属性及为其设定的 CSS 特性。
使用 COL 和 COLGROUP 元素的属性及部分 CSS 特性，在所有浏览器下可能有不同的效果。
| 所有浏览器 |
|---|
定义 COLGROUP 元素，并为其设置各种属性以及 CSS 样式，代码如下：
<!DOCTYPE html> <html> <head> <style type="text/css"> </style>
</head> <body> <table border="1" width="2500" height="500"> <colgroup span="2"
style="background:pink;"></colgroup> <colgroup width="200"></colgroup> <colgroup
style="color:blue;"></colgroup> <colgroup style="width:200px;"></colgroup>
<colgroup align="left"></colgroup> <colgroup align="center"
style="text-decoration:underline;"></colgroup> <colgroup align="right"
style="font-size:20px;font-family:Courier New"></colgroup> <colgroup align="justify"
style="cursor:pointer"></colgroup> <colgroup valign="top"></colgroup> <colgroup
valign="middle"></colgroup> <colgroup valign="bottom"
style="padding:20px;"></colgroup> <colgroup valign="baseline"></colgroup>
<tr> <td>span="2"</td> <td>span="2"</td> <td>width="200"</td>
<td>color:blue;</td> <td>width:200px</td> <td>align="left"</td>
<td>align="center"</td> <td>align="right"</td>
<td>align="justify"</td> <td>valign="top"</td>
<td>valign="middle"</td> <td>valign="bottom"</td>
<td>valign="baseline"</td> </tr> <tr> <td>span="2"</td>
<td>span="2"</td> <td>width="200"</td> <td>color:blue;</td>
<td>width:200px</td> <td>align="left"</td> <td>align="center"</td>
<td>align="right"</td> <td>align="justify"</td>
<td>valign="top"</td> <td>valign="middle"</td>
<td>valign="bottom"</td> <td>valign="baseline"</td> </tr> </table>
</body> </html>
定义 COL 元素，并为其设置各种属性以及 CSS 样式，代码如下：
<!DOCTYPE html> <html> <head> <style type="text/css"> </style>
</head> <body> <table border="1" width="2500" height="500"> <col span="2"
style="background:pink;"> <col width="200"> <col style="color:blue;"> <col
style="width:200px;"> <col align="left" > <col align="center"
style="text-decoration:underline;"> <col align="right" style="font-size:20px;font-family:Courier
New"> <col align="justify" style="cursor:pointer"> <col valign="top"> <col
valign="middle"> <col valign="bottom" style="padding:20px;"> <col valign="baseline" >
<tr> <td>span="2"</td> <td>span="2"</td> <td>width="200"</td>
<td>color:blue;</td> <td>width:200px</td> <td>align="left"</td>
<td>align="center"</td> <td>align="right"</td>
<td>align="justify"</td> <td>valign="top"</td>
<td>valign="middle"</td> <td>valign="bottom"</td>
<td>valign="baseline"</td> </tr> <tr> <td>span="2"</td>
<td>span="2"</td> <td>width="200"</td> <td>color:blue;</td>
<td>width:200px</td> <td>align="left"</td> <td>align="center"</td>
<td>align="right"</td> <td>align="justify"</td>
<td>valign="top"</td> <td>valign="middle"</td>
<td>valign="bottom"</td> <td>valign="baseline"</td> </tr> </table>
</body> </html>
由于截图较大，这里不给出各浏览器截图，结论如下：
| IE6 IE7 IE8(Q) | Opera | IE8(S) | Firefox Chrome Safari | |
|---|---|---|---|---|
| span 属性 | yes | yes | yes | yes |
| width 属性 | yes | yes | yes | yes |
| align 属性 | yes | yes | no | no |
| valign 属性 | yes | yes | yes | no |
| CSS 特性 color | yes | no | no | no |
| CSS 特性 width | yes | yes | yes | yes |
| CSS 特性 background | yes | yes | yes | yes |
| CSS 特性 text-decoration | yes | no | no | no |
| CSS 特性 font-size font-family | yes | no | no | no |
| CSS 特性 cursor | yes | no | no | no |
| CSS 特性 padding | yes | no | no | no |
当使用 COLGROUP COL 时需注意各浏览器对属性及 CSS 样式的设置，避免造成兼容性问题。
| 操作系统版本: | Windows 7 Ultimate build 7600 |
|---|---|
| 浏览器版本: |
IE6
IE7 IE8 Firefox 3.6.10 Chrome 7.0.552.0 dev Safari 5.0.2 Opera 10.63 |
| 测试页面: |
colgroup.html
col.html |
| 本文更新时间: | 2010-10-19 |
COLGROUP COL
