浅谈Html网页表格结构化标记的应用
浅谈Html网页表格结构化标记的应用
发布时间:2016-12-27 来源:查字典编辑
摘要:在讲网页表格的结构化标记之前,还是先看几幅图片。Html表格的结构化所谓的结构化,正如上述第一副图所示,就是把我们的表格划分为三种:表头、表...

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

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

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> <tablewidth="500"> <tr> <tdalign="center">学生成绩表</td> </tr> <td> <tableborder="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> <tdcolspan="4">成绩汇总</td> </tr> </tfoot> </table> </td> </tr> </table> <br/> <li>表格嵌套的使用二</li> <tableborder="1"width="500"> <captionalign="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> <tdcolspan="4">成绩汇总</td> </tr> </tfoot> </table> <br/> <li>表格嵌套的使用三</li> <tableborder="1"width="500"> <captionalign="bottom">学生成绩</caption> <col></col> <colbgcolor=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网页表格结构化标记的应用的全部内容了,希望对大家有所帮助,多多支持查字典教程网~

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新XHTML学习
热门XHTML学习
网页设计子分类