当前位置: 代码迷 >> Web前端 >> 关于报表的美化
  详细解决方案

关于报表的美化

热度:22   发布时间:2012-08-14 10:39:57.0
关于表格的美化
  在web开发中,我们经常会遇到表格的美化,这里介绍几种最常用的表格的美化方式。
  在表格美化中用的最多的估计就是细化表格的边框,细化边框与table的cellspacing属性息息相关;在table中还有个很容易与cellspacing混淆的属性叫做cellpading,他们的区别如下图所示:


第一种也是最常用的一种直接在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所示




  相关解决方案