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

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. Windows系统命令行net user命令用法

    在Windows渗透测试过程中,最常用的要数net user 命令了,但是非常多的时候我们都是对Linux命令非常熟悉,对Windows命令非常熟悉或者了解用法的少只有少,为了以后工作方便,这里记录一 ...

  2. 17.1.1.4 Obtaining the Replication Master Binary Log Coordinates 获取复制Master Binary Log的坐标:

    17.1.1.4 Obtaining the Replication Master Binary Log Coordinates 获取复制Master Binary Log的坐标: 你需要master ...

  3. Linux内核中的宏：__init and __exit

    ZZ FROM: http://blog.csdn.net/musein/article/details/742609 ======================================== ...

  4. Ubuntu下编译Android JNI最靠谱的方法...

    网上资料太杂乱,搞了大半天都还是没搞懂怎么系统的调用NDK.最后干脆放弃了Win改用Ubuntu编译JNI,虽然编译环境简单了,但是资料却少了不少.几乎没有一篇完整的文章.我想或许是能在Ubuntu下 ...

  5. 关于怎么C#控制台窗口中怎么创建连接查询数据库操作

    首先需要新建一张表,为了测试随建了一张学生表 新建号一张表之后就可以对数据库进行操作了 列举了常用的增删改查 操作 static void Main(string[] args)        { s ...

  6. ACM比赛（第二次A）

    ime Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Description There is ...

  7. python验证码识别

    关于利用python进行验证码识别的一些想法 用python加“验证码”为关键词在baidu里搜一下,可以找到很多关于验证码识别的文章.我大体看了一下,主要方法有几类:一类是通过对图片进行处 理,然后 ...

  8. 支付平台程序，支付程序，网络pos程序，api接口程序，锋锐支付平台程序开发领导者！

    支付平台程序,支付程序,网络pos程序,api接口程序,锋锐支付平台程序开发领导者! 锋锐支付平台程序(www.100freenet.com)隶属于盐城市沐良商贸有限公司(沈阳杰速网络科技有限公司旗下 ...

  9. （1）ActivityThread分析

    1. 入口. 曾经一直都说Activity的人口是onCreate方法.事实上android上一个应用的入口,应该是ActivityThread.和普通的java类一样,入口是一个main方法. pu ...

  10. Objective-C基础笔记（5）Protocol

    Protocol简单来说就是一系列方法的列表,当中声明的方法能够被不论什么类实现.这中模式一般称为代理(delegation)模式. 在IOS和OS X开发中,Apple採用了大量的代理模式来实现MV ...