圖：顏色的選擇和搭配
這樣做的好處是： 利用表格來裝載數據，不言而喻是最好的，你可以很靈活的為每個單元格定義樣式。下面是具體的做法
首先在Photoshop設計一個效果出來，通過對各種顏色，小圖標等的常識，做出了一個效果令人滿意的效果圖來。下一步呢，裁處下面三個圖片來作為標題的背景圖片，如果你對顏色的把握不是很好的話，這裡給你提供一些調色工具
www.snook.ca/technical/colour_contrast/colour.Html
veerle.duoh.com/comments.PHP?id=108_0_2_20_C8
數據結構為
<table id="mytable" cellspacing="0" summary="The technical
specifications of the Apple PowerMac G5 serIEs">
<caption>Table 1: Power Mac G5 tech specs </caption>
<tr>
<th scope="col" abbr="Configurations" class="nobg">Configurations</th>
<th scope="col" abbr="Dual 1.8GHz">Dual 1.8GHz</th>
<th scope="col" abbr="Dual 2GHz">Dual 2GHz</th>
<th scope="col" abbr="Dual 2.5GHz">Dual 2GHz</th>
</tr>
<tr>
<th scope="row" class="spec">Model</th>
<td>M9454LL/A</td>
<td>M9455LL/A</td>
<td>M9457LL/A</td>
</tr>
...
可以看到我用了scope 屬性來確保這個表格在無視覺效果的浏覽器下展示出更好的效果，這個屬性定義標題元素包含的標題內容是否為 行 (scope="col") 或 列(scope="row") 。下面是CSS的內容對於上面的標題，使用和背景來更好的區分出他們
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica,
sans-serif;
color: #6D929B;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
下面定義左側的標題樣式
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(images/bullet1.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
sans-serif;
}
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(images/bullet2.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
sans-serif;
color: #B4AA9D;
}
這裡的數據來自於MAC的technical specifications of each Power Mac G5|http://www.apple.com/powerMac/specs.Html下來定義普通的和重要的數據內容
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #6D929B;
}
td.alt {
background: #F5FAFA;
color: #B4AA9D;
}
至此，整個制作過程結束了
譯者的話：這個頁面經我測試通過W3C標准嚴格型驗證，而且兼容IE，Firefox，Opera等主流浏覽器，對於大量數據，可以利用JS實現行兩種背景交替顯示。