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

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网页表格结构化标记的应用的更多相关文章

  1. seo之google rich-snippets丰富网页摘要结构化数据（微数据）实例代码

    seo之google rich-snippets丰富网页摘要结构化数据(微数据)实例代码 网页摘要是搜索引擎搜索结果下的几行字,用户能通过网页摘要迅速了解到网页的大概内容,传统的摘要是纯文字摘要,而结 ...

  2. html之结构化标记

    1.什么是结构化标记 对布局使用的div 进行升级 , 根据页面的不同区域而提供的不同标签.作用与div几乎一致 专门用于搭建网站结构而用 2.结构标记详解 1.<header>元素 作用 ...

  3. XHTML 结构化：使用 XHTML 重构网站

    http://www.w3school.com.cn/xhtml/xhtml_structural_01.asp 我们曾经为本节撰写的标题是:"XHTML : 简单的规则,容易的方针.&qu ...

  4. 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 ...

  5. 网页布局WEB标准的HTML结构化

    您正在学习WEB标准CSS网页布局吗?是不是还不能完全掌握纯CSS布局?通常有两种需要您特别注意: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义 ...

  6. WordPress插件--WP BaiDu Submit结构化数据插件又快又全的向百度提交网页

    一.WP BaiDu Submit 简介 WP BaiDu Submit帮助具有百度站长平台链接提交权限的用户自动提交最新文章,以保证新链接可以及时被百度收录. 安装WP BaiDu Submit后, ...

  7. HTML5 常用的结构化标签整理

    一.语义化结构化标签 结构化标签优点: 1.方便浏览器处理和识别,提升了网页的质量和语义. 2.减少了大量无意义的div标签,增强代码的可读性. 结构化标签:(header,nav,body,arti ...

  8. Markdown：纯文本进行网页排版的简单标记语言

    Markdown http://daringfireball.net/projects/markdown/ 2016-08-03 Markdown是一种标记语言,对纯文本使用简单的标记符号进行网页格式 ...

  9. 结构化CSS设计思维

    LESS.SASS等预处理器给CSS开发带来了语法的灵活和便利,其本身却没有给我们带来结构化设计思维.很少有人讨论CSS的架构设计,而很多框架本身,如Bootstrap确实有架构设计思维作为根基. 要 ...

随机推荐

  1. Dreamer2.1 发布 新增将Bean解析成xml和json

    一个上午,增加两个功能 1.直接将对象解析成XML 2.将对象解析成JSON 对象可以是数组,可以是集合,也可以是单个对象 源码和jar下载地址:http://pan.baidu.com/share/ ...

  2. Use Node.js DDP Client on Arduino Yun to Access Meteor Server

    Use Node.js DDP Client on Arduino Yun to Access Meteor Server 概述 在Arduino Yun上安装 Node.js, 并測试与 Meteo ...

  3. surfaceView画图

    1.视图 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:too ...

  4. Java之从控制台读入数据

    0 引言    从控制台中读取数据是一个比较常用的功能,在 JDK 5.0 以前的版本中的实现是比较复杂的,需要手工处理系统的输入流.有意思的是,从 JDK 5.0 版本开始,能从控制台中输入数据的方 ...

  5. linux popen函数

    描述 popen() 函数 用 创建管道 的 方式启动一个 进程, 并调用 shell. 因为 管道是被定义成单向的, 所以 type 参数 只能定义成 只读或者 只写, 不能是 两者同时, 结果流也 ...

  6. GTest交流与经验总结

    GTest交流与经验总结 原文见:   http://starsourcingsolutions.com/myblog/?p=159

  7. Android开发10.1：UI组件适配器AdapterView(创建ListView,Adapter接口)

    @version:Android4.3 API18 @author:liuxinming 概述               AdapterView继承了ViewGroup,它的本质是容器       ...

  8. 设计模式（Abstract Factory）抽象工厂

    1. 需求: 设计一个电脑组装程序,对于组装品牌电脑. 用零件组装(主板.硬盘.显示器)由品牌提供的所有. 让我们组装一台联想电脑,板子.由联想提供. (眼下仅仅有Lenovo和Dell两种品牌) 2 ...

  9. Ubuntu14.04更新源

    Ubuntu14.04更新源 http://jingyan.baidu.com/article/7f41ecec1b7a2e593d095ce6.html Ubuntu源 http://wiki.ub ...

  10. Project configuration is not up-to-date with pom.xml错误解决方法

    导入一个Maven项目之后发现有一个如下的错误: Project configuration is not up-to-date with pom.xml. Run project configura ...