html table border

作者：青灯寂焚发布日期:2025-06-04 浏览:100

<!DOCTYPE html>
<html>
<head>
    <title>HTML Table Border Example</title>
    <style>
        /* 使用 CSS 设置表格边框样式 */
        table {
            border-collapse: collapse; /* 合并单元格边框 */
            width: 100%;
        }
        th, td {
            border: 1px solid black; /* 设置单元格边框为 1 像素的黑色实线 */
            padding: 8px; /* 单元格内填充 */
            text-align: left; /* 文本左对齐 */
        }
        th {
            background-color: #f2f2f2; /* 表头背景颜色 */
        }
    </style>
</head>
<body>

<h2>HTML Table with Border</h2>

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
        <td>Row 2, Cell 3</td>
    </tr>
</table>

</body>
</html>

解释说明：

HTML 结构：使用了标准的 HTML 表格结构 (<table>, <tr>, <th>, <td>) 来创建一个简单的表格。
CSS 样式：通过 CSS 设置了表格的边框样式，border-collapse: collapse; 使得表格的边框合并在一起，避免双线边框。每个单元格 (th 和 td) 都有 1 像素的黑色边框，并且设置了内边距和文本对齐方式。
表头样式：表头 (th) 背景颜色设置为浅灰色 (#f2f2f2)，以区分普通单元格。

这个示例展示了如何使用 HTML 和 CSS 创建一个带有边框的表格。

上一篇：html