col 元素支持 span 属性，但仅影响 width 分配，不传播 background、color 等样式；统一多列样式应使用 css :nth-child() 选择器作用于 td/th 元素。
colgroup 里不能用 span 属性控制“多列样式统一”？其实是能，但有硬限制
直接说结论：colgroup 中的 col 元素确实支持 span 属性，但它只影响列数分配，不触发样式继承或批量渲染。你没法靠一个带 span="3" 的 col 标签，让后续三列都自动套用它的 width 或 background —— 浏览器根本不读这个样式。
常见错误现象：
写成这样以为能统一三列宽度：
<colgroup> <br><col span="3" style="width: 120px;"> <br> </colgroup>
结果只有第一列生效，后两列回退到默认（或被后续 col 覆盖）。因为 span 只是“跳过”列定义，不是“复制”样式。
col 的 span 实际作用：跳过列声明，不复制样式
它的语义是“这个 col 定义同时适用于接下来的 N 列”，仅对以下属性有效：
-
width（含auto、px、%、fr等，但注意兼容性） -
style="border..."（极少数浏览器支持，不可靠） -
class和id（仅挂载在该col节点上，不作用于被 span 覆盖的列）
关键点：
-
span不传播background、color、text-align等任何单元格级样式 -
span="0"是无效值，会被忽略 - 如果
colgroup中col总数 +span覆盖数 ≠ 表格实际列数，浏览器会静默补全（行为不一致，别依赖）
真正能统一多列样式的可靠方法：CSS 选择器 + :nth-child()
想让第 2–4 列都变宽、加边框、设背景？别折腾 span，用 CSS：
/* 统一控制第2、3、4列的 td/th */<br>table tr td:nth-child(2),<br>table tr td:nth-child(3),<br>table tr td:nth-child(4),<br>table tr th:nth-child(2),<br>table tr th:nth-child(3),<br>table tr th:nth-child(4) {<br> width: 120px;<br> background: #f5f5f5;<br>}
或者更简洁（现代浏览器）：
table tr :is(td, th):nth-child(n+2):nth-child(-n+4) {<br> width: 120px;<br>}
注意：
• col 元素本身不渲染内容，所以给 col 加 background 在多数浏览器中不可见（Firefox 部分支持，Chrome/Safari 基本无视）
• 真实生效的样式必须落到 td/th 上，或用 col 控制 width + CSS 控制视觉
兼容性与性能提醒：别为了“语义”牺牲可控性
如果你的表格列数固定且已知，用多个独立 col 最稳：
<colgroup> <br><col width="80"> <br><col width="120"> <br><col width="120"> <br><col width="120"> <br> </colgroup>
比 <col span="3" width="120"> 更易调试、兼容性更好（IE9+ 全支持）、不会因列数计算偏差导致错位。
复杂点在于：表格结构动态时（比如列由 JS 渲染），span 看似省事，但一旦列数算错，colgroup 就和 tbody 错位，整个表格布局崩掉 —— 这种 bug 很难定位，因为 DOM 看着“没报错”。
