rowspan 和 colspan 是课程表正常渲染的必要条件，漏写、多写或数值错误会导致错位或重叠；rowspan="N" 要求后续 N−1 行对应列完全留空；colspan 与 rowspan 可共存但需网格逻辑自洽；tbody 每行单元格数须动态匹配；必须设置 border-collapse: collapse。
rowspan 和 colspan 不是“可选技巧”，而是课程表能正常渲染的必要条件。漏写、多写、数值算错，表格立刻错位或内容重叠。
rowspan="N" 必须跳过后续 N−1 行对应列的 <td>
这是最常踩的坑：设了 rowspan="3"，但下两行仍写了该列的 <td>，浏览器会强行补格子，导致整行偏移。
- 正确做法：该单元格所在列，在接下来的
N−1行里，完全不出现<td>或<th> - 典型场景：上午时段合并 4 节课（8:00–11:40），则
<td rowspan="4">上午</td>后，紧接的 3 行里，这一列位置必须留空 - 验证方法：数每行
<td>+<th>总数，必须和表头<th>数量一致（除非该行用了colspan）
colspan 常用于表头跨列，但不能和 rowspan 混用在同一单元格
colspan 和 rowspan 可以共存于同一个 <td>，但必须确保网格逻辑自洽——即它占据的格子不与其他合并单元格冲突。
- 错误示例：
<td colspan="2" rowspan="2">实验课</td>后，紧接着一行又写<td>物理</td><td>化学</td>，会导致第二列被重复定义 - 安全用法：表头常用
colspan合并日期范围（如“第1–4周”），而课程名用rowspan合并节次，二者分工清晰 - 注意：
<caption>是独立标签，不参与行列计数，别把它当<tr>里的单元格
tbody 里每行的单元格数量必须动态匹配，不是“固定7列”
很多人硬编码每行 7 个 <td>，结果一加 rowspan 就崩。实际每行单元格数 = 表头列数 − 被上方 rowspan 占用的列数 + 当前行主动 colspan 增加的列数。
立即学习“前端免费学习笔记（深入）”；
- 简单判断法：打开浏览器开发者工具，看 Elements 面板里每行
<tr>下的子元素是否对齐成矩形网格 - 调试技巧：先不写任何
rowspan/colspan，确保基础表格结构正确；再逐个添加合并，每次只动一个属性 - 兼容性提醒：
border-collapse: collapse必须设，否则rowspan边框会断裂，尤其在 Chrome 和 Safari 中表现不一致
真正难的不是写对属性，而是画出网格草图再动手——哪怕只是用纸笔标出 (行, 列) 坐标和每个单元格的 rowspan/colspan 值。没这步，代码越改越乱。
