colspan="n"表示该单元格向右占据n列，整行所有单元格的colspan值之和必须等于表格总列数；rowspan="n"表示从当前行起向下占据n行，后续对应列位置必须跳过，被覆盖的单元格须彻底删除。

colspan="n" 是怎么算列数的

它表示「这个 向右占满 n 列」，不是“加宽一点”或“视觉上撑开”。整行所有 和 的 colspan 值加起来，必须等于该表格的总列数（通常由第一行 数量决定）。

常见错误现象：Table row has fewer cells than required 报错、某行突然变短、导出 PDF 时列错位。

• 标题 A B ✅（3+1+1=5，总列数为 5）
• 标题 A B C ❌（3+1+1+1=6），浏览器会忽略最后一个 或补空格，JS 读取 row.cells 时可能返回 undefined
• 别用 colspan 去“对齐文字”或“撑宽度”——那是 width 或 CSS grid-column 的事

rowspan="n" 不是画一个高框，而是锁定位置

rowspan 不是让单元格“变高”，而是告诉浏览器：“从当前行起，接下来 n 行里，这一列的位置被我占了，别人不许动”。后续行中，对应列位置必须跳过， 数量要相应减少。

使用场景：表头分组（如“年度小计”跨两行）、数据汇总栏、固定侧边栏标题。

• 如果写了 A，下一行就不能再写 C D——否则第二列会被强行插入，破坏纵向结构
• 正确写法是：下一行只写 C（假设 A 占第 1 列，只剩第 2 列可用）
• 动态插入行（insertRow()）后尤其容易出问题：JS 生成的行若没按 rowspan 逻辑跳过列，row.cells[0] 可能为 undefined

同时用 colspan 和 rowspan 时最常漏掉的三件事

这不是属性叠加，而是在表格矩阵中划出一个矩形区域：左上角单元格设 rowspan 和 colspan，其余被覆盖的格子必须彻底删除。


HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
下载
• 删干净：被 rowspan="2" colspan="3" 覆盖的 5 个格子（除左上角外），不能留空 ，也不能用注释占位
• 对齐总列数：若第 1 列已被 占用，则同一行中后续 必须从第 2 列开始算起，整行仍需凑够总列数
• 检查后续两行：改了一个 rowspan，就得顺手数清楚下面两行各自还剩几个 可写——这才是真正难维护的地方

  colspan/rowspan 不是美化工具，是语义结构声明

  它们定义的是表格的逻辑结构，不是视觉样式。写错不会报错，但后果隐蔽且严重：

  • JS 读取 row.cells 返回 undefined，导致数据提取失败
  • 屏幕阅读器把表头和数据关联错，残障用户无法理解表格含义
  • React/Vue 渲染时出现不可预测的 错位，尤其在条件渲染或列表更新后
  • 打印 PDF 时纵向错位，90% 是某行少写了 ，肉眼看着整齐，实际矩阵已偏移

    复杂点在于：你改了一处 rowspan，可能要手动校验三行以上的单元格数量；容易被忽略的是——删掉被覆盖的 这一步，很多人以为留着空标签没关系，其实它会破坏整个表格的 DOM 矩阵。

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