快捷導(dǎo)航

CSS樣式化美化網(wǎng)頁(yè)table表格指南

更新時(shí)間：2024年09月07日 10:25:52 作者：一條曬干的咸魚(yú)

在網(wǎng)頁(yè)設(shè)計(jì)中,表格是展示數(shù)據(jù)不可少的元素,通過(guò)CSS,我們可以對(duì)表格進(jìn)行美化和功能性強(qiáng)化,如設(shè)置邊框、背景色、文本對(duì)齊和響應(yīng)式布局等,以增強(qiáng)用戶體驗(yàn)和數(shù)據(jù)的可讀性,這不僅使表格結(jié)構(gòu)化數(shù)據(jù)展示更加美觀,還提升了實(shí)用性

表格是網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的元素，用于展示數(shù)據(jù)和信息。通過(guò)CSS可以對(duì)表格進(jìn)行美化和功能性強(qiáng)化，包括設(shè)置邊框、背景色、文本對(duì)齊以及響應(yīng)式布局等，進(jìn)一步提升用戶體驗(yàn)和數(shù)據(jù)可讀性。尤其是在展示數(shù)據(jù)和信息時(shí)。盡管HTML表格提供了結(jié)構(gòu)化的數(shù)據(jù)展示，但要使其看起來(lái)既美觀又實(shí)用，CSS 樣式化至關(guān)重要。

一、典型的 HTML 表格

在了解如何樣式化表格之前，我們首先來(lái)看看一個(gè)典型的 HTML 表格結(jié)構(gòu)。一個(gè)基本的 HTML 表格由 <table>、<thead>、<tbody> 和 <tfoot> 元素組成，分別用于定義表格、表頭、表體和表腳。表格中的每一行由 <tr> 定義，而每一列由 <td>（數(shù)據(jù)單元格）或 <th>（表頭單元格）定義。

示例: 基本 HTML 表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基礎(chǔ) HTML 表格</title>
</head>
<body>
    <h1>員工信息表</h1>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>職位</th>
                <th>部門</th>
                <th>薪資</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>張三</td>
                <td>開(kāi)發(fā)工程師</td>
                <td>技術(shù)部</td>
                <td>￥8000</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>設(shè)計(jì)師</td>
                <td>設(shè)計(jì)部</td>
                <td>￥7000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">數(shù)據(jù)來(lái)源：公司人力資源部</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

上述例子中創(chuàng)建了一個(gè)簡(jiǎn)單的員工信息表，包含了表頭、表體和表腳，表頭定義了表格的列名，表體包含了實(shí)際的數(shù)據(jù)行，而表腳提供了額外的信息或說(shuō)明。

二、樣式化我們的表格

1、基本樣式

為了讓表格看起來(lái)更加美觀，我們可以使用 CSS 來(lái)設(shè)置表格的邊框、背景色、文本對(duì)齊方式等基本樣式。

示例: 基本表格樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>樣式化表格</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse; /* 合并表格邊框 */
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #e2e2e2;
        }
    </style>
</head>
<body>
    <h1>樣式化表格示例</h1>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>職位</th>
                <th>部門</th>
                <th>薪資</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>張三</td>
                <td>開(kāi)發(fā)工程師</td>
                <td>技術(shù)部</td>
                <td>￥8000</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>設(shè)計(jì)師</td>
                <td>設(shè)計(jì)部</td>
                <td>￥7000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">數(shù)據(jù)來(lái)源：公司人力資源部</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

我們對(duì)表格應(yīng)用了一些基本的樣式：邊框、內(nèi)邊距、背景顏色和交替行的背景色，另外還添加了懸停效果，以便在用戶將鼠標(biāo)懸停在行上時(shí)，背景色會(huì)有所變化。

2、間距和布局

控制表格的間距和布局是確保表格在不同屏幕上顯示良好的關(guān)鍵?？梢允褂?CSS 的 padding 和 margin 屬性來(lái)調(diào)整間距，使用 border-spacing 屬性來(lái)設(shè)置單元格之間的間距。

