CSS Table

2025年3月26日 | 阅读 2 分钟

我们可以为 HTML 表格应用样式，以获得更好的外观和感觉。有一些 CSS 属性在设计 CSS 表格时被广泛使用。

border
border-collapse
padding
宽度
高度
text-align
color
background-color

CSS 表格边框

我们可以使用 CSS border 属性为 table、th 和 td 标签设置边框。

<style>
table, th, td {
    border: 1px solid black;
}
</style>

立即测试

输出

名字	姓氏	分数
Sonoo	Jaiswal	60
James	威廉	80
Swati	Sironi	82
Chetna	Singh	72

CSS 表格边框合并

通过 border-collapse 属性，我们可以将所有边框合并为一个边框。

<style>
table, th, td {
    border: 2px solid black;
    border-collapse: collapse;
}
</style>

输出

名称	姓	分数
Sonoo	Jaiswal	60
James	威廉	80
Swati	Sironi	82
Chetna	Singh	72

CSS 表格内边距

我们可以使用 CSS padding 属性为表格标题和表格数据指定内边距。

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 10px;
}
</style>

输出

名称	姓	分数
Sonoo	Jaiswal	60
James	威廉	80
Swati	Sironi	82
Chetna	Singh	72

CSS 表格：样式奇偶单元格

为了获得更好的外观和感觉，我们可以为奇偶表格单元格设置样式。在此代码中，我们在奇偶单元格上显示不同的背景颜色。此外，我们还更改了 <th> 标签的 background-color 和 color。

CSS 代码

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 10px;
}
table#alter tr:nth-child(even) {
    background-color: #eee;
}
table#alter tr:nth-child(odd) {
    background-color: #fff;
}
table#alter th {
    color: white;
    background-color: gray;
}
</style>

输出