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

时间:2017-04-08

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

Html表格的结构化

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

结构化格式

XML/HTML Code复制内容到剪贴板
  1. <table>     
  2.      
  3. <thead></thead> --------表头区     
  4.      
  5. <tbody></tbody>---------表体区     
  6.      
  7. <tfoot></tfoot>------------表尾区     
  8.      
  9. </table>    

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

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

XML/HTML Code复制内容到剪贴板
  1. <table>     
  2.      
  3. <caption></caption>     
  4.      
  5. </table>    
<caption>下的属性值有:

属性名称

属性值

说明

align

Top

标题在表格上方

Bottom

标题在表格下方


小结:通过设置表格的标题,能够随时让标题跟着表格动。
 
Html直列化格式

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

<colgroup>…<colgroup>

属性名称

属性值

说明

Align

Left

靠左

Center

考中

Right

靠右

Valign

Right

靠右

Top

考上

Middle

靠中

Bottom

靠下

Span

数字

直列数


  • 共2页:
  • 上一篇1/2
  • 下一页
  • 上一篇:向div元素添加圆角边框的实现方法 下一篇:HTML table 直列化格式详解

    相关文章

    最新文章