html table合并单元格

作者：Haggard憔悴发布日期:2025-05-12 浏览:97

<!DOCTYPE html>
<html>
<head>
    <title>HTML Table 合并单元格示例</title>
</head>
<body>
    <h2>合并单元格示例</h2>
    <table border="1">
        <tr>
            <th rowspan="2">姓名</th>
            <th colspan="2">联系方式</th>
        </tr>
        <tr>
            <th>电话</th>
            <th>邮箱</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>123456789</td>
            <td>zhangsan@example.com</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>987654321</td>
            <td>lisi@example.com</td>
        </tr>
    </table>
</body>
</html>

解释说明：

rowspan="2"：表示该单元格将跨越两行。在上面的例子中，“姓名”这一列的表头跨越了两行。
colspan="2"：表示该单元格将跨越两列。在上面的例子中，“联系方式”这一列的表头跨越了两列，分别是“电话”和“邮箱”。

通过使用rowspan和colspan属性，可以方便地实现表格中单元格的合并。

上一篇：在线生成html

下一篇：htmlcss网页设计代码作业