• Html网页表格结构化标记的应用


     在讲网页表格的结构化标记之前,还是先看几幅图片。

     

     

     

     Html表格的结构化

           所谓的结构化,正如上述第一副图所看到的,就是把我们的表格划分为三种:表头、表体、表尾。从而当我们在改动表体部分的时候,不会影响到其他两部分,从而解除了耦合,方便我们的应用。

     

    结构化格式

    <table>
    
    <thead>…</thead> --------表头区
    
    <tbody>…</tbody>---------表体区
    
    <tfoot>…</tfoot>------------表尾区
    
    </table>
    
    


     

     总结:通过把表格划分为三部分,方便了我们对表格的编辑操作。

     

    Html表格的标题

      每一个表格都有自己的标题,正如上述第二幅图片所看到的,那么又怎样做到让标题随着内容来移动呢?

     

         表格的标题

      

       <table>
    
    <caption>…</caption>
    
    </table>
    
    


     

    <caption>下的属性值有:

    属性名称

    属性值

    说明

    align

    Top

    标题在表格上方

    Bottom

    标题在表格下方

     

    小结:通过设置表格的标题,可以随时让标题跟着表格动。

     

    Html直列化格式

      什么是表格的直列化格式呢?我们寻常在Excel中所见到的给整列加背景颜色,说的就是这么一回事。

    <colgroup>…<colgroup>

     

    属性名称

    属性值

    说明

    Align

    Left

    靠左

    Center

    考中

    Right

    靠右

    Valign

    Right

    靠右

    Top

    考上

    Middle

    靠中

    Bottom

    靠下

    Span

    数字

    直列数

     

     小结:通过设置表格的直列化格式,可以对我们须要的内容进行加深颜色。这里仅仅是针对的列内容。

    源码例如以下:

       
       <html>
    <head>
    
    <li>表格嵌套的使用一</li>
    
    <table  width="500" >
    <tr>
    <td align="center">学生成绩表</td>
    </tr>
    <td>
    <table border="1" width="100%">
    <thead>      
    <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>外语</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>张三</td>
    <td>95</td>
    <td>95</td>
    <td>95</td>
    </tr>
    <tr>
    <td>张三</td>
    <td>95</td>
    <td>95</td>
    <td>95</td>
    </tr>
    <tr>
    <td>张三</td>
    <td>95</td>
    <td>95</td>
    <td>95</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
    <td colspan="4">成绩汇总</td>
    </tr>
    </tfoot>
    </table>
    </td>
    </tr>
    </table>
    
    
       <br/>
    
    
    <li>表格嵌套的使用二</li>
    
    <table border="1" width="500" >
    <caption align="bottom">学生成绩</caption>
    <thead>
    <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>外语</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>张三</td>
    <td>95</td>
    <td>95</td>
    <td>95</td>
    </tr>
    <tr>
    <td>张三</td>
    <td>95</td>
    <td>95</td>
    <td>95</td>
    </tr>
    <tr>
    <td>张三</td>
    <td>95</td>
    <td>95</td>
    <td>95</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
    <td colspan="4">成绩汇总</td>
    </tr>
    </tfoot>
    </table>
    
    
    
         
    
       
     <br/>
    
    <li>表格嵌套的使用三</li>
    <table border="1" width="500" >
    <caption align="bottom">学生成绩</caption>
    <col ></col>
    <col bgcolor=blue></col>
    <thead>
    <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>外语</th>
    </tr>
    </thead>
    <tbody>
    <tr >
    <td>张三</td>
    <td>95</td>
    <td>95</td>
    <td>95</td>
    </tr>
    <tr>
    <td>张三</td>
    <td>95</td>
    <td>95</td>
    <td>95</td>
    </tr>
    <tr>
    <td>张三</td>
    <td>95</td>
    <td>95</td>
    <td>95</td>
    </tr>
    </tbody>
    <tfoot>
    </tfoot>
    </table>
    
    </body>
    </head>
    </html>
    
    
         
    
         


     

  • 相关阅读:
    UI是一个状态机
    WPF : Binding的3个属性: Source, RelativeSource, ElementName
    业务驱动设计
    WPF : 对Collection要注意重用子控件
    WPF : UserControl的Initialized事件不会触发
    mvc3上传图片
    MVC3.0自定义视图引擎(切换皮肤)
    ASP.NET MVC 多语言解决方案
    键盘键位表
    Silverlight之IsolatedStorageSettings对象
  • 原文地址:https://www.cnblogs.com/bhlsheji/p/5181297.html
Copyright © 2020-2023  润新知