网页中多个table嵌套的一些小技巧
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的表格中的表格外边框都会自动隐藏起来了，挺方便的。
希望有什么好的技巧的朋友能够分享一下自己的经验，谢谢了！
