如何合并 HTML 中的表格单元格？

如果你想在 HTML 表格中合并单元格，可以使用 HTML 的 colspan 和 rowspan 属性。合并单元格能够使表格更具可读性，同时也能减少表格中的冗余。

合并单元格的基本语法

合并单元格使用 colspan 和 rowspan 属性。其中 colspan 属性用于指定单元格跨度的列数，而 rowspan 属性则用于指定单元格跨度的行数。

合并横向单元格

<table>
  <tr>
    <td colspan="2">这是合并后的单元格</td>
    <td>这是普通单元格</td>
  </tr>
</table>

在上面的例子中，第一个单元格会跨越两列（colspan="2"），因此它占了后面两个单元格的位置。

合并纵向单元格

<table>
  <tr>
    <td rowspan="2">这是合并后的单元格</td>
    <td>这是普通单元格</td>
    <td>这是普通单元格</td>
  </tr>
  <tr>
    <td>这是普通单元格</td>
    <td>这是普通单元格</td>
  </tr>
</table>

在上面的例子中，第一个单元格会跨越两行（rowspan="2"），因此它占了下面所有单元格的位置。

合并多个单元格

如果你想合并多个单元格，可以使用 colspan 和 rowspan 属性结合起来使用。例如：

<table>
  <tr>
    <td rowspan="2">这是合并后的单元格</td>
    <td colspan="2">这是横跨两列的单元格</td>
  </tr>
  <tr>
    <td>这是普通单元格</td>
    <td>这是普通单元格</td>
  </tr>
</table>

在上面的例子中，第一个单元格会跨越两行（rowspan="2"），第二个单元格会跨越两列（colspan="2"），因此它占了下面三个单元格的位置。

总结

合并单元格能够使表格更具可读性，同时也能减少表格中的冗余。使用 colspan 和 rowspan 属性能够实现单元格的合并，同时也能够合并多个单元格。