内的最前面。
1. 使用和定义列样式
包裹多个,每个对应一列。通过style属性或CSS类来设置列宽、背景色、文字对齐等。
- colgroup只能出现在thead、tbody、tr之前
- 一个col代表一列,span属性可指定跨多列
示例:
| 姓名 |
年龄 |
城市 |
| 张三 |
25 |
北京 |
上面代码中第一列背景浅灰、宽度100px,第二和第三列背景稍深灰。
2. 用CSS类控制列样式更灵活
将样式写在外部或内部CSS中,通过class提高复用性和维护性。
CSS:
.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上单独设置样式
基本上就这些。合理使用能减少重复代码,提升表格结构清晰度。