CSS表格table

本文概述

• CSS表格边框
• CSS表格边框折叠
• CSS表格填充
• CSS表：样式为偶数和奇数单元格

我们可以将样式应用于HTML表格, 以获得更好的外观。有一些CSS属性在使用CSS设计表中被广泛使用：

• 边境
• 边界崩溃
• 填充
• 宽度
• 高度
• 文字对齐
• 颜色
• 背景颜色

CSS表格边框

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

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

输出：

CSS表格边框折叠

通过border-collapse属性的帮助, 我们只能将所有边界折叠到一个边界中。

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

输出：

CSS表格填充

我们可以使用CSS padding属性为表头和表数据指定填充。

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

输出：

CSS表：样式为偶数和奇数单元格

我们可以设置偶数和奇数表单元格的样式, 以获得更好的外观。在这段代码中, 我们在偶数和奇数单元格上显示不同的背景颜色。此外, 我们更改了<th>标签的背景颜色和颜色。

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>

输出：