本文深入解析 HTML 表格中因误用 <tr> 嵌套和 rowspan 导致行结构错乱的问题，阐明浏览器解析器对省略闭合标签的自动推断机制，并提供符合 HTML5 语义规范的正确写法与验证方法。
本文深入解析 html 表格中因误用 `
在构建具有层级结构的课程表、部门架构表或学期科目汇总表时，开发者常依赖 rowspan 实现“主类别纵向跨行”的视觉效果（如 <td rowspan="3">Sem1</td>）。但若忽略 HTML 的解析优先级规则与表格内容模型约束，极易引发看似神秘的“行交替”“列偏移”或“空白行插入”等渲染异常——正如问题中所示：仅删除一个外层 <tr>，整个表格布局即发生塌陷。
? 根本原因：HTML 解析器的隐式标签推断（Tag Inference）
HTML 并非严格按 XML 方式逐字解析。根据 WHATWG HTML 规范，<tr> 元素的结束标签可被省略，当且仅当它紧随另一个 <tr> 开始标签之前。此时，解析器会自动插入 </tr>，以确保语法合法性。
观察原始错误代码片段：
<tr><td rowspan="5">Sem2</td></tr> <tr><td>sub4</td></tr> <tr><td>sub5</td></tr> <tr><td>sub6</td></tr>
表面看是 4 行独立数据，但若错误地写成：
立即学习“前端免费学习笔记（深入）”；
<tr><td rowspan="5">Sem2</td></tr> <tr><td>sub4</td></tr> <tr><td>sub5</td></tr> <tr><td>sub6</td></tr>
→ ✅ 正确：每行显式闭合，rowspan="5" 占据当前列第 1–5 行，后续四行该列位置必须留空（不写 <td>），否则将被解析为新列，破坏跨行逻辑。
而问题中实际出现的是更隐蔽的嵌套错误（如 <tr><tr>...</tr></tr>）或缺失关键 </tr>，导致解析器触发以下行为：
当 <tr> 后直接遇到另一个 <tr> 时，自动补全前一个 </tr>，并视其后内容为新行的开始。若此前存在 rowspan="5"，则该“被自动闭合的行”仍计入跨行计数，造成后续单元格错位到右侧新列。
这正是截图中“行交替”的本质：不是 CSS 或显示 bug，而是 DOM 结构已被解析器重写。
✅ 正确结构：语义清晰 + 列数守恒
要使 rowspan 可靠生效，必须同时满足两个硬性条件：
- 每行 <tr> 内的单元格总数（含 colspan 折算）必须一致；
- 被 rowspan 占据的列位置，在后续 n−1 行中绝对不可出现 <td> 或 <th>。
以下为修正后的标准 HTML5 写法（已通过 W3C Nu Validator 验证）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>课程学期表</title>
<style>
table { border-collapse: collapse; width: 100%; margin: 1em 0; }
th, td { border: 1px solid #333; padding: 8px 12px; text-align: center; }
th { background-color: #f0f0f0; font-weight: bold; }
</style>
</head>
<body>
<table>
<thead>
<tr>
<th rowspan="2">院系</th>
<th colspan="3">学期课程</th>
</tr>
<tr>
<th>课程1</th>
<th>课程2</th>
<th>课程3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">计算机学院</td>
<td>算法导论</td>
<td>数据结构</td>
<td>操作系统</td>
</tr>
<tr>
<td>数据库原理</td>
<td>计算机网络</td>
<td>软件工程</td>
</tr>
<tr>
<td>人工智能</td>
<td>机器学习</td>
<td>编译原理</td>
</tr>
<tr>
<td rowspan="2">数学系</td>
<td>高等数学</td>
<td>线性代数</td>
<td>概率统计</td>
</tr>
<tr>
<td>数值分析</td>
<td>离散数学</td>
<td>图论</td>
</tr>
</tbody>
</table>
</body>
</html>✅ 关键要点：
- 使用 <thead> / <tbody> 显式划分语义区域（非可选，是可访问性与打印分页基础）；
- rowspan 单元格所在行，后续行对应列完全留空（无 <td>）；
- 每行 <tr> 中 <td> 总数 = 表头定义的逻辑列数（此处为 4 列：1 列 rowspan + 3 列普通列）；
- 禁止 <tr> 嵌套（<tr><tr>...</tr></tr> 是非法结构，会被解析器强制修复）。
⚠️ 注意事项与最佳实践
- 绝不混用 XHTML 与 HTML5 规则：问题中使用 <?xml ...?> 声明却写 HTML 标签，会导致解析模式冲突。应统一使用 <!DOCTYPE html>。
- 验证优先于肉眼调试：运行 https://www.php.cn/link/33936698133cfff4e8303e4edb690110?doc=...，重点关注 “Bad value … for attribute rowspan” 或 “Table column count mismatch” 类警告。
- 辅助技术依赖语义结构：屏幕阅读器依靠 <thead> 和 <th scope="col"> 理解列关系，rowspan 单元格建议补充 scope="rowgroup" 提升可访问性。
- 复杂表格建议分步构建：先写出无 rowspan/colspan 的骨架表格，确认列数均匀；再逐个添加合并属性，并用浏览器开发者工具 → Elements 面板检查实时 DOM 结构。
掌握 rowspan 的本质——它是逻辑位置预留，而非视觉拉伸——才能写出健壮、可维护、无障碍友好的 HTML 表格。
