表格 CSS使用 CSS 创建漂亮的 HTML 表格

让您的 HTML 表格看起来很棒很容易 - 在今天的帖子中，我们将看看大约 30 行 CSS 来实现这一点！

视频教程

在我开始之前，如果您更喜欢视频形式的教程，您可以在下面的我的 YouTube 频道dcode上观看。

编写 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;
}

以及表格行...

为此，我们想做三件事：

为每行添加底部边框以便分隔
每隔一行添加一个较浅的背景以提高可读性
在最后一行添加深色边框以表示表格的结束



.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

文章来源：https://dev.to/dcodeyt/creating-beautiful-html-tables-with-css-428l

表格 CSS 使用 CSS 创建漂亮的 HTML 表格