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