在前一段時間制作了CSS calendar，然后我就想用css制作一個table的模型，該模型遵循親和力規(guī)則，而且有良好的視覺效果

圖：顏色的選擇和搭配

這樣做的好處是： 利用表格來裝載數(shù)據(jù)，不言而喻是最好的，你可以很靈活的為每個單元格定義樣式。下面是具體的做法

首先在photoshop設(shè)計一個效果出來，通過對各種顏色，小圖標等的常識，做出了一個效果令人滿意的效果圖來。下一步呢，裁處下面三個圖片來作為標題的背景圖片，如果你對顏色的把握不是很好的話，這里給你提供一些調(diào)色工具

www.snook.ca/technical/colour_contrast/colour.html

veerle.duoh.com/comments.php?id=108_0_2_20_C8

數(shù)據(jù)結(jié)構(gòu)為

可以看到我用了scope 屬性來確保這個表格在無視覺效果的瀏覽器下展示出更好的效果，這個屬性定義標題元素包含的標題內(nèi)容是否為 行 (scope="col") 或 列(scope="row") 。下面是CSS的內(nèi)容對于上面的標題，使用和背景來更好的區(qū)分出他們

下面定義左側(cè)的標題樣式

這里的數(shù)據(jù)來自于MAC的technical specifications of each Power Mac G5|http://www.apple.com/powermac/specs.html下來定義普通的和重要的數(shù)據(jù)內(nèi)容

至此，整個制作過程結(jié)束了

譯者的話：這個頁面經(jīng)我測試通過W3C標準嚴格型驗證，而且兼容IE，Firefox，Opera等主流瀏覽器，對于大量數(shù)據(jù)，可以利用js實現(xiàn)行兩種背景交替顯示。