使用colspan="N"时该行td数量须为总列数−N+1，rowspan="N"则对应列后续N−1行必须完全删除td标签，二者可组合但覆盖区域严禁重复定义td。
colspan="N" 后这行要少写 N−1 个 <td>
浏览器不会自动帮你“跳过”被合并掉的列位置，它只认 <tr> 下子元素数量。比如你写 <td colspan="3">总课表</td>，这一行就只该有这一个 <td>；如果后面还跟了 <td>周一</td><td>周二</td>，那实际占了 5 列（3+1+1），但其他行只有 3 个 <td>，表格立刻错位。
常见错误现象：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 第一行多出一个空单元格
- 表头文字挤到右侧、对不齐下方列
- 开发者工具里看到某行
<td>数量明显多于其他行
实操建议：
- 先确定整张表的总列数（比如 7 天 + 1 节次列 + 1 备注列 = 9 列），再设
colspan="9" - 只要用了
colspan="N"，该<tr>内剩余<td>数量 = 总列数 − N - 别用
<caption>替代跨列表头——它不参与列对齐，纯属语义标题
rowspan="N" 后对应列在后续 N−1 行必须留空
rowspan 不是“复制粘贴”，而是“占用”。你在第 2 行第 1 列写了 <td rowspan="3">上午</td>，等于告诉浏览器：“从第 2 行起，连续 3 行的第 1 列都归我管”。那么第 3 行和第 4 行的第 1 列，不能出现任何 <td>，也不能写 <td></td> —— 必须彻底删掉那个位置的标签。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- “上午”只显示一次，但下面两行数据整体右移一列
- 出现空白行或高度异常拉伸
- 第 3 行本该是“8:00”的单元格，跑到了第 2 列
实操建议：
- rowspan="3" 影响当前行 + 后续 2 行（共 3 行），第 5 行起恢复自由
- 检查每一行的
<td>数量是否与预期列数一致，尤其关注被 rowspan 覆盖的列 - 连堂课（如跨 2 节）就用
rowspan="2"，下一行同一列直接跳过，不是留<td></td>
rowspan 和 colspan 能一起用，但覆盖区域严禁重复写 <td>
一个单元格同时跨 2 行 2 列，写法是 <td rowspan="2" colspan="2">实验课</td>。这表示它占据一个 2×2 的矩形区域：假设它在第 3 行第 2 列，那它实际覆盖的是 (3,2)、(3,3)、(4,2)、(4,3) 四个逻辑位置。
实操建议：
- 这四个位置中，其余三个 必须全部删掉对应的
<td>，哪怕内容为空 - 不要在第 4 行第 3 列补
<td></td>—— 这会破坏合并结构，导致错位或静默截断 - 合并区域不能超出表格定义的最大行列数，否则部分旧浏览器可能不渲染或报错
响应式场景下，<table> + rowspan/colspan 基本失效
手机屏幕窄，但 colspan 只会让单元格更宽，rowspan 只会让单元格更高，它们不触发重排。你加 table { width: 100% } 或 td { font-size: 12px } 都只是缩放，无法解决列挤压、文字折行、横向滚动困难等问题。
实操建议：
- 小屏优先项目，放弃纯 table 布局，改用
display: grid或display: flex重构 - 若必须保留 table 结构，父容器加
overflow-x: auto，让用户手动滑动查看全表 - 别指望媒体查询里用
display: block强转<td>—— 会丢失表格语义和可访问性
真正难的不是属性怎么写，而是每次增删一行或一列前，先手动画个表格矩阵，标出所有 rowspan/colspan 覆盖范围，再逐行核对 <td> 数量是否守恒。
