1、以前经常用到的一个表格边框样式技巧(把表格的背景色设为黑色或其它颜色,然后又把单元格设为白色或其它的网页背景色),如下图:
图一 1px的表格(颜色可自己选)
代码如下:
1 <table width="600" border="0" cellpadding="0" cellspacing="1" bgcolor="#FF0000"> 2 <tr> 3 <td width="200" bgcolor="#FFFFFF"> </td> 4 <td width="200" bgcolor="#FFFFFF"> </td> 5 <td bgcolor="#FFFFFF"> </td> 6 </tr> 7 <tr> 8 <td bgcolor="#FFFFFF"> </td> 9 <td bgcolor="#FFFFFF"> </td> 10 <td bgcolor="#FFFFFF"> </td> 11 </tr> 12 <tr> 13 <td bgcolor="#FFFFFF"> </td> 14 <td bgcolor="#FFFFFF"> </td> 15 <td bgcolor="#FFFFFF"> </td> 16 </tr> 17 </table>
说明:
“cellpacing='1'”,这个是设边框的象素。
“bgcolor='#FF0000'”,这个是设“边框”的颜色。
“<td bgcolor='#FFFFFF'>”,这个是设单元格的背景色,这个要跟表格所在的位置的背色一致,如果是不规则图片,这个就不好使了。
2、有的地方,可能需要用表格嵌来嵌去,如果仍用以上的方法,效果可能会像下面这幅图那样,也不好看。
图二 两个1px的表格嵌套效果
看到吧,两个三行三列的表格嵌在一起了,它们的衔接处灰常不好看,那有什么办法呢?思路很简单,但却试了好久也试不出这种1px的表格的CSS样式,退而求其次,对于border=1的表格倒是解决了。这里,要用到下面表格的一个属性,注意红字部分。
值 | 描述 |
---|---|
void | 不显示外侧边框。 |
above | 显示上部的外侧边框。 |
below | 显示下部的外侧边框。 |
hsides | 显示上部和下部的外侧边框。 |
vsides | 显示左边和右边的外侧边框。 |
lhs | 显示左边的外侧边框。 |
rhs | 显示右边的外侧边框。 |
box | 在所有四个边上显示外侧边框。 |
border | 在所有四个边上显示外侧边框。 |
frame="void",它这个可以解决了两个表格嵌套之间边框叠加的烦恼,好了,废话不多说,直接切入主题,先看效果对比:
图三 两个border=1的普通表格嵌套
图四 最里面表格加入frame=void后的效果
源代码:
1 <table width="600" border="1" cellspacing="0" cellpadding="0"> 2 <tr> 3 <td width="200"> </td> 4 <td width="200"> </td> 5 <td width="200"> </td> 6 </tr> 7 <tr> 8 <td> </td> 9 <td><table frame="void" width="200" border="1" cellspacing="0" cellpadding="0"> 10 <tr> 11 <td> </td> 12 <td> </td> 13 <td> </td> 14 </tr> 15 <tr> 16 <td> </td> 17 <td> </td> 18 <td> </td> 19 </tr> 20 <tr> 21 <td> </td> 22 <td> </td> 23 <td> </td> 24 </tr> 25 </table></td> 26 <td> </td> 27 </tr> 28 <tr> 29 <td> </td> 30 <td> </td> 31 <td> </td> 32 </tr> 33 </table>
另外,如果表格多了起来,比如像下面这幅图这样:
图五 多个2层表格嵌套
可以这样写,源码:
1 <style type="text/css"> 2 .seasons1987 table { 3 border-top-width: 0px; 4 border-right-width: 0px; 5 border-bottom-width: 0px; 6 border-left-width: 0px; 7 } 8 </style> 9 <table width="600" border="1" cellpadding="0" cellspacing="0" class="seasons1987"> 10 <tr> 11 <td width="200"><table width="200" border="1" cellspacing="0" cellpadding="0"> 12 <tr> 13 <td> </td> 14 <td> </td> 15 <td> </td> 16 </tr> 17 <tr> 18 <td> </td> 19 <td> </td> 20 <td> </td> 21 </tr> 22 <tr> 23 <td> </td> 24 <td> </td> 25 <td> </td> 26 </tr> 27 </table></td> 28 <td width="200"> </td> 29 <td width="200"><table width="200" border="1" cellspacing="0" cellpadding="0"> 30 <tr> 31 <td> </td> 32 <td> </td> 33 <td> </td> 34 </tr> 35 <tr> 36 <td> </td> 37 <td> </td> 38 <td> </td> 39 </tr> 40 <tr> 41 <td> </td> 42 <td> </td> 43 <td> </td> 44 </tr> 45 </table></td> 46 </tr> 47 <tr> 48 <td> </td> 49 <td><table width="200" border="1" cellspacing="0" cellpadding="0"> 50 <tr> 51 <td> </td> 52 <td> </td> 53 <td> </td> 54 </tr> 55 <tr> 56 <td> </td> 57 <td> </td> 58 <td> </td> 59 </tr> 60 <tr> 61 <td> </td> 62 <td> </td> 63 <td> </td> 64 </tr> 65 </table></td> 66 <td> </td> 67 </tr> 68 <tr> 69 <td><table width="200" border="1" cellspacing="0" cellpadding="0"> 70 <tr> 71 <td> </td> 72 <td> </td> 73 <td> </td> 74 </tr> 75 <tr> 76 <td> </td> 77 <td> </td> 78 <td> </td> 79 </tr> 80 <tr> 81 <td> </td> 82 <td> </td> 83 <td> </td> 84 </tr> 85 </table></td> 86 <td> </td> 87 <td><table width="200" border="1" cellspacing="0" cellpadding="0"> 88 <tr> 89 <td> </td> 90 <td> </td> 91 <td> </td> 92 </tr> 93 <tr> 94 <td> </td> 95 <td> </td> 96 <td> </td> 97 </tr> 98 <tr> 99 <td> </td> 100 <td> </td> 101 <td> </td> 102 </tr> 103 </table></td> 104 </tr> 105 </table>
这样,所有嵌套在class=seasons1987的表格中的表格外边框都会自动隐藏起来了,挺方便的。
希望有什么好的技巧的朋友能够分享一下自己的经验,谢谢了!