重點仔細調整單元格之間的間距優點很簡單的設計，對於簡單的表格很合適缺點tr:hover 在IE6下不能使用, 如果表格有很多的列，看起來會很混亂

2. 豎直簡約型

雖然使用很少，但豎直簡約型表格經常用於分類或比較物件的描述，每一列代表的一個實體。我們可以在豎直簡約型表格列之間加入空格來進行分隔。

最好加上大數值的 border-left 和 border-right，使用相同的顏色作為背景色。如果你願意可以使用透明邊框，但是IE6會把表格弄的面目全非。因為豎直簡約型表格中，資料被從上到下（豎直）閱讀的，所以新增 tr:hover 毫無用處，反而會使表格更難以理解。當然可以使用基於 JavaScript 解決方案，當滑鼠移動到某列時，使其高亮顯示，但是這超出了本文討論的範圍。

重點仔細調整單元格之間的填充距離, 不要新增 tr:hover有點很簡單的設計，對於簡單的表格很合適缺點如果背景色不是色塊型的，不要使用豎直簡約型表格，它僅僅適合一部分 Table

3. 方塊型

所有表格風格中最常用的，方塊風格適用於各種型別的表格，挑選出一個好的顏色方案，分配給所有單元格的 background-color。別忘了定義 border 來區分各個單元格。下面是方塊型表格的例子：

這種風格，可能是目前最常用的方式。最難的問題實際上是找到與你的網站匹配的配色方案。如果你的網站上的影象比較深沉，使用這種方式將比較困難。

重點挑選與網站適合的色彩優點容易設計，資料多和資料少的表格都適合缺點挑選完美的色彩會很困難

4. 水平間隔型

水平間隔型表格具有很強的吸引力和使用性。當閱讀表格時，交替的背景色會使人感到很舒服。在設計水平間隔型表格時，只要簡單地給每奇數行 tr 定義 class="odd"。

Html程式碼  

1. ...  
2.     <trclass="odd">
3.        <td>...</td>
4.        ...  
5.     </tr>
6.     <tr>
7.        <td>...</td>
8.        ...  
9.     </tr>
10. ...  

 

重點千萬別用太多的間隔色，會把使用者眼睛弄得很不舒服優點間隔模式會幫助使用者更容易的閱讀表格資料缺點給很大的表格新增 class="odd" 是件很乏味的事情，在大多數情況下，你必須手工完成它。

5. 豎直間隔型

豎直間隔比水平間隔更容易定義，因為我們可以使用 colgroup 和 col 這兩個元素屬性來定義不同列的 CSS。但是程式碼與其他型別比起來，有點複雜了：

colgroup 元素適用於定義表格的 CSS，我們可以使用它來代替給每個 td 或者 th 新增 class。

Xml程式碼  

1. <table>
2.     <!-- Colgroup -->
3.        <colgroup>
4.           <colclass="vzebra-odd">
5.           <colclass="vzebra-even">
6.           <colclass="vzebra-odd">
7.           <colclass="vzebra-even">
8.        </colgroup>
9.     <!-- Table header -->
10.        <thead>
11.           <tr>
12.              <thscope="col"id="vzebra-comedy">Employee</th>
13.              ...  
14.           </tr>
15.        </thead>
16.        ...  
17. </table>

雖然豎直間隔型可能更適合面向豎直表格，但是其他型別表格也可以採用這種風格。

重點千萬別用太多的間隔色，會把使用者眼睛弄得很不舒服優點適合所有型別表格缺點選擇色彩方案會很困難，想要新增 colgroup 元素

6. 重點列型

在某些表格中，有些列比其他列更加重要，在這種情況下，可以使用 colgroup 和 col 來標註重點列。在下面的例子中，首列被標示為重點列，使其更容易被關注。

你可以使用一個重點列來標示重點，比如說一個會計表格中的金額總計，或者一個比較表格中獲勝的實體。

重點要注意，不要過分強調重點性，這樣會分散其它列的閱讀優點對某些特定型別的表格特別有效缺點因為 tr:hover 在 IE 下無效，所以這種型別只適用於特定型別的表格

7. 報紙型

要達到所謂的報紙型的效果，需要給表格新增邊框，而在邊框內部展示內容。一個簡約的報紙型表格如下所示：

變換單元格（(td and th)）色彩，邊框，邊距，背景色和 tr:hover 效果後，其它風格的報紙型表格如下所示：

重點注意 border-collapse ,不要丟失表格的外部邊框優點給表格賦予了一種很有權威的風格缺點對於較大的表不適合（會失去它的魅力）

8. 圓角型

圓角給人的感覺是很光滑很有現代感，很容易就可以把圓角應用到一個表格上，但是你需要為這些圓角建立影象。理論上，在不需要額外的標記就可以給 tr 和 td 新增圓角，但是IE6下，它會變得很一片混亂。所以最穩定的方法是把圓角圖片置於表格的四個角。請參考下面的例子：

優點如果你的網站大量使用圓角，而且你喜歡非傳統風格的表格，這可能是你唯一的選擇。/dd>缺點花費時間比較長，需要圖片

9.背景圖片型

如果你想很快且有特色的定義表格的風格，那麼就簡單的挑選出一個有吸引力的圖片作為表格的背景。你也可以使用50%的灰度來定義單元格的背景圖片，來提高可讀性。你可以使用下面的 CSS-hack 技術是它能夠在IE6下正常工作。

Html程式碼  

1. * html table tbody td  
2. {  
3.           /* IE CSS Filter Hack goes here*/  
4. }  

 

表格例子如下:

重點確定背景圖片符合表格的內容優點很容易的定製，提供了獨特的外觀，如果正確使用，該影象可以作為一個符號，讓使用者留下難忘的印象缺點在IE6下需要 CSS-hack，需要提供圖片

10. 單元格背景色型

你可以給單元格新增背景圖片，實現一致的風格。這樣你至少要花費半個小時才能得到你想要的東西，開啟 Photoshop，生成一個畫素大小的漸變圖片，把它們設定為單元格的背景圖片，這樣你就得到了一個漸變效果的表格。

同樣，選擇一個模式，並將其設定為背景圖片，可以得到一個模式風格的表格：

原文地址：