英傑銳網路數位設計

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

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

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

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

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

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

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

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

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

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

你看，是不是很簡單呢？