首页 > 代码库 > 10.2 隔行变色的表格

10.2 隔行变色的表格

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

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

图1 交替变色的表格样式
图1 交替变色的表格样式

一、搭建HTML结构

首先确定表格的HTML结构,代码如下:

折叠XML/HTML 代码复制内容到剪贴板
  1.     <table summary="book list">  
  2.         <caption>Book List</caption>  
  3.         <col></col><col></col><col></col><col class="price" align="right"></col><col></col>  
  4.         <thead>  
  5.             <tr>  
  6.                 <th >Title</th>  
  7.                 <th >ID</th>  
  8.   
  9.                 <th >Country</th>  
  10.                 <th >Price</th>  
  11.                 <th >Download</th>  
  12.             </tr>  
  13.         </thead>       
  14.         <tbody>  
  15.             <tr >  
  16.                 <th >Tom</th>  
  17.                 <td>1213456</td>  
  18.   
  19.                 <td>Germany</td>  
  20.                 <td>$3.12</td>  
  21.                 <td>Download</td>  
  22.             </tr>  
  23.             <tr class="odd">  
  24.                 <th >Chance</th>  
  25.                 <td>1213457</td>  
  26.   
  27.                 <td>Germany</td>  
  28.                 <td>$123.34</td>  
  29.                 <td>Download</td>  
  30.             </tr>  
  31.             <tr >  
  32.                 <th >John</th>  
  33.                 <td>1213458</td>  
  34.   
  35.                 <td>Germany</td>  
  36.                 <td>$34.37</td>  
  37.                 <td>Download</td>  
  38.             </tr>  
  39.             <tr class="odd">  
  40.                 <th >oKathleen</th>  
  41.                 <td>1213459</td>  
  42.                 <td>Germany</td>  
  43.                 <td>$23.67</td>  
  44.                 <td>Download</td>  
  45.             </tr>  
  46.             </tbody>  
  47.         <tfoot>  
  48.             <tr>  
  49.                 <th >Total</th>  
  50.                 <td colspan="4">4 books</td>  
  51.             </tr>  
  52.         </tfoot>  
  53. </table>  

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

二、整体设置

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

折叠CSS 代码复制内容到剪贴板
  1. table {   
  2.     background-color#FFF;   
  3.     bordernone;   
  4.     color#565;   
  5.     font12px arial;   
  6. }   
  7.   
  8. table caption {   
  9.     font-size24px;   
  10.     border-bottom2px solid #B3DE94;   
  11.     border-top2px solid #B3DE94;   
  12. }

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

三、设置单元格样式

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

折叠CSS 代码复制内容到剪贴板
  1. table, td, th {   
  2.     margin: 0;   
  3.     padding: 0;   
  4.     vertical-alignmiddle;   
  5.     text-align:left;   
  6. }   
  7.   
  8. tbody td, tbody th {   
  9.     background-color#DFC;   
  10.     border-bottom2px solid #B3DE94;   
  11.     border-top3px solid #FFFFFF;   
  12.     padding9px;   
  13. }   
  14.   
  15.   
  16. tfoot td, tfoot th {   
  17.     font-weightbold;   
  18.     padding4px 8px 6px 9px;   
  19.     text-align:center;   
  20. }   
  21.   
  22. thead th {   
  23.     font-size14px;   
  24.     font-weightbold;   
  25.     line-height19px;   
  26.     padding: 0 8px 2px;   
  27.     text-align:center;   
  28. }

四、隔行变色

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

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

折叠XML/HTML 代码复制内容到剪贴板
  1. <tr class="odd">

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

折叠CSS 代码复制内容到剪贴板
  1. tbody tr.odd th,tbody tr.odd td {   
  2.     background-color#CEA;   
  3.     border-bottom2px solid #67BD2A;   
  4. }

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

五、设置列样式

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

折叠XML/HTML 代码复制内容到剪贴板
  1. <col></col><col></col><col></col><col class="price" align="right"></col><col></col>

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

折叠CSS 代码复制内容到剪贴板
  1. col.price{   
  2.     text-align:right;   
  3. }

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

注意:这个案例的所有效果图都是IE浏览器演示的。Firefox浏览器没有实现对列(即<col>)的支持,已经有很多人向Firefox的开发团队汇报了这个同题。但是至今没有修正,其原因不得而知。

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

折叠CSS 代码复制内容到剪贴板
  1. col.price{       
  2.     text-align:right;       
  3. }

修改为:lodidance.com

折叠CSS 代码复制内容到剪贴板
  1. td+td+td,   
  2. col.price{   
  3.     text-align:right;   

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

注意  (1) 在IE 6中,不支持邻接选择器,IE7/8中已经支持了。

(2) 在实际网页中,这种隔行变色的效果通常是配台服务器动态生成的,在服务器上读取数据的时候做判断,读第1个数据的时候输出“<tr>”,读第2个数据的时候输出"<tr class="odd">",然后依次循环。

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

编辑:网页学习网
本文地址:http://www.lodidance.com/css/jc/734.html