主旨：
如何規劃一個表格樣式
網路上其實已經有很多表格樣式可以參考了，但除了表格樣式外，欄位的屬性很重要。
利用 class 去作欄位定義，讓每一欄都有不一樣的成員名稱，就算有些欄位根本不需要定義樣式，但建議最好還是保留名稱的設定，也許有一天會去用到，這樣之後要作欄位調整時才不用大興土木，去為每個樣版裡改表格樣式。
在 HTML 的規劃上最好用一個 <div></div> 包起來，再處理邊界上的設定時才不會因為瀏覽器的差異造成問題。
這裡我用到 hover 的方式去處理滑鼠滑過的效果，對於 IE6 的處理方式請看利用 JavaScript 讓 IE6 支援 CSS 2.0 hover 的方法。
對於表格在之前有遇過一個奇怪的狀況，就是在設有 white-space:nowrap; 的欄位上寬度只能用 ％ 去定義，在 (IE6) white-space 在表格中怪問題 有說明。
HTML 結構
<div class="TableList">
<table cellspacing="0" cellpadding="0">
<tr>
<th class="Image">Picture</th>
<th class="Title">Title</th>
<th class="Date">Date</th>
</tr>
<tr class="Odd">
<td class="Image"><!--圖片--></td>
<td class="Title"><!--文字--></td>
<td class="Date"><!--日期--></td>
</tr>
<tr class="Even">
<td class="Image"><!--圖片--></td>
<td class="Title"><!--文字--></td>
<td class="Date"><!--日期--></td>
</tr>
<tr class="Odd">
<td class="Image"><!--圖片--></td>
<td class="Title"><!--文字--></td>
<td class="Date"><!--日期--></td>
</tr>
<tr class="Even">
<td class="Image"><!--圖片--></td>
<td class="Title"><!--文字--></td>
<td class="Date"><!--日期--></td>
</tr>
</table>
</div>
CSS 設定
/*=( 表格列表樣式 )=*/
.TableList {
text-align:center;
padding:1em;
}
.TableList table{
border-collapse:collapse;
font-size:0.9em;
width:100%;
text-align:center;
}
/*欄位間距*/
.TableList th,
.TableList td{
padding:.5em;
}
/*標題列*/
.TableList th{
border:1px solid #fff;
white-space:nowrap;
background:#328aa4 url(tr_bg1.gif) repeat-x;
color:#fff;
}
.TableList th a{color:#fff;}
/*單列底線樣式*/
.TableList tr{
border-bottom:1px solid #fff;
_behavior: url(ie_hover.htc);/*IE6 hover*/
}
/*奇數列底色樣式*/
.TableList tr.Odd {background:#FFF;}
/*偶數列底色樣式*/
.TableList tr.Even {background:#eee;}
/*hover 樣式*/
.TableList tr.hover td,
.TableList tr:hover td{
background:#e5f1f4;
}
/*=( 欄位設定 )=*/
/*圖片*/
.TableList th.Image,
.TableList td.Image{
width:50px;
}
.TableList td.Image img{
width:30px;
height:30px;
}
/*標題*/
.TableList td.Title{
text-align:left;
font-size:14px;
}
/*日期*/
.TableList td.Date{
width:3%;
white-space:nowrap;
}
參考頁面：
Last.fm
Wacanai.com
