我们可以使用bordercolorlight与bordercolordark 来设置Table的边框,使之变得漂亮;
1、 bordercolorlight与bordercolordark的用法(这种用法只限于IE)
<table cellspacing="0" bordercolordark='#D3D8E0' bordercolorlight='#4F7FC9' cellpadding="5" border="1" width="80%">
<tr>
<td style="background-color:#e3efff;">
第一行e3efff
</td>
</tr>
<tr>
<td style="background-color:#f5f9ff;">
第二行f5f9ff
</td>
</tr>
</table>
2、 通过css设置边框属性达到同样的效果
<style type="text/css">
TABLE.colorTest{
border-top: 1px solid #4F7FC9;
border-left: 1px solid #4F7FC9;
border-right: 0px;
border-bottom: 0px;
}
.colorTest TD{
border-top: 1px solid #D3D8E0;
border-left: 1px solid #D3D8E0;
border-right: 1px solid #4F7FC9;
border-bottom: 1px solid #4F7FC9;
}
</style>
Table可以使用上面定义的样式达到同样的效果,而且是多浏览器中;
<table class="colorTest" cellpadding="1" cellspacing="0" border="1px" width="80%" border="1">
<tbody>
<tr bgcolor="#e3efff">
<td>
第一行
</td>
</tr>
<tr bgcolor="#f5f9ff">
<td>
第二行
</td>
</tr>
</tbody>
</table>
一般table样式加这两个属性BORDERCOLORLIGHT="B4DBFA" BORDERCOLORDARK="#FFFFFF"会比较好看一点,但是在css中不好定义,而且这两个属性是ie独有的,在火狐上显示不出特性。
不过还是可以通过css来通过定义的。
border-top : 1px solid #B4DBFA ;
border-left : 1px solid #B4DBFA ;
border-right : 0px ;
border-bottom : 0px ;
}
.colorTest TD {
border-top : 1px solid #FFFFFF ;
border-left : 1px solid #FFFFFF ;
border-right : 1px solid #B4DBFA ;
border-bottom : 1px solid #B4DBFA ;
}
而且
CELLSPACING="0" CELLPADDING="0"
这两个属性也可以通过这个方法来定义
border-collapse : collapse ;
}
.colorTest TD {
padding : 0 ;
}