HTML表格td垂直堆叠疑问：为何需分两行放置Jupiter与Saturn？

首先得搞明白HTML表格的核心逻辑：表格是按行（<tr>）逐行构建的，每一行的单元格（<td>/<th>）是水平排列的，整个表格的布局本质是一个行对齐的网格。

你代码里的rowspan="2"是关键——它让"Gas Giants"这个单元格跨越了2行的高度，相当于它“占据”了两行的位置。那对应的，旁边要放Jupiter和Saturn的列，必须分成两行来填充：

• 第一行里，"Jovian Planets"、"Gas Giants"、"Jupiter"三个单元格组成完整的一行；
• 第二行里，因为"Gas Giants"已经占了这一行的位置，只需要补充"Saturn"这个单元格，就能和第一行的"Jupiter"在同一列上垂直对齐，形成你要的堆叠效果。

如果把Jupiter和Saturn放在同一行的两个<td>里，那这一行就会有4个单元格（<th>Jovian Planets</th>、<td rowspan="2">Gas Giants</td>、<td>Jupiter</td>、<td>Saturn</td>），而第二行没有对应的单元格，表格的网格结构直接乱掉——这俩行星会变成水平排列在同一行，根本达不到垂直堆叠的效果。

举个错误写法的例子，你就能直观看到问题：

<!-- 错误写法：同一行放两个行星，结果是横向排列 -->
<table>
  <tr>
    <th>Jovian Planets</th>
    <td rowspan="2">Gas Giants</td>
    <td class="names">Jupiter</td>
    <td class="names">Saturn</td>
  </tr>
  <tr></tr>
</table>

简单说，HTML表格的垂直堆叠依赖行的拆分，用rowspan让相邻单元格跨多行，再在对应行补充单元格，才能形成列方向的垂直排列。

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