表格边框css

表格边框css

基础概念

表格边框（Table Border）是指在HTML表格中用于分隔单元格和行的线条。CSS（层叠样式表）提供了多种属性来控制表格边框的样式、宽度和颜色。

类型

单边框：只设置表格的单条边框。
双边框：设置表格的双重边框，通常用于强调某些部分。
虚线边框：使用虚线样式来表示边框，常用于分隔或提示。
点线边框：使用点状线条来表示边框，常用于表格的某些特殊部分。

应用场景

数据展示：在数据表格中，边框可以帮助用户更好地区分不同的单元格和行。
表单设计：在表单设计中，边框可以用来突出表单元素，提高用户体验。
布局设计：在页面布局中，边框可以用来分隔不同的区域或模块。

示例代码

以下是一个简单的示例，展示如何使用CSS设置表格边框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Border Example</title>
    <style>
        table {
            border-collapse: collapse; /* 合并边框 */
            width: 100%;
        }
        th, td {
            border: 1px solid #ddd; /* 设置边框样式 */
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
            </tr>
            <tr>
                <td>Data 4</td>
                <td>Data 5</td>
                <td>Data 6</td>
            </tr>
        </tbody>
    </table>
</body>
</html>