在word中，表格是一項很常用的功能，並且表格的樣式變化多端，使用者可以根據需要選擇自己喜歡的樣式。那麼，各式各樣的表格到底是怎麼實現的呢？

本節，通過一個簡單的表格，來揭開word表格的神祕面紗。表格的HTML程式碼如下：

1. <table>
2. <caption>表3-2 關係選擇器</caption>
3. <thead>
4. <tr>
5. <th>選擇器</th>
6. <th>語法</th>
7. <th>功能描述</th>
8. <th>版本</th>
9. </tr>
10. </thead>
11. <tbody>
12. <tr>
13. <td>後代選擇器</td>
14. <td>E F</td>
15. <td>選擇E元素的所有後代F元素，E和F之間用空格分隔</td>
16. <td>1</td>
17. </tr>
18. <tr>
19. <td>子選擇器</td>
20. <td>E > F</td>
21. <td>選擇E元素的所有子元素F</td>
22. <td>2</td>
23. </tr>
24. <tr>
25. <td>相鄰同胞選擇器</td>
26. <td>E + F</td>
27. <td>選擇緊接在E元素之後的第一個兄弟元素F</td>
28. <td>2</td>
29. </tr>
30. <tr>
31. <td>同胞選擇器</td>
32. <td>E ~ F</td>
33. <td>選擇E元素之後的所有兄弟元素F</td>
34. <td>3</td>
35. </tr>
36. </tbody>
37. </table>

對於一個表格來說，如果沒有顯式設定寬度，則所有單元格的寬度剛好足夠容納其內容，表格的寬度單元格的寬度決定。因此，一般建議為表格設定固定寬度。

另外，大多數人習慣於讓表格本身居中顯示，因為這樣比較美觀。從前面介紹可知，table 本身會形成一個塊級框。在CSS中，要使一個塊級框居中顯示，只需設定 margin: 0 auto 即可。由於左右兩側的外邊距設定為 auto，瀏覽器會為兩側分配相同的外邊距，框就自動居中顯示了。

1. table {
2.    width:600px;
3.    margin:0auto;/* 表格居中顯示 */
4. }

表格的自動佈局非常方便，無需做任何調整，就可以由瀏覽器完美佈局。當然，如果你不喜歡自動佈局，或出於效率考慮，可以把 table 元素的 table-layout屬性設定為 fixed，來採用固定佈局。

表格預設沒有外邊框，可以使用 table 元素的 border屬性為表格新增線條邊框，或者使用 border-image 為表格新增影象邊框。單元格預設具有獨立邊框，可以使用單元格 td 元素的 border屬性或 border-image屬性，為單元格新增線條邊框或影象邊框。為單元格新增邊框後，預設情況下，單元格的邊框獨立，會在相鄰單元格之間留下一條明顯可見的間隙，影響美觀。可以通過 table 元素的 border-collapse屬性，來合併相鄰單元格的邊框，消除這個間隙。

1. table {
2.    width:600px;
3.    margin:0auto;/* 表格居中顯示 */
4.    border-top:2px solid #444;     /* 表格的上邊框 */
5.    border-bottom:2px solid #444;  /* 表格的下邊框 */
6.    border-collapse: collapse;/* 合併單元格邊框 */
7. }

在 word 中，預設情況下，表格的標題在表格的上方、居中顯示，並與表格之間保持一定距離，字型為黑體、加粗顯示。這裡與 word 保持一致。

1. caption {
2.     margin:.5emauto;
3.     font: bold 14px黑體;
4. }

可以通過 table 元素的 background、color 等屬性設定整張表的背景色和文字顏色等，也可以通過 th 元素的background、color等屬性改變表頭的背景色和文字顏色，來突顯表頭。

1. th {
2.    background:#ddd;
3.    border-bottom:1px solid #666 ;
4. }

表頭單元格和普通單元格的預設格式稍有不同，表頭 th 中的文字預設加粗顯示、水平居中，普通單元格 td 中的文字常規顯示、水平居左。表頭單元格和普通單元格的內容，預設都是垂直居中對齊。

如果需要，可以使用 vertical-align屬性調整垂直對齊方式，通過 text-align屬性調整水平對齊方式。text-align屬性可以被繼承，而vertical-align屬性不能被繼承。

因此，可以通過 table 元素的 text-align屬性，來設定整個表格中所有單元格中內容的水平對齊方式，也可以通過 th 和 td 元素的 text-align屬性來設定某些單元格的水平對齊方式。但是，只能通過 th 和 td 元素的 vertical-align屬性來設定單元格的垂直對齊方式。

如果只想設定某行或某列中內容的對齊方式，可以使用 :nth-child 偽類選擇器實現。如，讓第 4 列的所有單元格中的內容水平居中：

1. td:nth-child(4){
2.    text-align: center;
3. }

表頭的單元格和普通單元格中的內邊距均為 0，內容過於緊湊，影響美觀。可以通過 padding屬性，來調整單元格的內邊距，也可以通過 line-height屬性調整單元格內容的行距。

1. th, td {
2.   padding:.5em1em;
3. }

對於行數較多的表格，如果每一行都使用相同的背景色，閱讀起來會很困難，容易產生視疲勞。如果採用隔行變色，使奇數行和偶數行使用不同的背景色，則資料行會一目瞭然，比傳統網格狀表格更便於閱讀，同時也增加了表格的美感。使用 :nth-child 偽類選擇器，也可以輕鬆實現隔行換色功能。

1. tr:nth-child(even){
2.      background:#eaeaea;
3. }

對於行數較多的表格，即便是隔行變色，長時間越讀，依然會感到疲勞。如果在滑鼠懸停到某行或某單元格時，動態改變背景色和文字顏色，可以大大緩解使用者的視疲勞，並使頁面充滿生機，也是很人性化的設計。為 tr 元素使用 :hover 偽類選擇器，可以改變某行的背景色和文字顏色。因為不希望表頭的背景隨著變化，需要限定 tr 的範圍，只讓 tbody 中的行動態改變背景色。

1. tbody tr:hover {
2.      color:#fff;
3.      background:#09f;
4. }

經過上述處理後，表格在瀏覽器中渲染的結果如圖 11‑14 所示：

上面實現的是一個常規的表格，但人們常常會覺得，沒有邊框的表格就沒有那麼多的條條框框，便不會有被束縛的感覺。如果再配上圓角，看上去可能會更美。

提到圓角表格，一般想到的方法，就是通過 table 元素的 border-radius屬性來實現。可事實上， table 元素並不支援 border-radius屬性。條條大路通羅馬，只要肯動腦，辦法總是有的。如果為表格四個角上的單元格應用圓角，就間接實現了圓角表格。

1. thead th:first-child {
2.    border-top-left-radius:6px;
3. }
4. thead th:last-child {
5.    border-top-right-radius:6px;
6. }
7. tbody tr:last-child td:first-child {
8.    border-bottom-left-radius:6px;
9. }
10. tbody tr:last-child td:last-child {
11.    border-bottom-right-radius:6px;
12. }

去掉表格的邊框，並應用圓角後，上述表格在瀏覽器中的渲染效果如圖 11‑15 所示：

本節基本上都使用元素選擇器來定義表格的樣式，這會導致頁面上的所有表格都使用相同的風格。如果不希望所有表格都千篇一律，就可以定義多個類，併為不同的表格應用不同的類，這樣既可以讓表格的樣式變化多端，又增加了靈活性。

當然，本節只是拋磚引玉，簡要介紹了CSS美化HTML表格的一般步驟。在實際應用中，通過變幻表格的相關樣式屬性，就可以製作出任意風格、美輪美奐的表格，而方法基本不變。