在前一段時間制作了CSS calendar，然后我就想用css制作一個table的模型，該模型遵循親和力規則，而且有良好的視覺效果圖：顏色的選擇和搭配這樣做的好處是： 利用表格來裝載數據，不言而喻是最好的，你可以很靈活的為每個單元格定義樣式。下面是具體的做法首先在photoshop設計一個效果出來，通過對各種顏色，小圖標等的常識，做出了一個效果令人滿意的效果圖來。下一步呢，裁處下面三個圖片來作為標題的背景圖片，如果你對顏色的把握不是很好的話，這里給你提供一些調色工具www.snook.ca/technical/colour_contrast/colour.htmlveerle.duoh.com/comments.php?id=108_0_2_20_C8數據結構為Table 1: Power Mac G5 tech specs Configurations Dual 1.8GHz Dual 2GHz Dual 2GHz Model M9454LL/A M9455LL/A M9457LL/A... 可以看到我用了scope 屬性來確保這個表格在無視覺效果的瀏覽器下展示出更好的效果，這個屬性定義標題元素包含的標題內容是否為 行 (scope="col") 或 列(scope="row") 。下面是CSS的內容對于上面的標題，使用和背景來更好的區分出他們th {: 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;: 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;: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,sans-serif;color: #B4AA9D;} 這里的數據來自于MAC的technical specifications of each Power Mac G5http://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實現行兩種背景交替顯示。

分享文章：用CSS制作親和力的表格[網站建設]
標題鏈接：http://m.newbst.com/news2/33552.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站建設等

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