10.2 隔行变色的表格

本案例中，我们对一个简单的表格进行设置，使它看起来更为精致。另外，当表格的行和列都很多，并且数据量很大的时候，为避免单元格采用相同的背景色会使浏览者感到凌乱，发生看错行的情况，为表格设置隔行变色的效果，使得奇数行和偶数行的背景颜色不一样。实例的最终效果如图1所示。

实例文件位于网页学习网CSS教程资源的“第10章\02\pretty-1.htm”。

图1 交替变色的表格样式

一、搭建HTML结构

首先确定表格的HTML结构，代码如下：

这个表格中，使用的标记从上至下依次为<caption>、<thead>、(tbody>和<tfoot>。

二、整体设置

接下来对表格的整体和标题进行设置，代码如下：

此时的效果可以看到整体的文字样式和标题的样式已经设置好了。lodidance.com

三、设置单元格样式

 现在来设置各单元格的样式，代码如下。代码一共分为4段，第1段是设置所有单元格的共性属性，后面3段分别对thead、tbody和tfoot的单元格样式进行设置。

四、隔行变色

然后就要使数据内容的背景色深浅交替，实现隔行变色。在CSS中实现隔行变色的方法十分简单，只要给偶数行的<tr>标记都添加上相应的类型，然后对其进行CSS设置即可。

① 首先，在HTML中，给所有偶数行的<tr>标记增加一个“even”类别，如下所示：

② 设置“.odd"与其他单元格的不同的样式，代码如下所示。

这里交替的两种颜色应该保证协调美观。

五、设置列样式

对列做一些细节设置。例如，在price列中的数据是价格数值，如果能够右对齐，则更方便访问者理解。因此在HTML中thead的前面增加如下代码：

其中一对<col></col>对应一列，价格列中中设置一个price类别。然后在样式中增加如下代码：

到这里，这个案例就完成了，效果如图1所示。

在Firefox中实现对整列样式的设置有两种办法。简单的办法是为这一列的每一个单元格设置单独的属性，当然这样做很不简洁。简洁的办法是使用“邻接”选择器，这种选择前面没有介绍过，它是CSS 2中提出的，在IE6中不支持，使用方法是将代码：

修改为：lodidance.com

用加号连接的选择器就称为邻接选择器，卜面用两个加号，连接3个td，就表示每一行的第3个td为选中的元素。注意表格中第1列是th．因此“price”这一列是td的第3列。这时在Firefox中的效果就显示正常了。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表