原文出處:https://dev.to/dcodeyt/creating-beautiful-html-tables-with-css-428l

讓您的 HTML 表格看起來很棒很容易 - 在今天的帖子中,我們將看看大約 30 行 CSS 來做到這一點!

https://www.youtube.com/watch?v=biI9OFH6Nmg

寫 HTML

讓我們為該表編寫一些樣板 HTML 程式碼。

<table class="styled-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Points</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dom</td>
            <td>6000</td>
        </tr>
        <tr class="active-row">
            <td>Melissa</td>
            <td>5150</td>
        </tr>
        <!-- and so on... -->
    </tbody>
</table>

請注意,我們有兩個類別:

  • .styled-table 這樣我們就不會竄改網站上的每個 <table>

  • .active-row 將是「活動」行 - 這個類別用於突出顯示特定行並將獲得它自己的 CSS,我們很快就會看到

表格樣式

讓我們先定位主要的「<table>」元素:

.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

其中大部分都是不言自明的,但讓我們來看看主要的:

  • box-shadow 在桌子周圍加入微妙的透明陰影

  • border-collapse 確保單元格邊框之間沒有空格

設定標題樣式

對於標題,我們可以簡單地更改背景顏色並對文字應用一些基本樣式:

.styled-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}

移至表格儲存格

讓我們把事情分開一點:

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

以及表格行...

為此,我們要做三件事:

  1. 為每行新增下邊框進行分隔

  2. 每隔一行新增淺色背景以提高可讀性

  3. 在最後一行加上深色邊框以表示表格的結尾

.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}

最後,讓活動行看起來有所不同

為此,我們只需對文字進行更改:

.styled-table tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}

就是這樣! 如果您有任何改進建議,請在下面的回覆中告訴我 😁

立即報名👉 JavaScript DOM 速成課程

如果您正在學習 Web 開發,您可以在下面的連結中找到有關 JavaScript DOM 的完整課程👇

https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

課程縮圖


共有 0 則留言