使用和可为表格列统一设置样式,需置于内最前,包含多个,每个对应一列,支持style或class定义宽度、背景、对齐等,span属性可跨列;2. 推荐用CSS类管理列样式,提升复用性与维护性,支持响应式设计;3. 注意样式优先级低,易被单元格自身样式覆盖,仅部分CSS属性(如background、width、text-align)有效,color等通常无效,旧浏览器兼容性需测试,精确控制仍建议直接设置td/th样式。合理使用可减少重复代码,提升结构清晰度。

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