网页中多个table嵌套的一些小技巧

1、以前经常用到的一个表格边框样式技巧（把表格的背景色设为黑色或其它颜色，然后又把单元格设为白色或其它的网页背景色），如下图：

图一 1px的表格（颜色可自己选）

代码如下：

 1 <table width="600" border="0" cellpadding="0" cellspacing="1" bgcolor="#FF0000">

 2   <tr>

 3     <td width="200" bgcolor="#FFFFFF">&nbsp;</td>

 4     <td width="200" bgcolor="#FFFFFF">&nbsp;</td>

 5     <td bgcolor="#FFFFFF">&nbsp;</td>

 6   </tr>

 7   <tr>

 8     <td bgcolor="#FFFFFF">&nbsp;</td>

 9     <td bgcolor="#FFFFFF">&nbsp;</td>

10     <td bgcolor="#FFFFFF">&nbsp;</td>

11   </tr>

12   <tr>

13     <td bgcolor="#FFFFFF">&nbsp;</td>

14     <td bgcolor="#FFFFFF">&nbsp;</td>

15     <td bgcolor="#FFFFFF">&nbsp;</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">&nbsp;</td>

 4     <td width="200">&nbsp;</td>

 5     <td width="200">&nbsp;</td>

 6   </tr>

 7   <tr>

 8     <td>&nbsp;</td>

 9     <td><table frame="void" width="200" border="1" cellspacing="0" cellpadding="0">

10       <tr>

11         <td>&nbsp;</td>

12         <td>&nbsp;</td>

13         <td>&nbsp;</td>

14       </tr>

15       <tr>

16         <td>&nbsp;</td>

17         <td>&nbsp;</td>

18         <td>&nbsp;</td>

19       </tr>

20       <tr>

21         <td>&nbsp;</td>

22         <td>&nbsp;</td>

23         <td>&nbsp;</td>

24       </tr>

25     </table></td>

26     <td>&nbsp;</td>

27   </tr>

28   <tr>

29     <td>&nbsp;</td>

30     <td>&nbsp;</td>

31     <td>&nbsp;</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>&nbsp;</td>

 14         <td>&nbsp;</td>

 15         <td>&nbsp;</td>

 16       </tr>

 17       <tr>

 18         <td>&nbsp;</td>

 19         <td>&nbsp;</td>

 20         <td>&nbsp;</td>

 21       </tr>

 22       <tr>

 23         <td>&nbsp;</td>

 24         <td>&nbsp;</td>

 25         <td>&nbsp;</td>

 26       </tr>

 27     </table></td>

 28     <td width="200">&nbsp;</td>

 29     <td width="200"><table width="200" border="1" cellspacing="0" cellpadding="0">

 30       <tr>

 31         <td>&nbsp;</td>

 32         <td>&nbsp;</td>

 33         <td>&nbsp;</td>

 34       </tr>

 35       <tr>

 36         <td>&nbsp;</td>

 37         <td>&nbsp;</td>

 38         <td>&nbsp;</td>

 39       </tr>

 40       <tr>

 41         <td>&nbsp;</td>

 42         <td>&nbsp;</td>

 43         <td>&nbsp;</td>

 44       </tr>

 45     </table></td>

 46   </tr>

 47   <tr>

 48     <td>&nbsp;</td>

 49     <td><table width="200" border="1" cellspacing="0" cellpadding="0">

 50       <tr>

 51         <td>&nbsp;</td>

 52         <td>&nbsp;</td>

 53         <td>&nbsp;</td>

 54       </tr>

 55       <tr>

 56         <td>&nbsp;</td>

 57         <td>&nbsp;</td>

 58         <td>&nbsp;</td>

 59       </tr>

 60       <tr>

 61         <td>&nbsp;</td>

 62         <td>&nbsp;</td>

 63         <td>&nbsp;</td>

 64       </tr>

 65     </table></td>

 66     <td>&nbsp;</td>

 67   </tr>

 68   <tr>

 69     <td><table width="200" border="1" cellspacing="0" cellpadding="0">

 70       <tr>

 71         <td>&nbsp;</td>

 72         <td>&nbsp;</td>

 73         <td>&nbsp;</td>

 74       </tr>

 75       <tr>

 76         <td>&nbsp;</td>

 77         <td>&nbsp;</td>

 78         <td>&nbsp;</td>

 79       </tr>

 80       <tr>

 81         <td>&nbsp;</td>

 82         <td>&nbsp;</td>

 83         <td>&nbsp;</td>

 84       </tr>

 85     </table></td>

 86     <td>&nbsp;</td>

 87     <td><table width="200" border="1" cellspacing="0" cellpadding="0">

 88       <tr>

 89         <td>&nbsp;</td>

 90         <td>&nbsp;</td>

 91         <td>&nbsp;</td>

 92       </tr>

 93       <tr>

 94         <td>&nbsp;</td>

 95         <td>&nbsp;</td>

 96         <td>&nbsp;</td>

 97       </tr>

 98       <tr>

 99         <td>&nbsp;</td>

100         <td>&nbsp;</td>

101         <td>&nbsp;</td>

102       </tr>

103     </table></td>

104   </tr>

105 </table>

这样，所有嵌套在class=seasons1987的表格中的表格外边框都会自动隐藏起来了，挺方便的。

希望有什么好的技巧的朋友能够分享一下自己的经验，谢谢了！