網頁中，通常會用表格（<table>...</table>）來呈現多欄位資料，但沒經過美化的表格，除了會搶過原本要顯示的資料外，更會造成眼睛的莫名壓力，下面就根據美化的一些簡單原則，來展示一次如何美化網頁上的表格。
網頁html你會這樣寫：
<table border="1px" cellspacing=0 cellspadding=0 >
<tr><td>欄位名稱一</td><td>欄位名稱二</td><td>欄位名稱三</td><td>欄位名稱四</td></tr>
<tr><td>資料一</td><td>欄位內容</td><td>欄位內容</td><td>欄位內容</td></tr>
<tr><td>資料一</td><td>欄位內容</td><td>欄位內容</td><td>欄位內容</td></tr>
</table>
<tr><td>欄位名稱一</td><td>欄位名稱二</td><td>欄位名稱三</td><td>欄位名稱四</td></tr>
<tr><td>資料一</td><td>欄位內容</td><td>欄位內容</td><td>欄位內容</td></tr>
<tr><td>資料一</td><td>欄位內容</td><td>欄位內容</td><td>欄位內容</td></tr>
</table>
實際會長這樣：
| 欄位名稱一 | 欄位名稱二 | 欄位名稱三 | 欄位名稱四 |
| 資料一 | 欄位內容 | 欄位內容 | 欄位內容 |
| 資料一 | 欄位內容 | 欄位內容 | 欄位內容 |
OOPS! 好醜是吧？
讓我們用一些CSS美化一下，美化之前，把每個元素（<table>,<tr>,<td>）加上class，如下：
<table class="fancytable" >
<tr class="headerrow"><td>欄位名稱一</td><td>欄位名稱二</td><td>欄位名稱三</td><td>欄位名稱四</td></tr>
<tr class="datarowodd"><td>資料一</td><td>欄位內容</td><td>欄位內容</td><td>欄位內容</td></tr>
<tr class="dataroweven"><td>資料一</td><td>欄位內容</td><td>欄位內容</td><td>欄位內容</td></tr>
</table>
(PS. <td>太多，不加class，等等用階層指定CSS來套)<tr class="headerrow"><td>欄位名稱一</td><td>欄位名稱二</td><td>欄位名稱三</td><td>欄位名稱四</td></tr>
<tr class="datarowodd"><td>資料一</td><td>欄位內容</td><td>欄位內容</td><td>欄位內容</td></tr>
<tr class="dataroweven"><td>資料一</td><td>欄位內容</td><td>欄位內容</td><td>欄位內容</td></tr>
</table>
再來，把上述的class名稱，都寫在html中的<head>...</head>之間，如下：
<head>
<style>
.fancytable{}
.headerrow{}
.datarowodd{}
.dataroweven{}
</style>
</head>
(ps：為了示範，暫時不把css獨立出去成一個檔，而是直接在head區定義)
接著開始美化過程：
第一個必要技巧：「框線顏色千萬不要是黑的，資料顯示文字也是！」
黑色框線，容易搶掉要顯示的資料，而且容易增加觀看者眼睛的疲勞感。除非你有搭配好的色系，否則保險一點的框線顏色是灰色或淡灰，而字的顏色改成深灰色，所以改成：
.fancytable{border:1px solid #cccccc; width:100%; border-collapse:collapse;}
新增加指定每格字的顏色為深灰色，文字預設都置中：
.fancytable td{ border:1px solid #cccccc; color:#555555; text-align:center;}
(PS:表格通常會設為自動滿寬，所以後面先加上 [width:100%] 的敘述)
新增加指定每格字的顏色為深灰色，文字預設都置中：
.fancytable td{ border:1px solid #cccccc; color:#555555; text-align:center;}
第二個必要技巧：「奇偶列顏色千萬不要都一樣！」
讓奇偶列不同顏色，可以增加閱讀舒適度，顏色建議是：一列白色、一列淺顏色（非白色）相間，所以加上：
.datarowodd{background-color:#ffffff;}
.dataroweven{ background-color:#efefef;}
.dataroweven{ background-color:#efefef;}
若是要給討厭的IE6顯示，請多補上這兩列：
.datarowodd td{background-color:#ffffff;}
.dataroweven td{ background-color:#efefef;}
.dataroweven td{ background-color:#efefef;}
第三個必要技巧：標題列指定深色背景色、前景色用淺色或白色
標題通常要醒目，且最好不要跟一般資料列相同顏色，故把背景設為較深的顏色，前景（字）顏色設為白色，文字最好也置中顯示。
.headerrow{ background-color:#0066cc;}
新增加文字置中：
.headerrow td{ color:#ffffff; text-align:center;}
新增加文字置中：
.headerrow td{ color:#ffffff; text-align:center;}
第四個必要技巧：加大每列高度，增加閱讀性
不用吝嗇畫面高度，適宜的列高度能減少閱讀時的疲勞感，增加每列資料的辨識度。所以在原本的 .fancytable td{...}裡面加上列高：
.fancytable td{border:1px solid #cccccc; color:#555555;text-align:center; line-height:28px;}
經過上述一些簡單到不行的原則後，最後的css內容如下：
.fancytable{border:1px solid #cccccc; width:100%;border-collapse:collapse;}
.fancytable td{border:1px solid #cccccc; color:#555555;text-align:center;line-height:28px;}
.headerrow{ background-color:#0066cc;}
.headerrow td{ color:#ffffff; text-align:center;}
.datarowodd{background-color:#ffffff;}
.dataroweven{ background-color:#efefef;}
.datarowodd td{background-color:#ffffff;}
.dataroweven td{ background-color:#efefef;}
.fancytable td{border:1px solid #cccccc; color:#555555;text-align:center;line-height:28px;}
.headerrow{ background-color:#0066cc;}
.headerrow td{ color:#ffffff; text-align:center;}
.datarowodd{background-color:#ffffff;}
.dataroweven{ background-color:#efefef;}
.datarowodd td{background-color:#ffffff;}
.dataroweven td{ background-color:#efefef;}
第五個可有可無的技巧：加上div自定邊框
我會在<table>...</table>外面再包一層div，變成<div class="sexyborder"><table>...</table></div>，然後css裡加上對sexyborder的描述，如下：
.sexyborder{
border:1px solid #0066cc; padding:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
border:1px solid #0066cc; padding:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
最後表格變成這樣： (若你是比較新的瀏覽器，則框的角可以正常顯示圓角)
| 欄位名稱一 | 欄位名稱二 | 欄位名稱三 | 欄位名稱四 |
| 資料一 | 欄位內容 | 欄位內容 | 欄位內容 |
| 資料一 | 欄位內容 | 欄位內容 | 欄位內容 |
是不是跟原來的table長相差很多呢？
技巧很簡單，你一定也會，但因為簡單，你卻沒這樣做，還用著醜醜的表格，這是誰的問題？
[UI非難事，只存乎一心]， 咱們下次見！
謝謝您寫這篇文章 另小弟受益良多
不過想請教一下 如果小弟想在 欄位名稱四的欄位內容中的文字 靠框框的左邊
應該要加些什麼呢?
十分有用的教學!
原本死板的網頁瞬間變成類似PowerPoint2010表格般華麗