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

 

 

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

 

 

效果:

 

 

 

 

 

 

不用多说,直接看代码:

<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/