htmltable边框线怎么设置

作者：⒈种依靠゛ζ 发布日期:2025-11-30 浏览:57

<!DOCTYPE html>
<html>
<head>
    <title>HTML Table 边框线设置示例</title>
    <style>
        /* 设置表格边框 */
        table {
            border-collapse: collapse; /* 合并边框，使表格边框更加紧凑 */
            width: 100%; /* 表格宽度 */
        }

        /* 设置单元格边框 */
        table, th, td {
            border: 1px solid black; /* 设置边框为1像素的黑色实线 */
        }

        /* 设置表头和单元格的内边距 */
        th, td {
            padding: 8px; /* 内边距，使内容与边框之间有间距 */
            text-align: left; /* 文本左对齐 */
        }
    </style>
</head>
<body>

<h2>HTML Table 边框线设置示例</h2>

<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
        <td>数据3</td>
    </tr>
    <tr>
        <td>数据4</td>
        <td>数据5</td>
        <td>数据6</td>
    </tr>
</table>

</body>
</html>

解释说明：

border-collapse: collapse;：此属性用于合并表格中的相邻边框，使表格看起来更加紧凑。
border: 1px solid black;：此属性为表格、表头 (th) 和单元格 (td) 设置了1像素宽的黑色实线边框。
padding: 8px;：此属性为表头和单元格设置了8像素的内边距，使内容与边框之间有一定的间距，避免内容紧贴边框。
text-align: left;：此属性将表头和单元格中的文本左对齐。

通过这些样式，您可以轻松地为 HTML 表格添加边框线，并根据需要调整其外观。

上一篇：html字体居中

下一篇：html文字加粗