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

10.2 隔行变色的表格

2024-07-08 20:57:21   229人阅读

本案例中，我们对一个简单的表格进行设置，使它看起来更为精致。另外，当表格的行和列都很多，并且数据量很大的时候，为避免单元格采用相同的背景色会使浏览者感到凌乱，发生看错行的情况，为表格设置隔行变色的效果，使得奇数行和偶数行的背景颜色不一样。实例的最终效果如图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.     border: none;   
  4.     color: #565;   
  5.     font: 12px arial;   
  6. }   
  7.   
  8. table caption {   
  9.     font-size: 24px;   
  10.     border-bottom: 2px solid #B3DE94;   
  11.     border-top: 2px solid #B3DE94;   
  12. }

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

三、设置单元格样式

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

折叠CSS 代码复制内容到剪贴板
  1. table, td, th {   
  2.     margin: 0;   
  3.     padding: 0;   
  4.     vertical-align: middle;   
  5.     text-align:left;   
  6. }   
  7.   
  8. tbody td, tbody th {   
  9.     background-color: #DFC;   
  10.     border-bottom: 2px solid #B3DE94;   
  11.     border-top: 3px solid #FFFFFF;   
  12.     padding: 9px;   
  13. }   
  14.   
  15.   
  16. tfoot td, tfoot th {   
  17.     font-weight: bold;   
  18.     padding: 4px 8px 6px 9px;   
  19.     text-align:center;   
  20. }   
  21.   
  22. thead th {   
  23.     font-size: 14px;   
  24.     font-weight: bold;   
  25.     line-height: 19px;   
  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-bottom: 2px 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;   
  4. } 

用加号连接的选择器就称为邻接选择器，卜面用两个加号，连接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


联系
我们