我們常常在網頁設計的時候，會需要使用到Table表格來排版，有時候多少需要加一點顏色來美化

今天要教大家的是僅透過簡單的CSS語法，來讓Table表格達到奇偶底色相間，整個語法不需要用到任何javascript，但是，僅限使用在IE7版本以上，若IE7以下恐怕還是不支援（不過這年頭IE7以下直接可以捨棄掉了），但即使是如此，還是不影響整個程式上的運作，頂多也只是美觀上的問題而已。

首先，很簡單，僅需要加上以下兩行CSS語法，就可以達到Table的奇偶底色相間：

    
tr:nth-child(even) {
  background: #CCC
}
tr:nth-child(odd) {
  background-color: #FAFAFA;
}
    
  

接下來，我再加上表格的border語法，讓他有邊框：

    
table {
  border: 1px solid #666;
  border-collapse: collapse;
}
    
  

但這樣只有表格的邊邊有線框，所以我們再加上儲存格的邊框語法，這樣就更好看了一些：

    
tr, td {
  border: 1px solid #666;
}
    
  

最後，我們還可以加上滑鼠移過後，會有不一樣的底色，整個Table的美化就大功告成了：

    
td:hover {
  background-color: #E6FBFF;
}
    
  

你看，是不是很簡單呢？