|
表格邪惡?jiǎn)?
我想,如果我們根據(jù)表格標(biāo)簽設(shè)計(jì)之初的目的好好使用的話,那么答案就肯定是"不!".濫用表格創(chuàng)建復(fù)雜嵌套的布局的行為理所當(dāng)然會(huì)遭到譴責(zé),但是表格的確會(huì)給資料區(qū)塊提供它需要的良好的結(jié)構(gòu).
我們不能在整本書(shū)里都敘述創(chuàng)建完美表格所需要的各種技巧,因此就此打住,希望你已經(jīng)開(kāi)始知道如何創(chuàng)建簡(jiǎn)單的又具有可用性的方便css修飾的簡(jiǎn)單表格.
談到樣式,讓我們用幾種不同的css技巧修飾一下之前的示例.
技巧延伸
與之前章節(jié)一樣,我們用靈活的語(yǔ)義化的結(jié)構(gòu)化的標(biāo)記為基礎(chǔ),然后用css給他加上一些樣式
首先,我們先來(lái)看看簡(jiǎn)單的邊框技巧,在示例上創(chuàng)建單線邊框,然后我們?cè)贋楸砀駱?biāo)題和表頭加上獨(dú)特的樣式
建立邊框
已經(jīng)對(duì)border默認(rèn)屬性的3維效果感到厭倦了么?我也是.一般來(lái)說(shuō),為table標(biāo)簽加上border="1"就會(huì)與圖3-1的效果類(lèi)似,當(dāng)然你也能換個(gè)方法,這邊有一個(gè)用css做出漂亮整潔邊框的訣竅.首先,我們給每個(gè)<th><td>單元格兩側(cè)(右側(cè)和底部)加上一像素的邊框:
th, td {
border-right: 1px solid #999;
border-bottom: 1px solid #999;
}
只加上兩側(cè)邊框,是建立各處邊框等寬又同時(shí)讓大部分流行的瀏覽器能夠正確顯示的關(guān)鍵所在.如果我在四周都加上邊框,那么邊框的頂部和左側(cè)會(huì)在單元格排列時(shí)造成重疊,在稍后的示例中,我會(huì)給出一種只用一條border規(guī)則就達(dá)成小童效果的方法.
你會(huì)發(fā)現(xiàn)圖3-2中的整個(gè)表格只缺少了最頂部和最左側(cè)的邊線,為了補(bǔ)齊邊框,我們給<table>元素加上樣式相同的border-top和border-left屬性
table {
border-top: 1px solid #999;
border-left: 1px solid #999;
}
th, td {
border-right: 1px solid #999;
border-bottom: 1px solid #999;
}
圖3-2:為th和td加上兩側(cè)邊線的表格示例
圖3-3 補(bǔ)齊邊線后的表格示例
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 標(biāo)記語(yǔ)言——邪惡的表格? [4] 下一頁(yè) 標(biāo)記語(yǔ)言——邪惡的表格? [6]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 5 頁(yè) 標(biāo)記語(yǔ)言——邪惡的表格? [5]
