做出漂亮的网页表格(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;    
}