zoukankan      html  css  js  c++  java
  • table的左/右/上/下边框处理

     一、表格中单元格之间分隔线的隐藏方法


    其实上面的三个表格都有三行三列,隐藏分隔线的诀窍在于rules,察看这三个表格的源代码,我们可以看到<TABLE>标签中都有rules。 它有三个参数(cols,rows,none),当rules=cols时,表格会隐藏纵向的分隔线,这样我们就只能看到表格的行;当rules=rows时,则 隐藏了横向的分隔线,这样我们只能看到表格的列;而当rules=none时,纵向分隔线和横向分隔线将全部隐藏。

    二、表格边框的隐藏


    表格边框的显示与隐藏,是可以用frame参数来控制的。请注意它只控制表格的边框图,而不影晌单元格。
    只显示上边框 <table frame=above>
    只显示下边框 <table frame=below>
    只显示左、右边框 <table frame=vsides>
    只显示上、下边框 <table frame=hsides>
    只显示左边框 <table frame=lhs>
    只显示右边框 <table frame=rhs>
    不显示任何边框 <table frame=void>

    三、表格边框

    <table border="1" width="200" cellpadding="0" cellspacing="0">
    <tr align="center"> 
    <td></td>
    <td></td>
    </tr>
    <tr align="center"> 
    <td></td>
    <td></td>
    </tr>
    </table>

    <table border="0" width="200" cellspacing="1" cellpadding="0" bgcolor="#000000" >
    <tr align="center" bgcolor="#FFFFFF"> 
    <td bgcolor="#FFFFFF"></td>
    <td bgcolor="#FFFFFF"></td>
    </tr>
    <tr align="center" bgcolor="#FFFFFF"> 
    <td bgcolor="#FFFFFF">线</td>
    <td bgcolor="#FFFFFF"></td>
    </tr>
    </table>

    <table 
    width="200" cellspacing="0" cellpadding="0">
    <tr align="center"> 
    <td style="BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: 
    rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right:
     rgb(0,0,0) 1px groove"></td>
    <td style="BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: 
    rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px 
    groove"></td>
    </tr>
    <tr align="center"> 
    <td style="BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: 
    rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px 
    groove">线</td>
    <td style="BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: 
    rgb(0,0,0) 1px groove"></td>
    </tr>
    </table>

    <table 
    width="200" cellspacing="0" cellpadding="0">
    <tr align="center"> 
    <td style="BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: 
    rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right:
     rgb(0,0,0) 1px dotted"></td>
    <td style="BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: 
    rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px 
    dotted"></td>
    </tr>
    <td style="BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: 
    rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px 
    dotted">线</td>
    <td style="BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: 
    rgb(0,0,0) 1px dotted"></td>
    </tr>
    </table>

    <table width="200" border="0" cellspacing="2" cellpadding="0">
    <tr> 
    <td> 
      <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000">
      <tr> 
      <td bgcolor="#FFFFFF"> <wbr></td>
      </tr>
      </table>
    </td>
    <td> 
       <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000">
       <tr> 
       <td bgcolor="#FFFFFF"> <wbr></td>
       </tr>
       </table>
    </td>
    </tr>
    <tr> 
    <td> 
        <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000">
        <tr> 
        <td bgcolor="#FFFFFF"> <wbr></td>
        </tr>
        </table>
    </td>
    <td> 
        <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000">
        <tr> 
        <td bgcolor="#FFFFFF"> <wbr></td>
        </tr>
        </table>
    </td>
    </tr>
    </table>

    <table border="1" bordercolorlight="#ffffff" bordercolordark="#ffffff" width="200" cellpadding="0" cellspacing="0">
    <tr align="center"> 
    <td bgcolor="#B7B7B7" 
    bordercolorlight="#000000" bordercolordark="#eeeeee" ></td>
    <td bgcolor="#B7B7B7" 
    bordercolorlight="#000000" bordercolordark="#eeeeee" ></td>
    </tr>
    <tr align="center"> 
    <td bgcolor="#B7B7B7" 
    bordercolorlight="#000000" bordercolordark="#eeeeee" ></td>
    <td bgcolor="#B7B7B7" 
    bordercolorlight="#000000" bordercolordark="#eeeeee" ></td>
    </tr>
    </table>

    <table width="200" cellpadding="0" cellspacing="0">
    <tr> 
    <td><fieldset style="200" align="center"> <legend> 无名表格 </legend> 
    <p align="right"> 
    </fieldset></td>
    </tr>
    </table>

    <table width="200"" cellspacing="0" cellpadding="0">
    <tr> 
    <td>
    <fieldset style=" 200; color: #B7B7B7; border-style: groove" align="center"> 
    <legend style="color: blue; border: 1 solid #000000"> 表中表效果Ⅰ</legend> 
    <br>
    </fieldset>
    </td>
    </tr>
    </table>

    <table width="200">
    <tr> 
    <td><fieldset style="200" align="center"> <legend> 
    <table style="border: 1 solid #000000" width="80" cellspacing="1" cellpadding="0" height="20">
    <tr> 
    <td><font color=blue>表中表效果Ⅱ</font></td>
    </tr>
    </table>
    </legend><br>
    </fieldset>
    </td>
    </tr>
    </table>

    这一节要靠你自己去发现了,因为这样学到的东西才是真正属于自己的(我的一个偷懒的借口)。 我已经在每个表格的下面写出了重点,并在右边给出它的源代码,你可以对照着看。下面还有一 个边框会自己变颜色闪动的表格,有兴趣也研究研究吧 ^o^

     

    原文:http://blog.csdn.net/lhooouuu/article/details/6454483

  • 相关阅读:
    Spring Boot全日志设置
    SpringBoot整合Quartz
    Kubernetes网络方案的三大类别和六个场景
    微服务化之缓存的设计
    金融创新业务基于容器云的微服务化实践
    致传统企业朋友:不够痛就别微服务,有坑 (1)
    致传统企业朋友:不够痛就别微服务,有坑 (2)
    The Beam Model:Stream & Tables翻译(上)
    细说Mammut大数据系统测试环境Docker迁移之路
    [译] 关于 SPA,你需要掌握的 4 层 (1)
  • 原文地址:https://www.cnblogs.com/yony/p/2567228.html
Copyright © 2011-2022 走看看