不合并列而仅批量应用样式到连续3列，必须置于内且总span需匹配实际列数，与colspan及tkinter的columnspan本质不同。

span 属性在 <col> 元素中不是用来“合并列宽”，而是声明该 <col> 定义规则**生效的列数**。它不改变结构、不合并单元格，只批量应用样式或属性到连续的若干列。

为什么 <col span="3"> 不等于 colspan

colspan 是作用于 <td> 或 <code><th> 的布局行为，会真实减少该行的单元格数量；而 <code><col span="3"> 只是告诉浏览器：“接下来连续 3 列都按这条规则渲染”，比如设宽度、背景色、对齐方式等。它不参与表格内容结构计算，也不会影响 rowspan/colspan 单元格的坐标逻辑。

• 错误理解：以为 <col span="3"> 能让三列“变成一列”——不能，列数不变，只是样式统一
• 正确效果：三列同时变宽、同时加背景、同时右对齐，但每列仍独立承载各自 <td> <li>若混用 <code><col span="3"> 和 colspan="3"，两者互不干扰，但视觉上可能重叠错觉，需手动校验总列数

<col> 的 span 必须配合 <colgroup></colgroup> 使用

单独写 <col span="2"> 在 <table> 内部是无效的——它必须是 <code><colgroup></colgroup> 的直接子元素，或作为 <table> 的第一个子元素（但规范更推荐 <code><colgroup></colgroup> 包裹）。

• 合法写法：<colgroup> <col span="2" width="120"> <col width="80"> </colgroup> → 前两列宽 120px，第三列宽 80px
• 非法写法：<table> <col span="2"> <tr>...</tr> </table> → 大部分浏览器忽略该 <col>
• 注意顺序：<colgroup></colgroup> 必须出现在 <thead> 或第一行 <code><tr> 之前，否则解析时可能失效 <h3>常见错误：span 值与实际列数对不上</h3> <p>如果 <code><colgroup></colgroup> 中所有 <col> 的 span 总和 ≠ 表格实际列数，浏览器不会报错，但末尾列可能得不到样式控制，或前面规则被截断。
  • 例如：表格有 5 列，<colgroup> <col span="2"> <col span="2"> </colgroup> → 第 5 列无定义，宽度回退为默认（常表现为突然变窄）
  • 补救方法：显式补全，如加一个 <col>（隐式 span="1"），或改用 <col span="5"> 统一设置
  • 调试技巧：给每个 <col> 加 background-color，在 DevTools 里看颜色是否覆盖全部列 —— 这是最直观的验证方式

  Tkinter 中的 columnspan 和 HTML 的 span 完全无关

  别被名字误导：columnspan 是 Tkinter grid() 方法的参数，用于控件跨列布局；HTML 中 <col> 的 span 是声明列范围的属性，二者语法、作用域、生效时机都不同。混用搜索词容易查偏方向。

  • Tkinter 示例：label.grid(row=0, column=0, columnspan=3) → label 占据第 0 行的 0/1/2 三列
  • HTML 示例：<colgroup><col span="3" style="background: #eee"></colgroup> → 第 1/2/3 列背景变灰
  • 关键区别：Tkinter 的 columnspan 改变控件占据的网格单元数量；HTML 的 span 不改变任何单元格数量，只批量绑定样式

  真正容易被忽略的是：一旦用了 <col> 设置列宽，后续通过 <td width> 或 CSS <code>width 直接设单元格宽度，优先级往往低于 <col> —— 这在响应式表格里容易导致意外交互，建议统一入口控制列宽。