用css制作具有親和力的表格

2020-03-24 18:23:51

字體：大中小

供稿：網(wǎng)友

在前一段時(shí)間制作了CSS calendar，然后我就想用css制作一個(gè)table的模型，該模型遵循親和力規(guī)則，而且有良好的視覺(jué)效果圖：顏色的選擇和搭配這樣做的好處是：利用表格來(lái)裝載數(shù)據(jù)，不言而喻是最佳的，你能非常靈活的為每個(gè)單元格定義樣式。下面是具體的做法首先在photoshop設(shè)計(jì)一個(gè)效果出來(lái)，通過(guò)對(duì)各種顏色，小圖標(biāo)等的常識(shí)，做出了一個(gè)效果令人滿(mǎn)意的效果圖來(lái)。下一步呢，裁處下面三個(gè)圖片來(lái)作為標(biāo)題的背景圖片，如果你對(duì)顏色的把握不是非常好的話(huà)，這里給你提供一些調(diào)色工具www.snook.ca/technical/colour_contrast/colour.htmlveerle.duoh.com/comments.php?id=108_0_2_20_C8數(shù)據(jù)結(jié)構(gòu)為 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" 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" Model /th
td M9454LL/A /td
td M9455LL/A /td
td M9457LL/A /td
/tr
... 能看到我用了scope 屬性來(lái)確保這個(gè)表格在無(wú)視覺(jué)效果的瀏覽器下展示出更好的效果，這個(gè)屬性定義標(biāo)題元素包含的標(biāo)題內(nèi)容是否為行 (scope="col") 或列(scope="row") 。下面是CSS的內(nèi)容對(duì)于上面的標(biāo)題，使用和背景來(lái)更好的區(qū)分出他們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;
} 下面定義左側(cè)的標(biāo)題樣式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;
} 這里的數(shù)據(jù)來(lái)自于MAC的technical specifications of each Power Mac G5|http://www.apple.com/powermac/specs.html下來(lái)定義普通的和重要的數(shù)據(jù)內(nèi)容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;
} 至此，整個(gè)制作過(guò)程結(jié)束了html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：針對(duì)不同的瀏覽器寫(xiě)不同的CSS code

下一篇：css鼠標(biāo)懸停動(dòng)畫(huà)