|
調(diào)整表頭的顯示效果
我們可以輕松的給表頭加上背景色，選用不同的字體，讓表頭更加的明顯，由于我們是使用了<th>標(biāo)簽而不是直接在行內(nèi)將內(nèi)容設(shè)為粗體,因此我們不必加上任何其他的標(biāo)簽,就能直接為表頭內(nèi)容設(shè)定樣式.
我們?cè)跇?biāo)題下面也加上一點(diǎn)內(nèi)補(bǔ)丁,同時(shí)還用不同的字體,顏色(當(dāng)然是紅色)以突出標(biāo)題內(nèi)容(圖3-7)
table {
border-top: 1px solid #999;
border-left: 1px solid #999;
}
caption {
font-family: Arial, sans-serif;
color: #993333;
padding-bottom: 6px;
}
th, td {
padding: 10px;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
}
th {
font-family: Verdana, sans-serif;
background: #ccc;
}
圖3-7:加上樣式的標(biāo)題和<th>
為表頭加上背景圖片
剛才我們?yōu)楸砀窭锏?lt;th>元素加上了灰色背景,但是我們其實(shí)可以更進(jìn)一步,用背景圖平鋪在格子里來作出漂亮的效果,舉例來說,我們能用細(xì)致的灰色條紋模擬出許多Mac OS X中的窗口樣式
小圖片
首先我們用photoshop(或者其它你熟悉的繪圖工具)建立一個(gè)小圖片,在這個(gè)例子中,我們要制作一個(gè)2像素灰色和2像素白色交替出現(xiàn)的效果,因此圖片只需要4像素高,寬度多款都無所謂,因?yàn)樗鼤?huì)在<th>里平鋪開來,做出我們想要的條紋效果.為了節(jié)省帶寬,我們只做1像素寬(圖3-8)
圖3-8:1X4的像素條紋圖片(放大后)
CSS
沿用剛才示例中的代碼,我們需要修改的地方只有把背景顏色換成剛制作好的小圖片路徑,除非另外制定,否則根據(jù)默認(rèn)設(shè)置,背景圖會(huì)自動(dòng)超每個(gè)方向平鋪.
table {
border-top: 1px solid #999;
border-left: 1px solid #999;
}
caption {
font-family: Arial, sans-serif;
color: #993333;
padding-bottom: 6px;
}
th, td {
padding: 10px;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
}
th {
font-family: Verdana, sans-serif;
background: url(th_stripe.gif);
}
圖3 -9是套用這個(gè)樣式后的表格,表頭部分分線了條紋背景,要實(shí)驗(yàn)其他的平鋪背景圖也很方便,你可以試試怎樣才能為表頭或資料做出最好看的效果,好好享受這個(gè)實(shí)驗(yàn)的過程吧.
圖3-9:在表頭使用平鋪背景的示例
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 標(biāo)記語言——邪惡的表格? [6] 下一頁 標(biāo)記語言——邪惡的表格? [8]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 7 頁 標(biāo)記語言——邪惡的表格? [7]
