文章地址:http://blog.chinaunix.net/u/6138/showart_193355.html
在网页中制作一个带边框的表格时,即使把border设为1还是很粗,很难看,
有人说到过用cellpadding="*" cellspacing="*"的方法设置,但比较麻烦,原理也不好理解,
其实用css控制就非常容易了。只需要在css文件中加上
table#border{
border-top:#000 1px solid;
border-left:#000 1px solid;
}
table#border td{
border-bottom:#000 1px solid;
border-right:#000 1px solid;
}
然后再要加边框的html文件中加上
<table id="border" width="100%" border="0" cellpadding="0" cellspacing="0">
其中CSS中的table表示修饰的对象是table,#表示这是一个ID。效果很好。
不用在table里加样式border-collapse:collapse,从而使table达到细线边框效果(border-width:1px)
<style>
table#border{
border-top:#000 1px solid;
border-left:#009 1px solid;
}
table#border td{
border-bottom:#090 1px solid;
border-right:#e00 1px solid;
}
</style><table id="border" width="234" border="0" cellpadding="0" cellspacing="0" height="99"><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr></table>
|
<style>
table#border {
background: #f00;
}
table#border td {
background: #fff;
}
</style>
<table id="border" width="234" border="0" cellpadding="0" cellspacing="1" height="99"><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr></table>
|