做了很长时间html。近几天做个简单的表格（不是报表），结果却无从下手。。。。。上网上一找，正好有一篇，摘抄如下（源地址：http://dev.firnow.com/course/1_web/webjs/2007111/81695_2.html）
在网页设计时，如果用到table,除了隐藏边框的用于实现布局的table外，往往希望能把边框显示出来，而对于显示出来的边框，又往往希望是单线的，因为双线的显得笨拙。本文总结了7种常用的实现单线表格的方法，供大家参考。当然，实现的方法很多，如果您有其它方法的话，也欢迎写出来，供大家一起学习。
1、如果简单的将table的边框设置为1，效果如下，它往往不是我们所喜欢的单线表格：
cell1cell2cell4cell3代码如下：
< 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的属性稍微作点修改，就能得到如下的单线表格：
cell1cell2cell4cell3
代码如下：
< 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所在页面的背景色调整)
cell1cell2cell4cell3
代码如下：
< 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所在页面的背景色调整)
cell1cell2cell4cell3
代码如下：
< 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的属性稍微作点变化，就能得到如下的单线表格：
cell1cell2cell4cell3
代码如下：
<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的属性稍微作点变化，就能得到如下的单虚线表格：
cell1cell2cell4cell3
代码如下：
< 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实现的单线表格如下：
cell1cell2cell4cell3
代码如下：
< 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实现的单虚线表格如下：
cell1cell2cell4cell3
代码如下：
< 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单拿出来，或者放在属性了罢了。只要经过适当的组合和运用，还能产生其它的方法。这也正是网页设计带给我们的乐趣所在，只要能够将各方面的知识灵活运用，有时候真是会感叹：只有想不到，没有做不到。
