html table 边框

作者：望断天涯发布日期:2026-01-24 浏览:23

<!DOCTYPE html>
<html>
<head>
    <title>HTML Table 边框示例</title>
    <style>
        /* 设置表格边框样式 */
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse; /* 合并单元格边框 */
        }
        th, td {
            padding: 10px; /* 单元格内边距 */
        }
    </style>
</head>
<body>

<h2>带有边框的 HTML 表格</h2>

<table>
    <tr>
        <th>表头 1</th>
        <th>表头 2</th>
        <th>表头 3</th>
    </tr>
    <tr>
        <td>行 1, 列 1</td>
        <td>行 1, 列 2</td>
        <td>行 1, 列 3</td>
    </tr>
    <tr>
        <td>行 2, 列 1</td>
        <td>行 2, 列 2</td>
        <td>行 2, 列 3</td>
    </tr>
</table>

</body>
</html>

解释说明：

<table> 标签用于定义 HTML 表格。
border 属性为表格和单元格添加了黑色的边框。
border-collapse: collapse; 使相邻的单元格边框合并成一条线，避免出现双线效果。
padding 属性为单元格内容和边框之间增加了间距，使表格更易读。

上一篇：html圆角

下一篇：html 缩进