单线表格实现方法讨论

做了很长时间html。近几天做个简单的表格（不是报表），结果却无从下手。。。。。上网上一找，正好有一篇，摘抄如下（源地址：http://dev.firnow.com/course/1_web/webjs/2007111/81695_2.html） 

 

 

在网页设计时，如果用到table,除了隐藏边框的用于实现布局的table外，往往希望能把边框显示出来，而对于显示出来的边框，又往往希望是单线的，因为双线的显得笨拙。本文总结了7种常用的实现单线表格的方法，供大家参考。当然，实现的方法很多，如果您有其它方法的话，也欢迎写出来，供大家一起学习。

1、如果简单的将table的边框设置为1，效果如下，它往往不是我们所喜欢的单线表格： 

cell1	cell2	cell4
cell3

代码如下：

< table  width =400  cellspacing =0   cellpadding =5   border =1 >
< tr >
< td >
cell1
</ td >
< td >
cell2
</ td >
< td  rowspan =2 >
cell4
</ td >
< tr >
< td  colspan =2 >
cell3
</ td >
</ table >

2、方法一：将table的属性稍微作点修改，就能得到如下的单线表格：

 

cell1	cell2	cell4
cell3

 

代码如下：

< table  width =400  cellspacing =0  cellpadding =5  border =1  bordercolordark ="#ffffff"  bordercolorlight ="#cc0000" >
< tr >
< td >
cell1
</ td >
< td >
cell2
</ td >
< td  rowspan =2 >
cell4
</ td >
< tr >
< td  colspan =2 >
cell3
</ td >
</ table >

3、方法二：将table的属性稍微作点变化，就能得到如下的单线表格：(此方法是通过颜色重叠实现的，应用是要根据table所在页面的背景色调整)

 

cell1	cell2	cell4
cell3

 

代码如下：

< table  width =400  cellspacing =1  cellpadding =5  border =0  bgcolor ="#cc0000" >
< tr  bgcolor ="#ffffff" >
< td >
cell1
</ td >
< td >
cell2
</ td >
< td  rowspan =2 >
cell4
</ td >
< tr  bgcolor ="#ffffff" >
< td  colspan =2 >
cell3
</ td >
</ table >

4、方法三：将table的属性稍微作点变化，就能得到如下的单线表格：(此方法是通过颜色重叠实现的，应用是要根据table所在页面的背景色调整)

 

cell1	cell2	cell4
cell3

 

代码如下：

< table  width =400  cellspacing =1  cellpadding =5  border =0  bgcolor ="#cc0000" >
< tr >
< td  bgcolor ="#ffffff" >
cell1
</ td >
< td  bgcolor ="#ffffff" >
cell2
</ td >
< td  rowspan =2  bgcolor ="#ffffff" >
cell4
</ td >
< tr  bgcolor ="#ffffff" >
< td  colspan =2  bgcolor ="#ffffff" >
cell3
</ td >
</ table >

5、方法四：将table的属性稍微作点变化，就能得到如下的单线表格：

 

cell1	cell2	cell4
cell3

 

代码如下：

<table width=400 cellspacing=0 cellpadding=5 border=1 style="border-collapse: collapse" bordercolor="#cc0000">
<tr>
<td>
cell1
</td>
<td>
cell2
</td>
<td rowspan=2>
cell4
</td>
<tr>
<td colspan=2>
cell3
</td>
</table>

6、方法五：将table的属性稍微作点变化，就能得到如下的单虚线表格：

 

cell1	cell2	cell4
cell3

 

代码如下：

< table  width =400   cellspacing =0  cellpadding =5  style ="border-collapse: collapse; border:1px dotted #cc0000"   >
< tr >
< td  style ="border-collapse: collapse; border:1px dotted #cc0000" >
cell1
</ td >
< td  style ="border-collapse: collapse; border:1px dotted #cc0000" >
cell2
</ td >
< td  rowspan =2  style ="border-collapse: collapse; border:1px dotted #cc0000" >
cell4
</ td >
< tr >
< td  colspan =2  style ="border-collapse: collapse; border:1px dotted #cc0000" >
cell3
</ td >
</ table >

7、结合css实现的单线表格如下：

 

cell1	cell2	cell4
cell3

 

代码如下：

< style  type ="text/css" >
<!--
#table7{
        border-top: 1px solid #cc0000;
        border-left: 1px solid #cc0000;
}
#table7 td{
        border-bottom:1px solid #cc0000;
        border-right: 1px solid #cc0000;
}
-->
</ style >
< table  width =400  cellspacing =0  cellpadding =5  id =table7 >
< tr >
< td >
cell1
</ td >
< td >
cell2
</ td >
< td  rowspan =2 >
cell4
</ td >
< tr >
< td  colspan =2 >
cell3
</ td >
</ table >

8、结合css实现的单虚线表格如下：

 

cell1	cell2	cell4
cell3

 

代码如下：

< style  type ="text/css" >
<!--
#table8{
        border-top: 1px dotted #cc0000;
        border-left: 1px dotted #cc0000;
}
#table8 td{
        border-bottom:1px dotted #cc0000;
        border-right: 1px dotted #cc0000;
}
-->
</ style >
< table  width =400  cellspacing =0  cellpadding =5  id =table8 >
< tr >
< td >
cell1
</ td >
< td >
cell2
</ td >
< td  rowspan =2 >
cell4
</ td >
< tr >
< td  colspan =2 >
cell3
</ td >
</ table >

其实，以上方法也有重复的地方，无非是把css单拿出来，或者放在属性了罢了。只要经过适当的组合和运用，还能产生其它的方法。这也正是网页设计带给我们的乐趣所在，只要能够将各方面的知识灵活运用，有时候真是会感叹：只有想不到，没有做不到。