table 样式美化

1. 单像素边框CSS表格

这是一个很常用的表格样式。

 

源代码：

 1 <!-- CSS goes in the document HEAD or added to your external stylesheet -->2 <style type="text/css">3 table.gridtable {4     font-family: verdana,arial,sans-serif;5     font-size:11px;6     color:#333333;7     border-width: 1px;8     border-color: #666666;9     border-collapse: collapse;
10 }
11 table.gridtable th {
12     border-width: 1px;
13     padding: 8px;
14     border-style: solid;
15     border-color: #666666;
16     background-color: #dedede;
17 }
18 table.gridtable td {
19     border-width: 1px;
20     padding: 8px;
21     border-style: solid;
22     border-color: #666666;
23     background-color: #ffffff;
24 }
25 </style>
26 
27 <!-- Table goes in the document BODY -->
28 <table class="gridtable">
29 <tr>
30     <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
31 </tr>
32 <tr>
33     <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
34 </tr>
35 <tr>
36     <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
37 </tr>
38 </table>

2. 带背景图的CSS样式表格

和上面差不多，不过每个格子里多了背景图。