CSS 合并HTML表格中的单元格

在本文中，我们将介绍如何使用CSS合并HTML表格中的单元格。合并单元格可以使表格更加简洁和易读，同时还能提供更好的可视化效果。

阅读更多：CSS 教程

1. 合并行

要合并HTML表格中的行，可以使用rowspan属性。rowspan属性定义了单元格跨越的行数。

下面是一个示例，演示了如何合并两行单元格：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td rowspan="2">张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>27</td>
    <td>女</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>男</td>
  </tr>
</table>

在上面的示例中，第一行的<td>元素使用了rowspan="2"，表示该单元格跨越了两行。因此，“张三”单元格被合并在一起，显示在两个子表格的上方。

2. 合并列

要合并HTML表格中的列，可以使用colspan属性。colspan属性定义了单元格跨越的列数。

下面是一个示例，演示了如何合并两列单元格：

<table>
  <tr>
    <th>姓名</th>
    <th colspan="2">信息</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>男</td>
    <td>25</td>
    <td>27</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>男</td>
    <td>30</td>
    <td>32</td>
  </tr>
</table>

在上面的示例中，第一行的第二个<th>元素使用了colspan="2"，表示该单元格跨越了两列。因此，“信息”单元格被合并在一起，显示在两个子表格的中间。

3. 合并行和列

除了合并行和列，还可以同时合并行和列，以创建更复杂的表格布局。为此，可以同时使用rowspan和colspan属性。

下面是一个示例，演示了如何合并行和列：

<table>
  <tr>
    <th>姓名</th>
    <th colspan="2">信息</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td rowspan="2">张三</td>
    <td>男</td>
    <td>25</td>
    <td rowspan="2">27</td>
  </tr>
  <tr>
    <td>女</td>
    <td>28</td>
  </tr>
  <tr>
    <td>李四</td>
    <td colspan="2">30</td>
    <td>32</td>
  </tr>
</table>

在上面的示例中，表格中的第一列和第四列都分别合并了两行单元格，同时第二列合并了两列单元格。这样可以创建出更加复杂和灵活的表格布局。