HTML表格怎么做课程表？单元格合并实战案例-html教程-PHP中文网

课程表必须用rowspan和colspan主动管理二维网格结构，漏删单元格、列数不一致或错位会导致表格断裂；rowspan="2"要求下一行同列dom为空，colspan="3"则后续单元格需减少两个；空时段应省略td而非用空标签填充。

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>一个带“上午/下午/晚上”左侧栏和“周一至周五”顶部栏的课程表，核心是 3 行 × 5 列数据区，但需用 rowspan 拉伸左侧时间标签。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" 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 rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a>
													<p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
<ul>
<li>第一行：标题行，含 <code><caption></caption>

和星期列 <th>周一</th>...<th>周五</th>

第二行：起始行，左侧写 <td rowspan="2">上午</td>，后面跟 5 个课程单元格

第三行：不写左侧单元格，只写 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>