课程表必须用rowspan和colspan主动管理二维网格结构，漏删单元格、列数不一致或错位会导致表格断裂；rowspan="2"要求下一行同列DOM为空，colspan="3"则后续单元格需减少两个；空时段应省略td而非用空标签填充。
课程表本质是二维时间网格，必须用 rowspan 和 colspan 主动管理行列结构，不是加个属性就自动对齐——漏删单元格、列数不一致、<thead> 与 <code><tbody> 列错位，都会直接导致表格裂开。
<h3>rowspan="2" 时下一行同列必须彻底留空</h3>
<p>纵向合并最常出错：写了 <code>rowspan="2"，却还在下一行同一列写了 <td>，浏览器会当成新单元格渲染，整行错位。
<ul>
<li>
<code>rowspan="2" 表示“本格吞掉正下方那一格”，所以下一行、同一列 DOM 节点必须不存在
<thead>，<code><tbody> 第一行对应列也得跳过——它们是独立容器，但列坐标必须对齐
<li>调试方法：打开开发者工具，选中该单元格，看 box model 是否跨行；再检查下一行同列位置的 DOM 是否真的为空</li>
<li>反例：<code><tr>
<td rowspan="2">上午</td>
<td>课程1</td>
</tr>
<tr>
<td>上午</td>
<td>课程2</td>
</tr> → 第二行多写了一个 <td>，表格直接断裂
<h3>colspan="3" 意味着本行少写两个 <code><td>
<p>横向合并不是“让单元格变宽”，而是“它覆盖了本该存在的 3 个独立单元格”——后续单元格数量必须相应减少。</p>
<ul><li>若一行总列数应为 5，你在第一个 <code><td> 上写 <code>colspan="3"，那这一行后面只能再写 2 个单元格（不是 4 个）
<tr>
<td colspan="3">A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr> → 这行实际有 5 列（3+1+1），但第 4 个 <td> 会挤到第 5 列，下一行对不齐
<li>验证技巧：用 <code>Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0) 计算每行真实列数，确保所有 <tr> 结果一致
<h3>课程表典型结构：先定骨架，再填内容</h3>
<p>一个带“上午/下午/晚上”左侧栏和“周一至周五”顶部栏的课程表，核心是 3 行 × 5 列数据区，但需用 rowspan 拉伸左侧时间标签。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill5493" title="html-to-pptx"><img
src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill5493" title="html-to-pptx">html-to-pptx</a>
<p>将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p>
</div>
<a href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>第一行：标题行，含 <code><caption></caption> 和星期列 <th>周一</th>...<th>周五</th>
<td rowspan="2">上午</td>，后面跟 5 个课程单元格rowspan="2" 占用了）<td rowspan="2">下午</td> + 5 个课程；第五行只写 5 个课程<td>晚上</td> + 5 个课程（不用 rowspan，因只占一行）容易被忽略的细节：空单元格不能靠 填充
课程表里常有“某时段无课”，但用 <td> </td> 占位会破坏合并逻辑——它仍是真实单元格，会参与列计数。
- 正确做法：该位置完全不写
<td>，保持 DOM 空白 <li>若需要视觉留白，用 CSS 控制：<code>td:empty { background: #f9f9f9; border: 1px solid #ddd; } - 合并区域内部不能嵌套表格或复杂布局，否则可访问性失效、打印样式错乱
-
<caption></caption>必须紧贴<table> 开始标签后，且只能有一个 </table>
