做出漂亮的网页表格(CSS代替bordercolorlight与bordercolordark)

我们可以使用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来通过定义的。

代码

TABLE.colorTest{

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"

这两个属性也可以通过这个方法来定义

TABLE.colorTest{

border-collapse:collapse;

}

.colorTest TD {

padding: 0;

}