使用<col>和<colgroup>可为表格列统一设置样式，<colgroup>需置于<table>内最前，包含多个<col>，每个对应一列，支持style或class定义宽度、背景、对齐等，span属性可跨列；2. 推荐用CSS类管理列样式，提升复用性与维护性，支持响应式设计；3. 注意<col>样式优先级低，易被单元格自身样式覆盖，仅部分CSS属性（如background、width、text-align）有效，color等通常无效，旧浏览器兼容性需测试，精确控制仍建议直接设置td/th样式。合理使用可减少重复代码，提升结构清晰度。
HTML中的<col>元素用于为表格的某一列统一设置样式，虽然它本身不显示内容，但可以配合CSS对整列进行样式控制。使用<col>时需将它放在<colgroup>中，并置于<table>内的最前面。
1. 使用<col>和<colgroup>定义列样式
<colgroup>包裹多个<col>，每个<col>对应一列。通过style属性或CSS类来设置列宽、背景色、文字对齐等。
- colgroup只能出现在thead、tbody、tr之前
- 一个col代表一列，span属性可指定跨多列
示例：
<table border="1">
<colgroup>
<col style="background-color: #f0f0f0; width: 100px;">
<col style="background-color: #e0e0e0;" span="2">
</colgroup>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
</table>
上面代码中第一列背景浅灰、宽度100px，第二和第三列背景稍深灰。
立即学习“前端免费学习笔记（深入）”；
2. 用CSS类控制列样式更灵活
将样式写在外部或内部CSS中，通过class提高复用性和维护性。
CSS：
.col-name {
background-color: #ffe4b5;
text-align: center;
}
.col-age {
width: 60px;
color: blue;
}
HTML：
<table>
<colgroup>
<col class="col-name">
<col class="col-age">
<col>
</colgroup>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</table>
这样便于统一管理样式，也支持响应式设计调整列宽。
3. 注意事项与兼容性
<col>的样式优先级较低，容易被单元格自身的样式覆盖。比如td设置了背景色，会优先于col的背景设置。
- 不是所有CSS属性都可通过col生效，如color一般无效，建议用text-align、width、background等
- 部分旧版浏览器对col支持有限，需测试兼容性
- 若需精确控制，仍建议在td/th上单独设置样式
基本上就这些。合理使用<col>能减少重复代码，提升表格结构清晰度。
