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