colspan属性只能用于<td>或<th>标签，值必须为正整数，需与rowspan配合实现多层表头且每行列数总和必须一致，不可用于<tr>或<table>，也不等同于CSS的column-span。
colspan 属性必须写在 <td> 或 <th> 里
很多人把 colspan 写在 <tr> 或 <table> 上，浏览器直接忽略——它只属于单元格级属性。比如 <tr colspan="2"> 完全无效，而 <th colspan="2">销售额</th> 才起作用。
常见错误现象：表格看起来没合并，其实是属性挂错位置了；用开发者工具检查元素，发现 computed 样式里根本没有跨列效果，大概率是标签写错了地方。
-
colspan值必须是纯数字字符串，如colspan="3"，不能是colspan="3px"或colspan="three" - 值为 0、负数或小数时，浏览器会当作无效值处理，等同于没写
- 动态拼接 HTML（比如 JS 模板字符串）时，注意变量是否为
undefined，否则可能生成colspan="undefined"，同样失效
多层表头里 colspan 要和 rowspan 配合使用
单靠 colspan 只能横着拉，做不了“上层大类 + 下层子项”这种二维结构。比如第一行“产品类别”跨 3 列，第二行要分“A”“B”“C”，就必须让第一行的 <th colspan="3"> 和第二行三个独立 <th> 对齐，同时确保每行总列数一致。
容易踩的坑：只设了上层 colspan，下层仍按原始列数写满单元格，结果浏览器自动补空格，视觉错位。实际列数得手动加总验证——一行里所有 colspan 值加上普通单元格数，必须等于目标列宽（比如都得是 3）。
立即学习“前端免费学习笔记（深入）”；
- 第一行：
<th colspan="3">产品类别</th>→ 贡献 3 列 - 第二行：
<th>A</th><th>B</th><th>C</th>→ 3 个普通单元格 = 3 列 - 如果第二行只写了两个
<th>，浏览器会补一个空<td>，但语义混乱，可访问性下降
colspan 单元格的宽度由 table-layout 决定
单纯写 colspan="2" 不指定宽度，浏览器会按内容撑开或均分，结果不可控。尤其设置了 table-layout: fixed 后，列宽由第一行或 <col> 决定，colspan 单元格宽度 = 所跨各列宽度之和。
这时候给 colspan 单元格单独设 width，往往被忽略；用百分比（比如 width: 60%）也不代表占满三列，而是占整个表格宽的 60%，容易挤压其他列。
- 推荐做法：用
<col>显式定义每列宽度，再让colspan自然叠加 - 响应式场景下，
colspan不会自适应拆分，小屏需配合媒体查询隐藏列或改用 CSS Grid 重构 - 避免在
<thead>用colspan合并后，<tbody>还按未合并的列数写数据单元格
别把 colspan 和 CSS column-span 搞混
colspan 是 HTML 表格属性，column-span 是 CSS 多列布局属性，两者毫无关系。在表格里写 style="column-span: all" 完全无效，浏览器直接跳过。
真正要用 column-span 的场景是：父容器启用了 columns 或 column-count，且目标是块级元素（如 <h2>），不是表格相关标签。
-
column-span只接受1和all，没有column-span: 2这种写法 - 旧版 Safari（≤15.4）需要加
-webkit-column-span: all前缀 - 想合并表格列，就老实用
colspan；想让标题横跨多栏排版，才轮到column-span
