CSS表格（table）

111752 閱讀 0 評論 0 點贊

在網(wǎng)頁中我們通常使用表格來展示一些數(shù)據(jù)，例如成績表、財務(wù)報表等，但是默認情況下表格的樣式并不美觀，甚至不符合頁面的風格。CSS 中提供了一些屬性，通過這些屬性您可以修改表格的樣式，大大改善表格的外觀。

1. HTML表格邊框

在HTML教程部分，我們曾經(jīng)使用border屬性設(shè)定表格，代碼如下：

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

運行結(jié)果：

HTML表格邊框

其實這種方式，是不推薦使用的。因為網(wǎng)頁設(shè)計遵循的原則，還是HTML表示內(nèi)容，而CSS進行樣式描述。

對于表格來說，表格的內(nèi)容就是行列里的文字，而邊框?qū)儆趯Ρ砀裢庥^的美化，屬于樣式部分，所以更適合用CSS描述。

2. CSS設(shè)定表格邊框

可以利用CSS的border來為表格設(shè)定邊框，代碼如下：

<!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>

運行結(jié)果如下：

CSS設(shè)定表格邊框