html表格边框

作者：暗夜幽殤发布日期:2025-03-18 浏览:100

<!DOCTYPE html>
<html>
<head>
    <title>HTML 表格边框示例</title>
    <style>
        /* 设置表格边框样式 */
        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 表格边框示例</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>

解释说明：

HTML 结构:
- 使用 <table> 标签创建表格。
- 表头使用 <th> 标签，表格数据使用 <td> 标签。
- 每一行使用 <tr> 标签。
CSS 样式:
- border-collapse: collapse;：合并表格单元格的边框，使边框看起来更整洁。
- border: 1px solid black;：为每个单元格设置 1 像素宽的实线黑色边框。
- padding: 8px;：为单元格内容和边框之间添加 8 像素的内边距。
- text-align: left;：将文本左对齐。
- background-color: #f2f2f2;：为表头单元格设置浅灰色背景。

上一篇：html5 audio

下一篇：html实体