制作漂亮的超细线表格

不要跟我说现在是DIV 和CSS的天下，所以你完全摒弃了table，很多刚刚开始学习Xhtml的童鞋往往都存在这样的误解：以为使用div+CSS才是前卫的技术，于是对table不屑一顾，其实不然，不管web前端发展到什么程度，只要html一天还在用，那table就不会死。为什么这样说？下面这个例子你就知道，DIV 和table，它们各有各的用处，而且有些地方是无法替代的：

比如我要在一个页面中显示一个班级的所有学生的姓名，年龄，身高，成绩等内容，用xhtml:

 HTML Code 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<div>      <ul>          <li>姓名 </li>          <li>年龄 </li>          <li>身高 </li>          <li>成绩 </li>      </ul>      <ul>          <li>小林 </li>          <li>12 </li>          <li>150CM </li>          <li>61 </li>      </ul>      <ul>          <li>小丽 </li>          <li>13 </li>          <li>145CM </li>          <li>78 </li>      </ul> </div>

        对于初学html代码的童鞋来说，看了上面的代码你一定会感到很困惑，不是说table过时了吗，那么就用DIV来布局吧，好了，这回遇到这种数据形式，你怎么来显示到页面上才能够让用户看着舒服？

于是再来看看表格的表现：

 HTML Code 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<table>      <tr>          <td>姓名 </td>          <td>年龄 </td>          <td>身高 </td>          <td>成绩 </td>      </tr>      <tr>          <td>小林 </td>          <td>12 </td>          <td>150CM </td>          <td>61 </td>      </tr>      <tr>          <td>小丽 </td>          <td>14 </td>          <td>145CM </td>          <td>78 </td>      </tr> </table>

假如让你设计，上面的两种代码你更愿意选择哪一种？

答案当然不言自明。

所以在某些场合，表格比DIV更能让你方便地组织你的数据，并且以最好的形式呈现给用户。这里就说到了怎么设计一个漂亮的表格。有时候你又会觉得，不就一个表格吗？还要怎么设计？请看下面的代码：

 HTML Code 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

<table  width= "600"  align= "center"  bgcolor= "#E3EDF0"  cellpadding= "5"  cellspacing= "1"  border= "0" >      <thead  bgcolor= "#efefef" >          <th  width= "50" >编号 </th>          <th  width= "100" >姓名 </th>          <th  width= "50" >性别 </th>          <th  width= "50" >年龄 </th>          <th  width= "50" >操作 </th>      </thead>      <tr  bgcolor= "#fff"  align= "center" >          <td>001 </td>          <td>Jim </td>          <td>男 </td>          <td>15 </td>          <td>编辑 </td>      </tr>      <tr  bgcolor= "#fff"  align= "center" >          <td>002 </td>          <td>Lucy </td>          <td>女 </td>          <td>17 </td>          <td>删除 </td>      </tr>      <tr  bgcolor= "#fff"  align= "center" >          <td>003 </td>          <td>Black </td>          <td>男 </td>          <td>15 </td>          <td>添加 </td>      </tr>      <tr  bgcolor= "#fff"  align= "center" >          <td>004 </td>          <td>LIli </td>          <td>女 </td>          <td>14 </td>          <td>编辑 </td>      </tr>      <tr  bgcolor= "#fff"  align= "center" >          <td>005 </td>          <td>Meimei </td>          <td>女 </td>          <td>16 </td>          <td>添加 </td>      </tr>      <tr  bgcolor= "#fff"  align= "center" >          <td>006 </td>          <td>Tom </td>          <td>男 </td>          <td>17 </td>          <td>编辑 </td>      </tr>      <tr  bgcolor= "#fff"  align= "center" >          <td>007 </td>          <td>Jack </td>          <td>男 </td>          <td>15 </td>          <td>删除 </td>      </tr>      <tr  bgcolor= "#fff"  align= "center" >          <td>008 </td>          <td>Stive </td>          <td>男 </td>          <td>16 </td>          <td>添加 </td>      </tr>      <tr  bgcolor= "#fff"  align= "center" >          <td>009 </td>          <td>Mary </td>          <td>女 </td>          <td>15 </td>          <td>添加 </td>      </tr> </table>

显示效果：

        制作原理：

给表格设置一个深一点的颜色，然后把第一行的背影色都设置成白色，再设置cellspacing="1"，至于上面这个效果图，是我用jquery做成的隔行变色效果。jquery代码如下：

 JavaScript Code 

1 2 3 4 5

<script type= "text/javascript"> $( function(){     $( "table tr:odd()").css( "background-color", "#F5F5F5");     }) </script>