示例: 調(diào)整表格間距和布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格間距和布局</title>
    <style>
        table {
            width: 80%;
            margin: 20px auto; /* 自動(dòng)居中 */
            border-spacing: 0; /* 單元格之間的間距 */
        }

        th, td {
            border: 1px solid #ddd;
            padding: 12px; /* 單元格內(nèi)邊距 */
        }

        th {
            background-color: #4CAF50;
            color: white;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <h1>表格間距和布局示例</h1>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>職位</th>
                <th>部門</th>
                <th>薪資</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>張三</td>
                <td>開(kāi)發(fā)工程師</td>
                <td>技術(shù)部</td>
                <td>￥8000</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>設(shè)計(jì)師</td>
                <td>設(shè)計(jì)部</td>
                <td>￥7000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">數(shù)據(jù)來(lái)源：公司人力資源部</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

這個(gè)例子設(shè)置表格的寬度為頁(yè)面寬度的 80%，并將表格居中顯示，使用 border-spacing 屬性來(lái)調(diào)整單元格之間的間距，并增加了單元格的內(nèi)邊距，使得內(nèi)容更為舒適易讀。

三、簡(jiǎn)單的排版

1、字體和文本對(duì)齊

通過(guò) CSS，我們可以控制表格中的字體和文本對(duì)齊方式，使其符合設(shè)計(jì)需求。

示例: 表格排版樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格排版樣式</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            font-family: Arial, sans-serif; /* 字體 */
        }

        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center; /* 中央對(duì)齊 */
        }

        th {
            background-color: #2196F3;
            color: white;
            font-weight: bold; /* 加粗 */
        }

        td {
            color: #555;
        }
    </style>
</head>
<body>
    <h1>表格排版樣式示例</h1>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>職位</th>
                <th>部門</th>
                <th>薪資</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>張三</td>
                <td>開(kāi)發(fā)工程師</td>
                <td>技術(shù)部</td>
                <td>￥8000</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>設(shè)計(jì)師</td>
                <td>設(shè)計(jì)部</td>
                <td>￥7000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">數(shù)據(jù)來(lái)源：公司人力資源部</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

CSS 樣式化表格——WEB開(kāi)發(fā)系列24_html_02

示例中我們?cè)O(shè)置了字體樣式為 Arial，并將單元格中的文本居中對(duì)齊，表頭使用了更為顯眼的顏色和加粗字體，使其更加突出。

2、顏色樣式

顏色不僅可以提升表格的視覺(jué)效果，還可以幫助突出關(guān)鍵信息。使用 CSS 可以輕松地為表格添加背景色、邊框顏色等樣式。

