好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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

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

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网页表格结构化标记的应用的全部内容了,希望对大家有所帮助,多多支持~

查看更多关于浅谈Html网页表格结构化标记的应用的详细内容...

  阅读:44次