• 关于table排版


    colspan和rowspan这两个属性用于创建特殊的表格。
    colspan是“column span(跨列)”的缩写。colspan属性用在td标签中,用来指定单元格横向跨越的列数:
     
    在浏览器中将显示如下:
    单元格1
    单元格2 单元格3 单元格4
     
    该例通过把colspan设为“3”, 令所在单元格横跨了三列。如果我们将colspan设为“2”,则该单元格将只跨越两列,于是有必要在第一行插入另外一个单元格,以确保两行占据相同的列数。
     
    该例在浏览器中将显示如下:
    单元格1 单元格2
    单元格3 单元格4 单元格5
     
    rowspan的作用是指定单元格纵向跨越的行数。
     
    浏览器中将显示如下:
    单元格1 单元格2
    单元格3
    单元格4
     
    上例中的单元格1,其rowspan被设为“3”,这表示该单元格必须跨越三行(本身一行,加上另外两行)。因此,单元格1和单元格2在同一行,而单元格3和单元格4形成独立的两行。
     
     
    综合实例
    ss
           
           
         
       
         
     
     1 <html>
     2 <head>
     3 </head>
     4 <table border= "1 "   width= "200 " >
     5     <tr>
     6         <td colspan="4"  >ss
     7         </td>
     8     </tr>
     9     <tr>
    10         <td   width= "25% ">   </td>
    11         <td   width= "25% ">   </td>
    12         <td   width= "25% ">   </td>
    13         <td   width= "25% ">   </td>
    14     </tr>
    15     <tr>
    16         <td   width= "25% "rowspan="2">   </td>
    17         <td   width= "25% ">   </td>
    18         <td   width= "25% ">   </td>
    19         <td   width= "25% ">   </td>
    20     </tr>
    21     <tr>
    22         <td   width= "25% ">   </td>
    23         <td   width= "25% " rowspan="3">   </td>
    24         <td   width= "25% ">   </td>
    25     </tr>
    26     <tr>
    27         <td   width= "25% " colspan="2"  >   </td>
    28         <td   width= "25% ">   </td>
    29     </tr>
    30     <tr>
    31         <td   width= "25% ">   </td>
    32         <td   width= "25% ">   </td>
    33         <td   width= "25% ">   </td>
    34     </tr>
    35 </table>
    36 </html>

    table自定义样式设置:border-collapse: collapse;   

  • 相关阅读:
    mvc UrlHelper
    Bootstrap框架
    Swiper插件
    JQuery 滚动条长度
    JQuery 全屏滚动
    JQuery TODOList
    JQuery 节点操作
    JQuery 事件委托 事件代理
    JQuery 关闭事件冒泡
    JQuery resize和scroll方法
  • 原文地址:https://www.cnblogs.com/xhtml5/p/5719008.html
Copyright © 2020-2023  润新知