示例: 表格顏色樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格顏色樣式</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 2px solid #4CAF50;
            padding: 10px;
            text-align: left;
        }

        th {
            background-color: #4CAF50;
            color: white;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        tr:nth-child(odd) {
            background-color: #ffffff;
        }

        tr:hover {
            background-color: #d1e7dd;
        }
    </style>
</head>
<body>
    <h1>表格顏色樣式示例</h1>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>職位</th>
                <th>部門</th>
                <th>薪資</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>張三</td>
                <td>開(kāi)發(fā)工程師</td>
                <td>技術(shù)部</td>
                <td>￥8000</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>設(shè)計(jì)師</td>
                <td>設(shè)計(jì)部</td>
                <td>￥7000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">數(shù)據(jù)來(lái)源：公司人力資源部</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

CSS 樣式化表格——WEB開(kāi)發(fā)系列24_html_06

示例中我們使用了不同的背景顏色來(lái)區(qū)分奇數(shù)行和偶數(shù)行，同時(shí)設(shè)置了懸停效果的背景顏色，使得用戶在瀏覽時(shí)更容易閱讀和辨別數(shù)據(jù)。

四、綜合練習(xí)題

下面我們自己動(dòng)手來(lái)練習(xí)一下以下的兩道題目吧：

題 1: 創(chuàng)建一個(gè)自定義的產(chǎn)品表格

要求：

創(chuàng)建一個(gè)產(chǎn)品表格，包含以下列：產(chǎn)品名、類別、價(jià)格和庫(kù)存。
使用 CSS 樣式化表格，確保表頭使用醒目的顏色，表體交替行有不同的背景色，并添加懸停效果。
添加一個(gè)“總計(jì)”行，在表腳部分顯示總產(chǎn)品數(shù)和庫(kù)存總數(shù)。

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>產(chǎn)品表格</title>
    <style>
        table {
            width: 90%;
            margin: 20px auto;
            border-collapse: collapse;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        th, td {
            border: 1px solid #ccc;
            padding: 12px;
            text-align: left;
        }

        th {
            background-color: #ff5722;
            color: white;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #e0e0e0;
        }

        tfoot {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>產(chǎn)品信息表</h1>
    <table>
        <thead>
            <tr>
                <th>產(chǎn)品名</th>
                <th>類別</th>
                <th>價(jià)格</th>
                <th>庫(kù)存</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>筆記本</td>
                <td>電子產(chǎn)品</td>
                <td>￥500</td>
                <td>50</td>
            </tr>
            <tr>
                <td>智能手機(jī)</td>
                <td>電子產(chǎn)品</td>
                <td>￥3000</td>
                <td>20</td>
            </tr>
            <!-- 添加更多產(chǎn)品行 -->
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">總計(jì)</td>
                <td>70</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

題 2: 設(shè)計(jì)一個(gè)學(xué)生成績(jī)表格

要求：

創(chuàng)建一個(gè)學(xué)生成績(jī)表格，包含以下列：學(xué)生姓名、科目、成績(jī)。
使用 CSS 樣式化表格，使表頭具有背景色和白色文本，所有單元格的文本居中對(duì)齊，表格寬度設(shè)置為 100%。
添加一個(gè)行樣式，當(dāng)成績(jī)低于 60 時(shí)，該行背景色為紅色；當(dāng)成績(jī)?cè)?60 到 80 之間時(shí)，背景色為黃色；當(dāng)成績(jī)?cè)?80 以上時(shí)，背景色為綠色。

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>學(xué)生成績(jī)表</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            font-family: 'Arial', sans-serif;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }

        th {
            background-color: #2196F3;
            color: white;
        }

        .low {
            background-color: #ffcccc;
        }

        .medium {
            background-color: #ffffcc;
        }

        .high {
            background-color: #ccffcc;
        }
    </style>
</head>
<body>
    <h1>學(xué)生成績(jī)表</h1>
    <table>
        <thead>
            <tr>
                <th>學(xué)生姓名</th>
                <th>科目</th>
                <th>成績(jī)</th>
            </tr>
        </thead>
        <tbody>
            <tr class="low">
                <td>王五</td>
                <td>數(shù)學(xué)</td>
                <td>45</td>
            </tr>
            <tr class="medium">
                <td>趙六</td>
                <td>英語(yǔ)</td>
                <td>75</td>
            </tr>
            <tr class="high">
                <td>孫七</td>
                <td>物理</td>
                <td>90</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

總結(jié)

在網(wǎng)頁(yè)設(shè)計(jì)中,表格是展示數(shù)據(jù)不可少的元素,通過(guò)CSS,我們可以對(duì)表格進(jìn)行美化和功能性強(qiáng)化,如設(shè)置邊框、背景色、文本對(duì)齊和響應(yīng)式布局等,以增強(qiáng)用戶體驗(yàn)和數(shù)據(jù)的可讀性,這不僅使表格結(jié)構(gòu)化數(shù)據(jù)展示更加美觀,還提升了實(shí)用性

到此這篇關(guān)于CSS樣式化美化網(wǎng)頁(yè)table表格指南的文章就介紹到這了,更多相關(guān)CSS樣式化表格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: