CSS 美化表格

首先要搭建HTML结构，代码如下：

<table summary="book list">
 <caption>Book List</caption>
    <thead>
    <col /><col /><col /><col /><col /><col  class="price"/>
     <tr>
         <th>Title</th>
            <th>ID</th>
            <th>Country</th>
            <th>Price</th>
            <th>Download</th>
        </tr>
     </thead>
     <tbody>
     <tr class="even">
         <th>Tom</th>
            <th>13214585</th>
            <th>Germany</th>
            <th>﹩3.12</th>
            <th>Download</th>
        </tr>

。。。。此省略几行。。。
      </tbody>
     <tfoot>
     <tr>
         <th>Total</th>
            <td colspan="4">4 books</td>
        </tr>
     </tfoot>
 </table>

然后对整体进行设置

table{
 background-color:#fff;
 border:none;
 color:#565;
 font:12px arial;
 text-align:left;
}
table caption{
 font-size:24px;
 border-bottom:2px solid #b3de94;
}

接下来设置单元格的样式，代码如下：

table,td,th{
 margin:0;
 padding:0;
 vertical-align:middle;
}
tbody td,tbody th{
 background-color:#dfc;
 border-bottom:2px solid #b3de94;
 border-top:3px solid #fff;
 padding:9px;
}
tfoot td, tfoot th{
 font-weight:bold;
 padding:4px 8px 6px 9px;
 text-align:center;
}
thead th{
 font-size:14px;
 font-weight:bold;
 line-height:19px;
 padding:0 8px 2px;
 text-align:center;
}
tbody tr.even th,tbody tr.even td{
 background-color:#cea;
 border-bottom:2px solid #67bd2a;
}
col.price{
 text-align:right;
}

此时效果如图所示：