[模板] 交替相近颜色的表格

 

 

[模板] 交替相近颜色的表格

 

 

效果:

 

 

 

 

 

 

不用多说,直接看代码:

< style  type ="text/css" > ...
td.title {...}{
  width: 142.0pt;
  border-top: solid #4F81BD 1.0pt;      /**//*第一行 上边缘线 的颜色*/
  border-left: none;
  border-bottom: solid #4F81BD 1.0pt;   /**//*第一行 下边缘线 的颜色*/
  border-right: none;
  padding: 0cm 5.4pt 0cm 5.4pt;
}

td.withcolor {...}{
  width: 142.0pt;
  border: none;
  background: #D3DFEE;                                    /**//*有色行的颜色*/
  padding: 0cm 5.4pt 0cm 5.4pt;
}

td.withwhite {...}{
  width: 142.0pt;
  border: none;
  padding: 0cm 5.4pt 0cm 5.4pt;
}

td.whitebottom {...}{  
    width: 142.0pt;
  border: none;
  padding: 0cm 5.4pt 0cm 5.4pt;
  border-bottom: solid #4F81BD 1.0pt;
}

td.colorbottom {...}{
    width: 142.0pt;
  border: none;
  padding: 0cm 5.4pt 0cm 5.4pt;
  background: #D3DFEE;
  border-bottom: solid #4F81BD 1.0pt;
}
</ style >


     < table  border ="1"  cellspacing ="0"  cellpadding ="0"  style ='border:none;' >
         <!-- The Table Title Begins -->
       < tr >
         < td  class ="title" >
          Number
         </ td >
         < td  class ="title" >
          Name
         </ td >
         < td  class ="title" >
          Sex
         </ td >
       </ tr >
       <!-- The Table Title Ends -->
      
      
       < tr >
         < td  class ="withcolor" >
          1
         </ td >
         < td  class ="withcolor" >
          Peter
         </ td >
         < td  class ="withcolor" >
          Man
         </ td >
       </ tr >   
       < tr >
         < td  class ="withwhite" >
          2
         </ td >
         < td  class ="withwhite" >
          Mary
         </ td >
         < td  class ="withwhite" >
          Woman
         </ td >
       </ tr >
      
       <!-- The Table Bottom Begins -->
       < tr >
         < td  class ="colorbottom" >
          3
         </ td >
         < td  class ="colorbottom" >
          Lucy
         </ td >
         < td  class ="colorbottom" >
          Woman
         </ td >
       </ tr >
       <!-- The Table Bottom Ends -->
     </ table >

 

 

 

 

 

 

 

 

 

 

PS: 各种丰富的颜色,我已经做成了网页,直接打开就行:

 http://www.fs2you.com/files/920ca94a-f349-11dc-856a-00142218fc6e/