2009-07-24

CSS 部屬經驗-表格樣式

為了 IE6 的相容這裡我不會用太新穎的選擇器,希望有一天 IE6 的使用群可以消失,這樣在排版時可以不去顧慮 IE6 的問題。

主旨:
  1. 如何規劃一個表格樣式
  2. HTML 結構
  3. CSS 設定

如何規劃一個表格樣式
網路上其實已經有很多表格樣式可以參考了,但除了表格樣式外,欄位的屬性很重要。

利用 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

0 回應: