使用colspan="N"时该行td数量须为总列数−N+1，rowspan="N"则对应列后续N−1行必须完全删除td标签，二者可组合但覆盖区域严禁重复定义td。

colspan="N" 后这行要少写 N−1 个

浏览器不会自动帮你“跳过”被合并掉的列位置，它只认 下子元素数量。比如你写 总课表，这一行就只该有这一个 ；如果后面还跟了 周一 周二，那实际占了 5 列（3+1+1），但其他行只有 3 个 ，表格立刻错位。

常见错误现象：

• 第一行多出一个空单元格
• 表头文字挤到右侧、对不齐下方列
• 开发者工具里看到某行 数量明显多于其他行

  实操建议：

  • 先确定整张表的总列数（比如 7 天 + 1 节次列 + 1 备注列 = 9 列），再设 colspan="9"
  • 只要用了 colspan="N"，该 内剩余 数量 = 总列数 − N
  • 别用 替代跨列表头——它不参与列对齐，纯属语义标题

  rowspan="N" 后对应列在后续 N−1 行必须留空

  rowspan 不是“复制粘贴”，而是“占用”。你在第 2 行第 1 列写了 上午，等于告诉浏览器：“从第 2 行起，连续 3 行的第 1 列都归我管”。那么第 3 行和第 4 行的第 1 列，不能出现任何 ，也不能写 —— 必须彻底删掉那个位置的标签。

  常见错误现象：

  • “上午”只显示一次，但下面两行数据整体右移一列
  • 出现空白行或高度异常拉伸
  • 第 3 行本该是“8:00”的单元格，跑到了第 2 列

  实操建议：

  • rowspan="3" 影响当前行 + 后续 2 行（共 3 行），第 5 行起恢复自由
  • 检查每一行的 数量是否与预期列数一致，尤其关注被 rowspan 覆盖的列
  • 连堂课（如跨 2 节）就用 rowspan="2"，下一行同一列直接跳过，不是留

  rowspan 和 colspan 能一起用，但覆盖区域严禁重复写

  一个单元格同时跨 2 行 2 列，写法是 实验课。这表示它占据一个 2×2 的矩形区域：假设它在第 3 行第 2 列，那它实际覆盖的是 (3,2)、(3,3)、(4,2)、(4,3) 四个逻辑位置。

  

  HTML Text Extract

  从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

  下载

  实操建议：

  • 这四个位置中，其余三个 必须全部删掉对应的 ，哪怕内容为空
  • 不要在第 4 行第 3 列补 —— 这会破坏合并结构，导致错位或静默截断
  • 合并区域不能超出表格定义的最大行列数，否则部分旧浏览器可能不渲染或报错

  响应式场景下， + rowspan/colspan 基本失效

  手机屏幕窄，但 colspan 只会让单元格更宽，rowspan 只会让单元格更高，它们不触发重排。你加 table { width: 100% } 或 td { font-size: 12px } 都只是缩放，无法解决列挤压、文字折行、横向滚动困难等问题。

  实操建议：

  • 小屏优先项目，放弃纯 table 布局，改用 display: grid 或 display: flex 重构
  • 若必须保留 table 结构，父容器加 overflow-x: auto，让用户手动滑动查看全表
  • 别指望媒体查询里用 display: block 强转

  —— 会丢失表格语义和可访问性 真正难的不是属性怎么写，而是每次增删一行或一列前，先手动画个表格矩阵，标出所有 rowspan/colspan 覆盖范围，再逐行核对

  数量是否守恒。

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