首页 > 代码库 > Html网页表格结构化标记的应用
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>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。