關於表格的美化

在web開發中,我們經常會遇到表格的美化,這裏介紹幾種最常用的表格的美化方式。
在表格美化中用的最多的估計就是細化表格的邊框,[color=red]細化邊框與table的cellspacing屬性息息相關[/color];在table中還有個很容易與cellspacing混淆的屬性叫做cellpading,他們的區別如下圖所示:
[img]http://dl.iteye.com/upload/attachment/0066/0163/90e0aa9d-5e5f-32f4-9ed5-f7c2c7510b72.bmp[/img]

第一種也是最常用的一種直接在table中加如下屬性,其輸出效果如圖1所示:
style="border-collapse:collapse" border="1" bordercolor="#000000"
第二種與第一種類似也是直接在table中加入如下屬性,其輸出效果如圖2所示:
cellspacing="0" border="1" bordercolor="#000000"
第三種(注意這種模式下的打印結果將無法輸出裏面的表格)是用css來控制,其相關的css如下:
<style type="text/css">
.alltable{
border:1px solid #09F;
background-color:#CCC;
}

.alltable td{
background-color:#FFF;
}
</style>
然後在table中加入如下屬性:
class="alltable" cellpadding="1" cellspacing="1"
其輸出效果圖如圖3所示

[img]http://dl.iteye.com/upload/attachment/0066/0187/a063e9d2-acee-321b-996d-e2646582671b.bmp[/img]
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章