html表格合并

作者：尛丸子的天真▍我学不会゜发布日期:2026-05-20 浏览:90

<!DOCTYPE html>
<html>
<head>
    <title>HTML 表格合并示例</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 5px;
        }
    </style>
</head>
<body>

<h2>HTML 表格合并示例</h2>

<p>使用 <code>colspan</code> 和 <code>rowspan</code> 属性可以合并单元格。</p>

<table>
    <tr>
        <th colspan="2">这是两个合并的列</th>
        <th>普通列</th>
    </tr>
    <tr>
        <td rowspan="2">这是两个合并的行</td>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
    <tr>
        <td>数据3</td>
        <td>数据4</td>
    </tr>
</table>

</body>
</html>

解释说明：

colspan 属性：用于指定一个单元格应跨越的列数。例如，<th colspan="2"> 表示该单元格将跨越两列。
rowspan 属性：用于指定一个单元格应跨越的行数。例如，<td rowspan="2"> 表示该单元格将跨越两行。

通过这两个属性，你可以灵活地合并表格中的单元格，以适应不同的布局需求。

上一篇：html基本标签大全

下一篇：html链接