HTML 合并单元格

在 HTML 中，有些时候需要对表格进行合并单元格。其中，合并单元格分为以下 2 种情况。

合并行单元格。
合并列单元格。

HTML 合并 “行单元格”

在 HTML 中，我们可以使用 rowspan 属性来合并行单元格。所谓的合并行单元格，指的是将 “纵向的 n 个单元格（td 或 th）” 进行合并。

语法：

<td rowspan="跨越的行数"></td>

说明：

rowspan，指的是 “row span”。

示例 1：HTML 合并行

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML合并行</title>
    <style>
        table, tr, td { border:1px solid silver; }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>姓名：</td>
            <td>小明</td>
        </tr>
        <tr>
            <td rowspan="2">喜欢：</td>
            <td>苹果</td>
        </tr>
        <tr>
            <td>香蕉</td>
        </tr>
    </table>
</body>
</html>

页面效果如下图所示。

HTML表格使用rowspan

分析：

对于上面例子来说，如果我们将 rowspan="2" 删除后，此时页面效果就变成如下图所示了。

HTML表格不使用rowspan

所谓的合并行，其实就是将表格相邻的 N 个行合并。在这个例子中，rowspan="2" 实际上是让加上 rowspan 属性的这个 td 标签跨越 2 行。

此外还有一点要注意的，设置了 rowspan="2" 之后，下一行就应该只使用 1 个 td，而不应该使用 2 个 td。

<!--正确-->
<tr>
    <td rowspan="2">喜欢：</td>
    <td>苹果</td>
</tr>
<tr>
    <td>香蕉</td>
</tr>

<!--错误-->
<tr>
    <td rowspan="2">喜欢：</td>
    <td>苹果</td>
</tr>
<tr>
    <td>香蕉</td>
    <td></td>
</tr>

HTML 合并 “列单元格”

在 HTML 中，我们可以使用 colspan 属性来合并列单元格。所谓的合并列单元格，指的是将 “横向的 n 个单元格” 进行合并。

语法：

<td colspan="跨越的列数"></td>

说明：

colspan，指的是 “column span”。

示例 2：HTML 合并列

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML合并列</title>
    <style>
        table, tr, td { border:1px solid silver; }
    </style>
</head>
<body>
    <table>
        <tr>
            <td colspan="2">前端技术</td>
        </tr>
        <tr>
            <td>HTML</td>
            <td>CSS</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>Vue</td>
        </tr>
    </table>
</body>
</html>

页面效果如下图所示。

HTML表格使用cellspan

分析：

对于上面例子来说，如果我们把 colspan="2" 删除后，此时页面效果就变成如下图所示了。

HTML表格不使用cellspan

提示: rowspan 和 colspan 属性同样适用于 th 标签。在复杂表头中（如多级表头），合并 th 也是非常常见的。