CSS表格table CSStable|CSS2

本文概述

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

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

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

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

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

输出：

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

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

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

输出：

Name	姓	分数
Sonoo	Jaiswal	60
James	William	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>

【CSS表格table】输出：

Name	姓	分数
Sonoo	Jaiswal	60
James	William	80
Swati	Sironi	82
Chetna	Singh	72

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>

输出：