CSS表格（table）

111676 阅读 0 评论 0 点赞

在网页中我们通常使用表格来展示一些数据，例如成绩表、财务报表等，但是默认情况下表格的样式并不美观，甚至不符合页面的风格。CSS 中提供了一些属性，通过这些属性您可以修改表格的样式，大大改善表格的外观。

1. HTML表格边框

在HTML教程部分，我们曾经使用border属性设定表格，代码如下：

<table border="1">
        <thead>
            <th>姓名</th>
            <th>性别</th>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
            </tr>
        </tbody>
    </table>

运行结果：

HTML表格边框

其实这种方式，是不推荐使用的。因为网页设计遵循的原则，还是HTML表示内容，而CSS进行样式描述。

对于表格来说，表格的内容就是行列里的文字，而边框属于对表格外观的美化，属于样式部分，所以更适合用CSS描述。

2. CSS设定表格边框

可以利用CSS的border来为表格设定边框，代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            float: left;
        }
        .table_one {
            border-collapse: separate;
        }
        .table_two {
            margin-left: 20px;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table class="table_one" border="1">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
    <table class="table_two" border="1px">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
</body>
</html>

运行结果如下：

CSS设定表格边框