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