课程表必须用rowspan和colspan精确管理二维网格结构，漏删单元格、列数不一致或错位会导致表格断裂；需先画草图标坐标，再写HTML，确保行列严格对齐。
课程表必须用 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>一个带左侧时段栏和顶部星期栏的课表，核心是行列对齐，不是视觉对齐。先画草图标出 (行, 列) 坐标，再写 HTML。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill8272" title="anything-to-html">anything-to-html</a>
<p>将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a href="/xiazai/skill8272" title="anything-to-html" 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><thead> 第一行放总标题（如用 <code><caption></caption> 更稳妥），第二行用 <th> 写“周一”至“周五”；左侧时段（如“第1节”）必须用 <code><th scope="row"> 放在每行开头
<li>所有 <code><tbody> 行的单元格总数，必须等于表头 <code><th> 数量（即列数），除非该行用了 <code>colspan 或被上方 rowspan 占位
border-collapse: collapse 必须设，否则 rowspan 边框在 Chrome/Safari 中会断裂<td>，而不是用空标签或 填充——否则列数膨胀，结构易崩
<h3>移动端别硬撑 table 布局</h3>
<p>纯 <code><table> 课程表在手机上几乎必然挤压变形，这不是属性写错了，而是技术选型问题。
<ul><li>给 <code><table> 外层套 <code><div style="overflow-x: auto"> 是底线方案，至少允许水平滚动
width="800"），改用百分比或 auto；<col> 标签设列宽比内联 style="width:120px" 更稳定style="text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"，但必须配合 width 或 max-width 才生效rowspan/colspan 值。没这步，代码越改越乱
