《Html旁门左道》第六天：表格线的制作技法

 

表格线的制作技法，我们现在要制作一个数据表格，希望每一个单元格均用黑线包围，那么如何制作呢？如下图所示： 此主题相关图片 首先我们使用经典的“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均显示正常，而且是样式与表格进行了脱藕：） 完整代码下载： 此主题相关文件 102537.zip

你想就此主题发表评论请到： http://www.faridea.com/bbs/Announce/Announce.asp?BoardID=301&ID=3923&AUpflag=1&ANum=1