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>
Html网页表格结构化标记的应用的更多相关文章
- seo之google rich-snippets丰富网页摘要结构化数据(微数据)实例代码
seo之google rich-snippets丰富网页摘要结构化数据(微数据)实例代码 网页摘要是搜索引擎搜索结果下的几行字,用户能通过网页摘要迅速了解到网页的大概内容,传统的摘要是纯文字摘要,而结 ...
- html之结构化标记
1.什么是结构化标记 对布局使用的div 进行升级 , 根据页面的不同区域而提供的不同标签.作用与div几乎一致 专门用于搭建网站结构而用 2.结构标记详解 1.<header>元素 作用 ...
- XHTML 结构化:使用 XHTML 重构网站
http://www.w3school.com.cn/xhtml/xhtml_structural_01.asp 我们曾经为本节撰写的标题是:"XHTML : 简单的规则,容易的方针.&qu ...
- XHTML 结构化:使用 XHTML 重构网站 分类: C1_HTML/JS/JQUERY 2014-07-31 15:58 249人阅读 评论(0) 收藏
http://www.w3school.com.cn/xhtml/xhtml_structural_01.asp 我们曾经为本节撰写的标题是:"XHTML : 简单的规则,容易的方针.&qu ...
- 网页布局WEB标准的HTML结构化
您正在学习WEB标准CSS网页布局吗?是不是还不能完全掌握纯CSS布局?通常有两种需要您特别注意: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义 ...
- WordPress插件--WP BaiDu Submit结构化数据插件又快又全的向百度提交网页
一.WP BaiDu Submit 简介 WP BaiDu Submit帮助具有百度站长平台链接提交权限的用户自动提交最新文章,以保证新链接可以及时被百度收录. 安装WP BaiDu Submit后, ...
- HTML5 常用的结构化标签整理
一.语义化结构化标签 结构化标签优点: 1.方便浏览器处理和识别,提升了网页的质量和语义. 2.减少了大量无意义的div标签,增强代码的可读性. 结构化标签:(header,nav,body,arti ...
- Markdown:纯文本进行网页排版的简单标记语言
Markdown http://daringfireball.net/projects/markdown/ 2016-08-03 Markdown是一种标记语言,对纯文本使用简单的标记符号进行网页格式 ...
- 结构化CSS设计思维
LESS.SASS等预处理器给CSS开发带来了语法的灵活和便利,其本身却没有给我们带来结构化设计思维.很少有人讨论CSS的架构设计,而很多框架本身,如Bootstrap确实有架构设计思维作为根基. 要 ...
随机推荐
- Net::SSH::Perl 模块
<pre name="code" class="python">Net::SSH::Perl - Perl client Interface to ...
- 上证A股股指跌破1900
上证A股股指跌破1900 有钱的同学赶紧买哦,机会难得哈哈!
- MySQL教程及经常使用命令1.1
在线教程 21分钟 MySQL 新手教程 w3school在线教程(MYSQL) 变量 查看系统变量 show global variables 查看详细变量 show global variable ...
- [转]Permission denied: /.htaccess pcfg_openfile: unable to check htaccess file, ensure it is readable
原文链接:http://blog.csdn.net/dyw/article/details/6612497 近日,在Apache2环境下部署Rails3应用时碰到此错误: Permission den ...
- Android调整TimePicker和DatePicker大小
最近写了个app,里面要将DatePicker和TimePicker并列显示.但是,Android内部把DatePicker和 TimePicker大小固定了,导致4.5寸手机屏幕一行只能显示出一个, ...
- Android常用秘籍总结
一.无法向模拟器push文件,显示read-only file system $adb shell mount -o remount rw/ 确保模拟器有sd卡 二.Android模拟按键 #adb ...
- 大数据时代的 9 大Key-Value存储数据库
在过去的十年中,计算世界已经改变.现在不仅在大公司,甚至一些小公司也积累了TB量级的数据.各种规模的组织开始有了处理大数据的需求,而目前关系型数据库在可缩放方面几乎已经达到极限. 一个解决方案是使用键 ...
- 浅尝key-value数据库(二)——MongoDB的优与劣
浅尝key-value数据库(二)——MongoDB的优与劣 MongoDB的名字取自英文单词"humongous"的中间五个字母,是一个C++开发的基于分布式文件存储的数据库开源 ...
- CCIE路由实验(7) -- MPLS VPN
1.LDP协议的各种情况2.LDP和BGP交互3.LDP高级部分4.MPLS VPN (RIP和静态)5.MPLS VPN (EIGRP)6.MPLS VPN (OSPF)7.MPLS VPN (EB ...
- 基于visual Studio2013解决算法导论之010快排中应用插入排序
题目 快排中引用插入排序 解决代码及点评 #include <stdio.h> #include <stdlib.h> #include <malloc.h> ...