用CSS3来处理你的表格

今天，我将向您展示如何使用一些整洁的CSS3属性来美化您的表。有了这么多新的选择器，我们可以处理特定的表单元和行，以创建一个独特的样式，而不需要将类添加到标记中。

我们将使用- webkit和- moz渐变来创建一个没有图像的漂亮的外观，并学习如何将内容插入到特定类的元素中。

让我们从标记开始。

标记

下面是我们的基本表格结构:

我们有一个表需要的所有元素，一个标题，一个正文和一个页脚。在本教程中，我们将使用一个托管计划比较表作为示例。通过将类更改为table1、table2或table3，可以将以下三种样式应用到该表中。

CSS表1

第一个表将是绿色调，带有一些描述单元格的渐变，即“th”元素。让我们从表的一般风格开始:

table.table1{ font-family: "Trebuchet MS", sans-serif; font-size: 16px; font-weight: bold; line-height: 1.4em; font-style: normal; border-collapse:separate;}

我们希望在表格单元之间留出一些空间，这样我们就可以将边界折叠分离出来。

我通常会从类型图中获取字体的样式，这是一个非常有用的网站，字体很漂亮，而且CSS代码已经准备好了。

头部的th元素将有以下的样式:

.table1 thead th{ padding:15px; color:#fff; text-shadow:1px 1px 1px #568F23; border:1px solid #93CE37; border-bottom:3px solid #9ED929; background-color:#9DD929; background:-webkit-gradient( linear, left bottom, left top, color-stop(0.02, rgb(123,192,67)), color-stop(0.51, rgb(139,198,66)), color-stop(0.87, rgb(158,217,41)) ); background: -moz-linear-gradient( center bottom, rgb(123,192,67) 2%, rgb(139,198,66) 51%, rgb(158,217,41) 87% ); -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -moz-border-radius:5px 5px 0px 0px; border-top-left-radius:5px; border-top-right-radius:5px;}

我们为Firefox和Webkit浏览器(Safari和Chrome)使用渐变属性，创建一个有三种颜色的漂亮渐变。边界半径的属性环绕在细胞的左上方和右上方。

现在，我们需要处理的是空的。使用CSS3选择器，我们可以做一些不可思议的事情，这是其中之一:选择空的th。这就是:

.table1 thead th:empty{ background:transparent; border:none;}

该表的页脚将有以下样式:

.table1 tfoot td{ color: #9CD009; font-size:32px; text-align:center; padding:10px 0px; text-shadow:1px 1px 1px #444;}.table1 tfoot th{ color:#666;}

没什么特别的，只是一些文本阴影来增强字体。

内部的表格单元格将会有一个浅绿色背景和一个白色文本阴影的雕刻效果:

.table1 tbody td{ padding:10px; text-align:center; background-color:#DEF3CA; border: 2px solid #E7EFE0; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; color:#666; text-shadow:1px 1px 1px #fff;}

我们还为细胞添加了一些非常细微的边界和边界半径。这将会产生轻微的发光效果。我们还可以使用一些框阴影来创建类似的效果。

现在，我们要向所有具有类“check”的单元格添加一个图标。使用以下CSS可以实现:

.table1 tbody span.check::before{ content : url(../images/check0.png)}

这个属性允许我们在元素内部添加一些特定的内容(在本例中是一个图像)。我们还可以在这里添加一些文本。我们可以说“:before”或“:after”，在内容之后插入它。

这就是第一桌的风格!让我们看看第二个。

CSS表2

第二张表将会是更优雅的类型，有黑色的页眉和页脚。

这张桌子在细胞之间没有任何空间，所以我们把它折叠起来:

table.table2{ font-family: Georgia, serif; font-size: 18px; font-style: normal; font-weight: normal; letter-spacing: -1px; line-height: 1.2em; border-collapse:collapse; text-align:center;}

页脚和页眉将会有类似的样式，因此我们可以定义常见属性如下:

.table2 thead th, .table2 tfoot td{ padding:20px 10px 40px 10px; color:#fff; font-size: 26px; background-color:#222; font-weight:normal; border-right:1px dotted #666; border-top:3px solid #666; -moz-box-shadow:0px -1px 4px #000; -webkit-box-shadow:0px -1px 4px #000; box-shadow:0px -1px 4px #000; text-shadow:0px 0px 1px #fff; text-shadow:1px 1px 1px #000;}

footer的th将会有这样的风格:

.table2 tfoot th{ padding:10px; font-size:18px; text-transform:uppercase; color:#888;}

我们已经和标题单元格一起定义的页脚单元格需要一个不同的框阴影。标题框阴影指向顶部，页脚应该指向底部。我们还想改变文本的颜色:

.table2 tfoot td{ font-size:36px; color:#EF870E; border-top:none; border-bottom:3px solid #666; -moz-box-shadow:0px 1px 4px #000; -webkit-box-shadow:0px 1px 4px #000; box-shadow:0px 1px 4px #000;}

让我们回到header中，我们仍然需要定义空单元格不应该有任何样式:

.table2 thead th:empty{ background:transparent; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}

我们还需要删除为头元素定义的框阴影。

使用:nth -last- child选择器，我们可以在标题中选择最后一个单元元素，并表示它不应该有一个右边框，就像其他的一样:

.table2 thead :nth-last-child(1){ border-right:none;}

有了:第一个子选择器，我们可以在header中处理第一个单元格，它是空的，我们不希望它有边框。我们还希望删除表主体中最后一个td元素的边框:

.table2 thead :first-child,.table2 tbody :nth-last-child(1){ border:none;}

现在，让我们在左侧的描述中添加一些样式，表主体的th元素:

.table2 tbody th{ text-align:right; padding:10px; color:#333; text-shadow:1px 1px 1px #ccc; background-color:#f9f9f9;}

下面的样式将适用于其他单元:

.table2 tbody td{ padding:10px; background-color:#f0f0f0; border-right:1px dotted #999; text-shadow:-1px 1px 1px #fff; text-transform:uppercase; color:#333;}

现在我们只需为检查span插入一个图标:

.table2 tbody span.check::before{ content : url(../images/check1.png)}

CSS Table 3

第三个表将有更多CSS属性，因为我们希望所有列标题都有不同的颜色。我将会演示如何使用选择器。

一般的表格形式如下:

table.table3{ font-family:Arial; font-size: 18px; font-style: normal; font-weight: normal; text-transform: uppercase; letter-spacing: -1px; line-height: 1.7em; text-align:center; border-collapse:collapse;}

标题中所有th单元的通用样式是:

.table3 thead th{ padding:6px 10px; text-transform:uppercase; color:#444; font-weight:bold; text-shadow:1px 1px 1px #fff; border-bottom:5px solid #444;}

空细胞将被处理如下:

.table3 thead th:empty{ background:transparent; border:none;}

现在我们要在页眉和td单元格中选择特定的th细胞，以给它们一个独特的颜色。有了:nth - child(number)我们可以选择确切的child:

.table3 thead :nth-child(2),.table3 tfoot :nth-child(2){ background-color: #7FD2FF;}.table3 tfoot :nth-child(2){ -moz-border-radius:0px 0px 0px 5px; -webkit-border-bottom-left-radius:5px; border-bottom-left-radius:5px;}.table3 thead :nth-child(2){ -moz-border-radius:5px 0px 0px 0px; -webkit-border-top-left-radius:5px; border-top-left-radius:5px;}.table3 thead :nth-child(3),.table3 tfoot :nth-child(3){ background-color: #45A8DF;}.table3 thead :nth-child(4),.table3 tfoot :nth-child(4){ background-color: #2388BF;}.table3 thead :nth-child(5),.table3 tfoot :nth-child(5){ background-color: #096A9F;}.table3 thead :nth-child(5){ -moz-border-radius:0px 5px 0px 0px; -webkit-border-top-right-radius:5px; border-top-right-radius:5px;}.table3 tfoot :nth-child(5){ -moz-border-radius:0px 0px 5px 0px; -webkit-border-bottom-right-radius:5px; border-bottom-right-radius:5px;}

我们还为所选角单元添加了边框半径。

所有td单元格在页脚的通用样式是:

.table3 tfoot td{ font-size:38px; font-weight:bold; padding:15px 0px; text-shadow:1px 1px 1px #fff;}

让我们给细胞添加一些填充:

.table3 tbody td{ padding:10px;}

我们想要设置的价格为更强的字体:

.table3 tbody tr:nth-child(4) td{ font-size:26px; font-weight:bold;}

表主体的列应该有更改样式，所以我们将再次使用:nth - child选择器，但这次使用“even”和“odd”的值:

.table3 tbody td:nth-child(even){ background-color:#444; color:#444; border-bottom:1px solid #444; background:-webkit-gradient( linear, left bottom, left top, color-stop(0.39, rgb(189,189,189)), color-stop(0.7, rgb(224,224,224)) ); background:-moz-linear-gradient( center bottom, rgb(189,189,189) 39%, rgb(224,224,224) 70% ); text-shadow:1px 1px 1px #fff;}.table3 tbody td:nth-child(odd){ background-color:#555; color:#f0f0f0; border-bottom:1px solid #444; background:-webkit-gradient( linear, left bottom, left top, color-stop(0.39, rgb(85,85,85)), color-stop(0.7, rgb(105,105,105)) ); background:-moz-linear-gradient( center bottom, rgb(85,85,85) 39%, rgb(105,105,105) 70% ); text-shadow:1px 1px 1px #000;}

我们还在一行中添加了一个右边框:

.table3 tbody td:nth-last-child(1){ border-right:1px solid #222;}

左边的描述将会有如下的样式:

.table3 tbody th{ color:#696969; text-align:right; padding:0px 10px; border-right:1px solid #aaa;}

只剩下检查图标:

.table3 tbody span.check::before{ content : url(../images/check2.png)}

这是它!三种不同风格的表与纯CSS !

希望你喜欢这个教程！