colspan属性只能用于或标签，值必须为正整数，需与rowspan配合实现多层表头且每行列数总和必须一致，不可用于或，也不等同于css的column-span。

colspan 属性必须写在 <td> 或 <code><th> 里 <p>很多人把 <code>colspan 写在 <tr> 或 <code><table> 上，浏览器直接忽略——它只属于单元格级属性。比如 <code><tr colspan="2"> 完全无效，而 <code><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"> 和第二行三个独立 <code><th> 对齐，同时确保每行总列数一致。 <p>容易踩的坑：只设了上层 <code>colspan，下层仍按原始列数写满单元格，结果浏览器自动补空格，视觉错位。实际列数得手动加总验证——一行里所有 colspan 值加上普通单元格数，必须等于目标列宽（比如都得是 3）。

• 第一行：<th colspan="3">产品类别</th> → 贡献 3 列
• 第二行：<th>A</th> <th>B</th> <th>C</th> → 3 个普通单元格 = 3 列
• 如果第二行只写了两个 <th>，浏览器会补一个空 <code><td>，但语义混乱，可访问性下降 <h3>colspan 单元格的宽度由 table-layout 决定</h3> <p>单纯写 <code>colspan="2" 不指定宽度，浏览器会按内容撑开或均分，结果不可控。尤其设置了 table-layout: fixed 后，列宽由第一行或 <col> 决定，colspan 单元格宽度 = 所跨各列宽度之和。
  

  html-to-pptx

  将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

  下载

  这时候给 colspan 单元格单独设 width，往往被忽略；用百分比（比如 width: 60%）也不代表占满三列，而是占整个表格宽的 60%，容易挤压其他列。

  • 推荐做法：用 <col> 显式定义每列宽度，再让 colspan 自然叠加
  • 响应式场景下，colspan 不会自适应拆分，小屏需配合媒体查询隐藏列或改用 CSS Grid 重构
  • 避免在 <thead> 用 <code>colspan 合并后，<tbody> 还按未合并的列数写数据单元格 <h3>别把 colspan 和 CSS column-span 搞混</h3> <p><code>colspan 是 HTML 表格属性，column-span 是 CSS 多列布局属性，两者毫无关系。在表格里写 style="column-span: all" 完全无效，浏览器直接跳过。

    真正要用 column-span 的场景是：父容器启用了 columns 或 column-count，且目标是块级元素（如 <h2></h2>），不是表格相关标签。

    • column-span 只接受 1 和 all，没有 column-span: 2 这种写法
    • 旧版 Safari（≤15.4）需要加 -webkit-column-span: all 前缀
    • 想合并表格列，就老实用 colspan；想让标题横跨多栏排版，才轮到 column-span
    复杂表头里最容易被忽略的，是每行列数一致性验证——不是“写了 colspan 就完事”，而是得算清楚每一行加起来是不是真等于你设计的总列数。手写时建议边写边加总，动态生成时最好加运行时校验逻辑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！