表格线的制作技法，我们现在要制作一个数据表格，希望每一个单元格均用黑线包围，那么如何制作呢？如下图所示：
650)this.width=650;" src="http://www.faridea.com/bbs/images/fileType/gif.gif" onload="javascript:if(this.width>650)this.width=650;" align=middle border=0>此主题相关图片
650)this.width=650;" onclick=javascript:window.open(this.src); src="http://www.faridea.com/bbs/images/upload/2004/12/21/101216.gif" onload="javascript:if(this.width>650)this.width=650;" align=middle border=0>
首先我们使用经典的“21法则”：也就是cellpadding为2，cellspacing为1，表格背景有颜色，td再设背景色，利用表格间的缝隙来加上交叉线
<table width="500" border="0" cellpadding="2" cellspacing="1" bgcolor="#000000">
<tr bgcolor="#FFFFFF">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
由于不想帖子太长，请手动多加一些<tr>使效果更明显，当然最后我会给出一个Example下载。
这是N年一直在使用的方法，简单易用，但是，现在都在强调样式分离，OK，为了追赶潮流，让我们用CSS来做这件事。
CSS方法1：模仿“21法则”
表格仍然是那个表格，为了方便我们给表格起名为
<table id="table1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
OK，这是一个干净的表格，我们用CSS来定义他
#table1{
background-color:#000000;//表格整体背景黑色，也就是缝隙间的颜色
width:500px;
padding:0px;
border-spacing:1px;//表格缝隙1个px
}
#table1 td{
background-color:#FFFFFF;
}
但是，你会发现在IE下显示表格线会显得很粗。。。由于IE对CSS2标准支持不够，所以显示不是像预想的一样（广告时间：在这里推荐一下Mozilla浏览器：））
那么如何使用CSS，才能在所有浏览器均显示正常呢？并且不利用这种缝隙法的歪门邪道，而就是利用border来做呢：），OK答案就在下面。
重新建立一个表格id="table2"
#table2{
border:1px solid #000000;//为表格外面画线
width:500px;
padding:0px;
border-collapse:collapse;//由于td四周画线，所以某些线会绘制两次，会变粗，使用这个属性可以自动合并同类项
border-spacing:0px;//表格间无需空隙
}
#table2 td{
border:1px solid #000000;//为td四周画线
}
OK，以上CSS和“21法则”的效果是完全相同的，IE和Mozill均显示正常，而且是样式与表格进行了脱藕：）
完整代码下载：
650)this.width=650;" src="http://www.faridea.com/bbs/images/fileType/zip.gif" onload="javascript:if(this.width>650)this.width=650;" align=middle border=0>此主题相关文件 102537.zip
你想就此主题发表评论请到：http://www.faridea.com/bbs/Announce/Announce.asp?BoardID=301&ID=3923&AUpflag=1&ANum=1
本文地址：http://com.8s8s.com/it/it30976.htm