• 网页中多个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的表格中的表格外边框都会自动隐藏起来了,挺方便的。

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

  • 相关阅读:
    vCenter6.7的简单安装与使用
    大家来找茬
    Android APP分享功能实现
    为免费app嵌入Admob广告
    Google Admob广告Android全攻略1
    开始Admob广告盈利模式详细教程
    android软件中加入广告实现方法
    onWindowFocusChanged重要作用 and Activity生命周期
    WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
    android之intent显式,显式学习
  • 原文地址:https://www.cnblogs.com/seasons1987/p/2570041.html
Copyright © 2020-2023  润新知