用css設置表格樣式
*<table></table> 標簽定義 HTML 表格。
* tr 元素定義表格的行；th 元素定義表格的表頭；td 元素定義表格中的單元格；caption元素定義表格的標題；cellpadding元素定義單元格內文字與邊框的距離；cellspacing元素定義單元格之間的距離；
*每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）；一個<tr>...</tr>標記表示一行；一個<td>...</td>標記表示一列。
1、下面做一個普通的月考成績表，代碼：
<!doctype html>
<html >
<head>
<title>學生成績記錄</title>
</head>
<body>
<table border="1" cellpadding="4" cellspacing="1" bgcolor="#FAEBD7">
<caption>月考成績表</caption>
<tr>
<th>姓名</th> <th>語文</th> <th>數學</th> <th>英語</th> <th>總分</th>
</tr>
<tr>
<th>小紅</th> <td>80</td> <td>70</td> <td>90</td> <td>240</td>
</tr>
<tr>
<th>小明</th> <td>90</td> <td>80</td> <td>70</td> <td>240</td>
</tr>
<tr>
<th>小麗</th> <td>70</td> <td>80</td> <td>90</td> <td>240</td>
</tr>
<tr>
<th>小兵</th> <td>70</td> <td>90</td> <td>80</td> <td>240</td>
</tr>
</table>
</body>
</html>
效果圖：
以上是單純的html語言，並沒有css的修飾。
接下來將對單純的html語言結構進行css的修飾：
簡單案例1：
<style type="text/css">
.ways{ font: 15px 宋體; border:2px #777 solid; text-align:center; background-color:#FAEBD7 /*顏色：古董白*/ border-collapse:collapse; /*邊框折疊*/
width:500px;
} .way td{ border:1px #777 dashed; } .way th{ border:1px #777 solid; }v
</style>
效果圖：
上圖中的最外面的粗線框是整個表格的邊框，里面的每一個單元格都有自己的邊框，th和td 可以分別設置各自的邊框的樣式，例如這里th為像素的實線，td為1個像素的虛線。使用border-collapse屬性設置為collapse值來消除每個單元格之間的空隙。
border-collapse:collapse ; /*相鄰邊框合並*/
border-collapse:separate; /*相鄰邊框分離*/
2、加 thead（表頭），tbody（表體）和tfoot（表尾）的table表格是更加標准的表格寫法，一個正常標准的表格都包含表頭，表體，表尾。
這幾個標記主要是用於提高table標簽的加載以及顯示的。
使用css來格式表格時，通過這三個標記可以更方便地選擇要設置樣式的單元格。
簡單案例2：
<!DOCTYPE html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>產品目錄</title> <style type="text/css"> table{ border: 1px #333 solid; font: 12px arial; width: 500px } table caption { font-size: 24px; line-height:36px; color:white; background-color:#777; } tbody tr{ background-color: #CCC; } td,th{ padding: 5px; border: 2px solid #EEE; border-bottom-color: #666; border-right-color: #666; } thead tr,tfoot tr{ background:white; } </style> </head> <body> <table cellspacing="0"> <caption>Product List</caption> <thead> <tr> <th >產品</th> <th >ID</th> <th >國家</th> <th >價格</th> <th >顏色</th> <th >重量</th> </tr> </thead> <tbody> <tr > <th >電腦</th> <td>C184645</td> <td>China</td> <td>$3200.00</td> <td>Black</td> <td>5.20kg</td> </tr> <tr> <th >電視</th> <td>T 965874</td> <td>Germany</td> <td>$299.95</td> <td>White</td> <td>15.20kg</td> </tr> <tr > <th >電話</th> <td>P494783</td> <td>France</td> <td>$34.80</td> <td>Green</td> <td>0.90kg</td> </tr> <tr> <th >錄音機</th> <td>R349546</td> <td>China</td> <td>$111.99</td> <td>Silver</td> <td>0.30kg</td> </tr> <tr > <th >洗衣機</th> <td>W454783</td> <td>Japan</td> <td>$240.80</td> <td>White</td> <td>30.90kg</td> </tr> <tr> <th >冰箱</th> <td>F783990</td> <td>China</td> <td>$191.68</td> <td>blue</td> <td>32.80kg</td> </tr> </tbody> <tfoot> <tr> <th >總計</th> <th colspan="5">6種產品</th> </tr> </tfoot> </table> </body> </html>
效果圖：
上圖中加了 thead（表頭），tbody（表體）和tfoot（表尾）三個標記只是為了可以更方便地選擇要設置樣式的單元格。
3、隔行變色的表格
當一個表格中的行和列都很多的時候，並且數據很大的時候，為避免單元格采用相同的背景顏色會使瀏覽者感到凌亂~~發生看錯行的情況。這時候就需要修改一下表格，修改成方便瀏覽者觀看的表格---隔行變色的表格。
在css中實現隔行變色的方法十分簡單，只要給偶數行的<tr>標記都添加上相應的類型，然后后對其進行css設置即可。
（1）繼續引用上面的 “簡單案例2”，首先在html中，給所有的tbody中偶數行的<tr>標記增加一個“even”類別，如下：
<tr class="even">
<th >電視</th>
<td>T 965874</td>
<td>Germany</td>
<td>$299.95</td>
<td>White</td>
<td>15.20kg</td>
</tr>
設置“.even”與其他單元格的不同的樣式，如下：
tbody tr.even{ background-color: #AAA; }
效果圖：
上圖中是交替的兩種顏色不但可以使表格更美觀，而且更重要的是當表格的行列很多的時候，可以使查看者不易看錯行。
4、設置鼠標指針經過時整行變色提示的表格
為了讓瀏覽者方便觀看擁有多行、列的表格，后來出現了鼠標指針經過時整行變色提示的表格，只因為了改善用戶體驗！接下來繼續引用上面的 “簡單案例2”：
<!DOCTYPE html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>產品目錄</title> <style type="text/css"> table{ border: 1px #333 solid; font: 12px arial; width: 500px } table caption { font-size: 24px; line-height:36px; color:white; background-color:#777; } tbody tr{ background-color: #CCC; } td,th{ padding: 5px; border: 2px solid #EEE; border-bottom-color: #666; border-right-color: #666; } thead tr,tfoot tr{ background:white; } /***************************/ tbody tr:hover td, tbody tr:hover th{ background:aqua; border: 2px solid aqua; } /**************************/ </style> </head> <body> <table cellspacing="0"> <caption>Product List</caption> <thead> <tr> <th >產品</th> <th >ID</th> <th >國家</th> <th >價格</th> <th >顏色</th> <th >重量</th> </tr> </thead> <tbody> <tr > <th >電腦</th> <td>C184645</td> <td>China</td> <td>$3200.00</td> <td>Black</td> <td>5.20kg</td> </tr> <tr> <th >電視</th> <td>T 965874</td> <td>Germany</td> <td>$299.95</td> <td>White</td> <td>15.20kg</td> </tr> <tr > <th >電話</th> <td>P494783</td> <td>France</td> <td>$34.80</td> <td>Green</td> <td>0.90kg</td> </tr> <tr> <th >錄音機</th> <td>R349546</td> <td>China</td> <td>$111.99</td> <td>Silver</td> <td>0.30kg</td> </tr> <tr > <th >洗衣機</th> <td>W454783</td> <td>Japan</td> <td>$240.80</td> <td>White</td> <td>30.90kg</td> </tr> <tr> <th >冰箱</th> <td>F783990</td> <td>China</td> <td>$191.68</td> <td>blue</td> <td>32.80kg</td> </tr> </tbody> <tfoot> <tr> <th >總計</th> <th colspan="5">6種產品</th> </tr> </tfoot> </table> </body> </html>
效果圖：
