colgroup用于对表格列分组并统一设置样式，通过与col元素配合可定义列宽、背景色等；需置于table内且位于行标签前，支持span属性跨多列，提升表格可维护性与布局效率。
在HTML中，colgroup 元素用于对表格中的列进行分组，以便统一设置样式或属性，而不需要为每一列单独设置。它通常与 col 元素配合使用，帮助开发者更高效地管理表格的列样式和结构。
colgroup 的基本作用
colgroup 的主要作用是对表格中的一组列应用相同的样式或属性，比如宽度、背景色、对齐方式等。通过它，可以避免在每个单元格（td 或 th）中重复设置样式，提升代码的可维护性和简洁性。
常见用途包括：
- 统一设置某几列的宽度
- 为特定列区域添加背景颜色
- 优化表格布局，提高渲染效率
如何定义 colgroup
在 table 标签内使用 colgroup，它可以包含一个或多个 col 元素来代表每一列或列组。
立即学习“前端免费学习笔记（深入）”；
<table border="1">
<colgroup>
<col style="background-color: #f0f0f0; width: 100px;">
<col span="2" style="background-color: #ddd;">
</colgroup>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
</table>
说明：
- 第一个 col 设置第一列为浅灰色背景，宽度100px
- 第二个 col 使用 span="2" 表示该样式应用于接下来的两列（即第2和第3列）
- 浏览器会按顺序将 col 定义应用到对应的列上
注意事项
使用 colgroup 时需要注意以下几点：
- colgroup 必须放在 table 内部，且位于 thead、tbody、tr 等行内容之前
- 如果表格有多个 colgroup，它们的列数总和必须等于表格实际列数
- 并非所有CSS属性都能通过 col 控制，例如文字内容、边框细节等可能受限
- 在响应式设计中，建议结合CSS媒体查询进一步控制列宽
基本上就这些。合理使用 colgroup 能让表格结构更清晰，样式管理更方便。虽然现在很多人用CSS Grid或Flex布局替代复杂表格，但在展示数据类内容时，table + colgroup 依然是语义明确、兼容性好的选择。不复杂但容易忽略。
