如何用rowspan实现指定表格？f单元格需合并两行位于b、g左侧中间

你的核心问题是表格行结构的列数匹配错误，导致浏览器自动补全单元格后布局错位。要实现f单元格跨两行并位于b和g的左侧中间位置，需要修正HTML的行结构，确保每行的虚拟列数一致，同时调整CSS的垂直对齐属性。

修正后的代码 #

CSS 调整

table, td {
    border:2px solid black;
    border-collapse: collapse;
}

td{
    height: 50px; /* 增大高度便于查看垂直对齐效果，可按需调整 */
    width: 200px;
    vertical-align: top;
    line-height: 25px;
}

td.a{
    text-align: center;
    vertical-align: top;
}

td.b{
    text-align: left;
    vertical-align: middle; /* 改为middle让f在跨行空间内垂直居中 */
}

td.c{
    text-align: left;
    vertical-align: middle
}

HTML 修正

<table align="center">
  <tr>
      <td>a</td>
      <td class="a" rowspan="3">b</td>
      <td>c</td>
  </tr>
  <tr>
      <td>d</td>
      <td class="c" rowspan="3">e</td>
  </tr>
  <tr>
      <td class="b" rowspan="2">f</td>
  </tr>
  <tr>
      <td class="a" rowspan="2">g</td>
  </tr>
  <tr>
      <td>h</td>
      <td>i</td>
  </tr>
</table>

关键调整说明 #

1. 行结构对齐：利用rowspan属性让单元格跨越多行时，后续行无需重复编写被覆盖的列，浏览器会自动识别布局位置，确保每行虚拟列数一致，避免错位。
2. 垂直对齐修正：将td.b的vertical-align从bottom改为middle，让f单元格在跨两行的空间内垂直居中，正好处于b（上三行）和g（下两行）的左侧中间位置。
3. 单元格高度优化：增大td的height值能更直观展示跨行和对齐效果，你可以根据实际需求调整回合适高度。

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