如何用HTML制作含colspan、rowspan及CSS宽高的目标表格？

你的代码结构逻辑没问题，但缺少必要的CSS控制，加上浏览器默认的表格布局会自动调整单元格尺寸，导致显示偏差。以下是无需辅助单元格的正确实现：

<style>
/* 合并边框，消除单元格间隙 */
table {
  border-collapse: collapse;
  /* 设置表格整体宽高，保证布局稳定 */
  width: 360px;
  height: 240px;
}

td {
  border: 1px solid #000;
  text-align: center;
  /* 固定列宽，避免列尺寸被内容拉扯 */
  width: 120px;
}
</style>

<table>
  <tr>
    <td rowspan="2">A</td>
    <td rowspan="2">B</td>
    <td>C</td>
  </tr>
  <tr>
    <td rowspan="2">F</td>
  </tr>
  <tr>
    <td rowspan="2">D</td>
    <td>E</td>
  </tr>
  <tr>
    <td colspan="2">G</td>
  </tr>
</table>

• 结构逻辑：表格每一行的虚拟列数保持一致（3列），通过rowspan和colspan实现单元格跨行列，完全不需要辅助单元格。
• CSS控制：
  • border-collapse: collapse让单元格边框紧密贴合，消除默认间隙；
  • 固定表格整体宽高和列宽，避免浏览器根据内容自动调整尺寸，导致布局错位；
  • 单元格内居中对齐，让视觉效果更贴合目标样式。

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