用CSS定义表格边框的方法

网络整理 - 07-27
在网页布局的时候我们不仅可以使用表格,还可以使用Div+Css进行页面布局,并且也可以用CSS对table进行修饰定义。所以,如何用CSS定义表格边框就成了一个简单的问题。

由于有朋友问到这个问题,所以不得不来解答一下,为那些对CSS不是很了解的朋友解惑。

在网页中虽然不能说CSS是万能的,但遇到问题的时候想想怎样用它来解决,一般都能找到方法。在原来介绍CSS边框的文章中,我很详细的介绍过边框属性的用处和用法,详情请参考《CSS边框属性(border)的如何使用》。

定义table的边框,其实只是CSS边框属性应用方法之一,可以给大家启发,举一反三。下面我来解决网友的问题,如果让表格table内外的水平和垂直边框颜色都不同。

先列出table的代码:

<table width="200" height="200" border="0" cellpadding="0" cellspacing="0" class="colorfultable ">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
如果页面中的所有表格都要定义的话,可以如下定义:

table {
border-top:1px solid #F00; /*上部边框*/
border-bottom:1px solid #F00; /*下部边框*/
border-left:1px solid #000; /*左部边框*/
border-right:1px solid #000; /*右部边框*/
}
如果只定义某个table,可以如下定义:

.colorfultable {
border-top:1px solid #F00; /*上部边框*/
border-bottom:1px solid #F00; /*下部边框*/
border-left:1px solid #000; /*左部边框*/
border-right:1px solid #000; /*右部边框*/
}
table引用这个class的地方就在<table width="200" height="200" border="0" cellpadding="0" cellspacing="0" class="colorfultable ">处。

以上是定义了table的外边框。如果要定义table内部的单元格td也同理,只要加上td标签即可。

如果页面中的所有表格内都要定义的话,可以如下定义:

table td {
border-top:1px solid #F00; /*上部边框*/
border-bottom:1px solid #F00; /*下部边框*/
border-left:1px solid #000; /*左部边框*/
border-right:1px solid #000; /*右部边框*/
}
如果只定义某个table,可以如下定义:

.colorfultable td {
border-top:1px solid #F00; /*上部边框*/
border-bottom:1px solid #F00; /*下部边框*/
border-left:1px solid #000; /*左部边框*/
border-right:1px solid #000; /*右部边框*/
}
到此,表格table边框的定义方法就算完成了,如果以上内容中有任何看不明白的地方,请参阅一下《CSS边框属性(border)的如何使用》这篇文章。