和是HTML5中用于批量控制表格列样式的语义化标签，不渲染内容但可统一设置宽度、背景色、边框及隐藏整列；须为直接子元素且不可嵌套，需闭合并按顺序对应列，支持width、background-color、visibility: collapse等有限CSS属性，推荐结合class使用以提升复用性。
在HTML5中，<colgroup></colgroup> 和 <col> 是专门用于**批量控制表格列样式**的语义化标签，它们不渲染可见内容，但能高效统一设置整列的宽度、背景、边框等CSS属性，避免为每单元格重复写样式。
Colgroup是列组容器，Col定义具体列
<colgroup></colgroup> 必须作为 <table> 的直接子元素（通常放在 <code><thead> 之前），它本身不显示，只起分组作用；<code><col> 是它的子元素，每个 <col> 对应表格中的一列（按顺序一一对应）。
例如：
…
…
这里 span="2" 表示该 <col> 覆盖两列，总共控制3列。注意：列数必须与实际表格列数一致，否则样式可能错位。
立即学习“前端免费学习笔记（深入）”；
支持的CSS属性有限但实用
浏览器仅允许对 <col> 应用部分CSS属性，常用且兼容性好的包括：
• width（最常用，可设像素、百分比或 auto）
• background-color（整列背景色）
• border（仅部分浏览器支持列边框，推荐用 border-collapse: collapse 配合单元格边框更可靠）
• visibility: collapse（隐藏整列，比 display:none 更规范）
不支持 color、font-size、padding 等文本或内边距相关属性——这些需作用于 <td>/</td>
<th> 或其父元素。<h3>配合CSS类实现灵活控制</h3>
<p>直接在 <code><col> 上写内联样式不便于复用，推荐结合 class 使用：
再在CSS中定义：
.price-col { width: 120px; background: #f9f9f9; }
.status-col { width: 80px; text-align: center; }
注意：text-align 虽不能直接生效于 <col>，但某些浏览器会继承影响单元格对齐，稳妥做法仍建议在 td, th 上统一设置。
常见误区与注意事项
• <col> 标签**必须闭合**（HTML5中不可省略结束标签）
• <colgroup></colgroup> 不可嵌套，也不可出现在 <tbody> 内部<br>• 若表格含 <code><colgroup></colgroup>，所有列都应被覆盖，否则未覆盖列可能样式异常
• 响应式场景下，width 设为百分比更灵活，但需确保父容器有明确宽度
• Safari 对 visibility: collapse 支持较好，Chrome/Firefox 也已稳定支持
