关于表格的美化

在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]
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章