HTML表格移除嵌套<tr>标签后布局异常问题求助

问题 #

编写XHTML表格代码时，发现移除包裹Sem2区块的外层嵌套<tr>标签后，表格行布局出现错乱。

原代码（布局正常） #

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1.dtd">
<head>
<title>Test</title>
</head>
<body>
<table style="border-collapse:collapse" border="2">
<tr><td rowspan="20"><b>Department</b></td></tr>
<tr><tr><td rowspan="5">Sem1</td></tr>
<tr><td>sub1</td></tr>
<tr><td>sub2</td></tr>
<tr><td>sub3</td></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></tr>
<tr><tr><td rowspan="5">Sem3</td></tr>
<tr><td>sub7</td></tr>
<tr><td>sub8</td></tr>
<tr><td>sub9</td></tr></tr>
</table>
</body>

原代码实现的正确布局：左侧Department单元格跨行，右侧分为Sem1、Sem2、Sem3三个区块，每个Sem区块占5行，对应科目在Sem单元格右侧依次排列，整体结构整齐。

修改后的代码（布局错乱） #

移除Sem2区块的外层<tr>后，代码片段如下：

<!--tr tag removed--> 
<tr><td rowspan="5">Sem2</td></tr>
<tr><td>sub4</td></tr>
<tr><td>sub5</td></tr>
<tr><td>sub6</td></tr> 
<!--tr tag removed-->

此时布局错乱：Sem2及其科目无法与Sem1、Sem3保持对齐，科目单元格会偏移到Department单元格右侧，破坏原有列结构。

解决方案 #

问题本质 #

原代码中的嵌套<tr>属于不符合XHTML规范的写法，但浏览器的兼容机制会自动修正这种错误，将嵌套的<tr>视为同级行处理，恰好形成了预期布局。移除Sem2的外层<tr>后，浏览器的自动修正逻辑失衡，导致行的列数不匹配，进而引发布局错乱。

规范的修正写法 #

XHTML要求<tr>必须是<table>、<thead>、<tbody>或<tfoot>的直接子元素，禁止嵌套。我们需要重构表格结构，通过正确使用rowspan来实现跨行布局，确保每行的列数一致：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<table style="border-collapse:collapse" border="2">
  <!-- 第一行：Department跨15行，Sem1跨5行，显示sub1 -->
  <tr>
    <td rowspan="15"><b>Department</b></td>
    <td rowspan="5">Sem1</td>
    <td>sub1</td>
  </tr>
  <!-- Sem1剩余科目行 -->
  <tr><td>sub2</td></tr>
  <tr><td>sub3</td></tr>
  <!-- 填充Sem1跨行的空白行 -->
  <tr><td></td></tr>
  <tr><td></td></tr>

  <!-- Sem2区块 -->
  <tr>
    <td rowspan="5">Sem2</td>
    <td>sub4</td>
  </tr>
  <tr><td>sub5</td></tr>
  <tr><td>sub6</td></tr>
  <tr><td></td></tr>
  <tr><td></td></tr>

  <!-- Sem3区块 -->
  <tr>
    <td rowspan="5">Sem3</td>
    <td>sub7</td>
  </tr>
  <tr><td>sub8</td></tr>
  <tr><td>sub9</td></tr>
  <tr><td></td></tr>
  <tr><td></td></tr>
</table>
</body>
</html>

关键说明 #

1. 修正了原代码的两处错误：DOCTYPE中的笔误（~//W3C改为//W3C），添加了XHTML必须的<html>根元素并指定命名空间。
2. 调整Department的rowspan为15（3个Sem各占5行，3×5=15），原代码的20属于错误值。
3. 每个Sem单元格设置rowspan="5"，通过科目行和空白行填满5行，确保每行都有3列（即使部分单元格为空），避免列数不匹配导致的布局错乱。
4. 完全遵循XHTML规范，不再使用嵌套<tr>，后续调整区块时只要保持行的列数一致，布局就不会出现异常。

内容的提问来源于stack exchange，提问作者Adithya Ps