rowspan和colspan是决定表格结构的底层属性，非装饰性：rowspan="n"要求后续n−1行同列必须删掉<td>，colspan值之和须等于总列数，混用时被覆盖单元格必须彻底删除且需配合<thead>/<tbody>、scope属性保障语义与可访问性。
rowspan 和 colspan 不是“锦上添花”的装饰属性，而是课程表能画得清楚的底层前提。没算对行数、漏删单元格、混用 thead/tbody 结构，表格一渲染就错位或语义断裂。
rowspan="n" 必须对应删掉后续 n−1 行中该列的 <td>
这是最常崩盘的点。比如某门实验课占上午两节（第2、3行），你在第2行写 <td rowspan="2">实验</td>，那第3行同一列位置就不能再出现 <td> —— 否则浏览器会当成新单元格，导致整行错位、边框重叠、内容挤到右边。
- 先确定跨几行，再反向检查后续行是否“空出”对应位置
- 用浏览器开发者工具选中单元格，看
Computed面板里height是否异常拉高，往往是rowspan写了但没删单元格 - 避免在
<tr>里硬塞<td></td>来“占位”，这会破坏结构语义
colspan 常用于表头合并，但必须和实际列数严格匹配
比如周一至周五共5列，你写 <th colspan="5">本周课表</th> 没问题；但如果下面每行只有4个 <td>，表格就会自动补空列，视觉上右偏、边框断开。
- 用
<thead>包裹表头，<tbody>包裹课程数据，避免colspan跨越不同逻辑区域 - 计算总列数：假设表头有“时间”列 + “周一”到“周五”5列，共6列 → 每行
<tr>内<td>数量之和必须恒为6（含colspan折算） -
colspan="0"是无效值，不要尝试用它“动态占位”
跨行+跨列嵌套时，优先固定左上角锚点单元格
课程表里常有“上午”“下午”这类纵向分组标题，同时又要横跨多天。这时别先写内容，先定锚点：<td rowspan="4" colspan="1">上午</td> → 它占据接下来4行、1列；然后从第1行第2列开始填“周一”，第1行第3列填“周二”……依次推进。
立即学习“前端免费学习笔记（深入）”；
- 嵌套层级不超过2层（比如一个
rowspan单元格内部再放colspan），否则可维护性急剧下降 - 避免在同一个
<tr>中对相邻<td>同时设rowspan和colspan，容易触发渲染歧义 - 用 CSS 的
border-collapse: collapse统一边框，否则跨单元格的边框可能重复显示
语义与可访问性不能靠视觉蒙混过关
屏幕阅读器依赖 <th scope="col"> 和 <th scope="row"> 理解行列关系。如果只用 rowspan 合并了“课程名称”列，却不给首行加 scope="row"，读屏软件会把“高等数学”误读成“周一上午的课”，而非“第一行所有时段的课”。
- 每个
<th>显式声明scope属性，scope="col"用于列标题（如“周一”），scope="row"用于行标题（如“上午”） -
<caption>必须存在，且描述具体（如<caption>计算机学院2025级春季课表（第1-16周）</caption>），不能留空或写“课表”二字 - 不要用表格模拟布局——课程表是典型的数据二维关系，但“首页导航栏”用表格就违背语义，应改用
<nav>+flexbox
真正难的不是写出能显示的表格，而是写出删掉一行数据后仍不崩、被读屏软件准确识别、缩放到手机屏还能区分时段的表格。每加一个 rowspan 或 colspan，都要同步检查三件事：删了对应单元格吗？列总数对得上吗？scope 标对了吗？
