zoukankan      html  css  js  c++  java
  • table布局中的一些关键点

    table布局点1:表格边框

     border-spacing:0;
     border-collapse:collapse;
    

      显示效果为:

    加之前效果

    加之后效果

    table布局点2:跨列、跨行的单元格

     1 <html>
     2 
     3 <body>
     4 
     5 <h4>横跨两列的单元格:</h4>
     6 <table border="1">
     7 <tr>
     8   <th>姓名</th>
     9   <th colspan="2">电话</th>
    10 </tr>
    11 <tr>
    12   <td>Bill Gates</td>
    13   <td>555 77 854</td>
    14   <td>555 77 855</td>
    15 </tr>
    16 </table>
    17 
    18 <h4>横跨两行的单元格:</h4>
    19 <table border="1">
    20 <tr>
    21   <th>姓名</th>
    22   <td>Bill Gates</td>
    23 </tr>
    24 <tr>
    25   <td rowspan="2">电话</td>
    26   <td>555 77 854</td>
    27 </tr>
    28 <tr>
    29   <td>555 77 855</td>
    30 </tr>
    31 </table>
    32 
    33 </body>
    34 
    35 
    36 </html>

    横跨两列的单元格:

    姓名电话
    Bill Gates 555 77 854 555 77 855

    横跨两行的单元格:

    姓名 Bill Gates
    电话 555 77 854
    555 77 855

    一、
    1、显示表格的4个边框:<table border frame=box>
    2、只显示上边框: <table border frame=above>
    3、只显示下边框: <table border frame=below>
    4、只显示上下边框: <table border frame=hsides>
    5、只显示左右边框: <table border frame=vsides>
    6、只显示左边框: <table border frame=lhs>
    7、只显示右边框: <table border frame=rhs>
    8、不显示任何边框: <table border frame=void>

    二、
    1、只显示列与列之间的分隔线:<table rules=cols>
    2、只显示行与行之间的分隔线:<table rules=rows>
    3、不显示任何分隔线: <table rules=none> (只显示四个边框)
    4、显示所有分隔线: <table rules=all>

    但是还要提醒的是,nc不支持这些表格属性!

  • 相关阅读:
    SQLServer2012数据库降级至SQLServer2008R2的方法
    男程序猿和女程序猿的网恋—相见(二)
    收藏关于AI的相关的文章
    JAVA提高九:集合体系
    JAVA提高八:动态代理技术
    JAVA提高七:类加载器
    JAVA提高六:泛型
    JAVA提高五:注解Annotation
    JAVA提高四:反射基本应用
    JAVA提高三:反射总结
  • 原文地址:https://www.cnblogs.com/zhangwei595806165/p/2459781.html
Copyright © 2011-2022 走看看