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

Html表格的结构化

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

结构化格式

XML/HTML Code 复制内容到剪贴板 <table>            < thead > … </ thead >  --------表头区            < tbody > … </ tbody > ---------表体区            < tfoot > … </ tfoot > ------------表尾区            </ table >     

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

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

XML/HTML Code 复制内容到剪贴板 <table>            < caption > … </ caption >             </ table >      <caption>下的属性值有：

属性名称

属性值

说明

align

Top

标题在表格上方

Bottom

标题在表格下方


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

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

<colgroup>…<colgroup>

属性名称

属性值

说明

Align

Left

靠左

Center

考中

Right

靠右

Valign

Right

靠右

Top

考上

Middle

靠中

Bottom

靠下

Span

数字

直列数


小结：通过设置表格的直列化格式，能够对我们需要的内容进行加深颜色，这里只是针对的列内容。
 
源代码如下：

XML/HTML Code 复制内容到剪贴板 <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 >     

以上就是小编为大家带来的浅谈Html网页表格结构化标记的应用的全部内容了，希望对大家有所帮助，多多支持脚本之家~