课表中需用rowspan和colspan解决跨行跨列问题：rowspan="n"表示单元格向下占n行，colspan="m"表示向右占m列，被合并的单元格必须物理删除，且每行td/th数量须一致；表头应先草图规划再编码，避免结构错位。
用 rowspan 和 colspan 解决“同一节课占多节时间”或“同一老师教多班”问题
课表里常见“数学 8:00–9:40 连上两节”或“班主任同时带高一（1）（2）班”，这时不能靠重复写单元格硬凑——得用 rowspan（纵向合并）和 colspan（横向合并）。不加这两个属性，表格会错位、样式崩塌，打印出来也对不上。
关键规则：被合并的单元格必须物理删除，只保留一个 <td> 或 <th>，并在其上声明属性。比如第一节语文占两行，就得删掉第二节对应位置的 <td>，再给第一节的 <td rowspan="2">。
-
rowspan="2"表示该单元格向下占用 2 行（含自身），后续行中同一列不能再有<td> -
colspan="3"表示该单元格向右占用 3 列（含自身），后续列中同一行不能再有<td> - 如果某单元格同时需要跨行+跨列，两个属性可以共存：
<td rowspan="2" colspan="2">自习</td>
表头结构怎么搭才不容易乱？先画草图再写 HTML
课表表头通常分三层：星期（列）、节次（行）、班级/年级（可能作为首列或首行）。很多人一上来就写 <table>，结果发现 <th> 嵌套错位、rowspan/colspan 数不清。建议先手绘或用 Excel 拆解出每个单元格实际占几行几列。
例如：左上角“班级/时间”是公共角标，它要同时跨所有节次行和所有星期列，所以必须设 <th rowspan="5" colspan="6">班级</th>（假设 5 节课 + 6 天）；而“星期一”这类列头只需 colspan="1"，但若想合并“上午/下午”，就得在列头层加 colspan。
立即学习“前端免费学习笔记（深入）”；
- 第一行
<tr>放星期，用<th colspan="1">单列；若需分“上午/下午”，则用<th colspan="3">上午</th>包住前 3 列 - 第一列
<tr>放节次（如“第1节”），用<th rowspan="1">（默认值可省略） - 真正内容从第二行第二列开始，注意避开已被表头
rowspan/colspan占用的位置
为什么加了 rowspan 表格还是错位？检查三处硬伤
最常踩的坑不是语法写错，而是 HTML 结构隐性断裂：浏览器渲染时，每行 <tr> 内部 <td>/<th> 总数必须一致（按“视觉列数”算，不是代码里写的个数）。一旦漏删被合并的单元格，或 rowspan 值算错，整行就会偏移。
- 错误现象：
<tr>显示比其他行窄，或右侧内容突然跳到下一行——大概率是某单元格没删干净，或多写了一个<td> - 验证方法：用浏览器开发者工具选中表格，看每一行的
<td>实际渲染数量是否相同（注意被rowspan跨过的列不计入该行） - 兼容性提醒：
rowspan="0"在部分旧版 IE 不支持，务必用具体数字（如rowspan="2"），别偷懒写 0
加样式前先让结构稳住：避免用 CSS 破坏表格逻辑
有人喜欢用 display: grid 或 float 强行调整课表，结果 rowspan 失效、打印时跨格变空白。HTML 表格的本质是语义化二维网格，rowspan 和 colspan 是它的原生能力，强行用 CSS 模拟只会增加复杂度。
- 边框用
border-collapse: collapse统一，别给每个<td>单独设border，否则合并单元格边缘会双线 - 文字居中用
text-align: center和vertical-align: middle即可，不用 flex 布局 - 响应式需求（如手机查看）优先考虑删减列（用
@media隐藏星期四、五），而不是把表格改成单列流式——那已经不是课表了
跨行跨列看着绕，其实就两条铁律：删干净、数清楚。写完多刷几次页面，盯着开发者工具里的 DOM 树看 <tr> 是否齐整，比调样式重要得多。
