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

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. VS Code开发调试ASP.NET Core 1.0

    VS Code开发调试ASP.NET Core 1.0 使用VS Code开发调试ASP.NET Core 1.0,微软在今天凌晨发布了.NET Core 1.0,ASP.NET Core 1.0 与 ...

  2. Spring IOC三种注入方式（接口注入、setter注入、构造器注入）（摘抄）

    IOC ,全称 (Inverse Of Control) ,中文意思为:控制反转, Spring 框架的核心基于控制反转原理. 什么是控制反转?控制反转是一种将组件依赖关系的创建和管理置于程序外部的技 ...

  3. 为什么希捷选择了8GB作为标准的闪存容量呢？答案就在下面（新的驱动器可以实现一定程度上的写入缓存）

    与前两代Momentus XT产品不同,希捷称第三代混合硬盘所使用的技术更接近真正的SSHD(Solid State Hybrid Disk?),而不是HHD.也就是说更偏向于固态硬盘.首先它不会属于 ...

  4. docker学习笔记17：Dockerfile 指令 ONBUILD介绍

    ONBUILD指令可以为镜像添加触发器.其参数是任意一个Dockerfile 指令. 当我们在一个Dockerfile文件中加上ONBUILD指令,该指令对利用该Dockerfile构建镜像(比如为A ...

  5. Spring+EhCache缓存实例（详细讲解+源码下载）(转)

    一.ehcahe的介绍 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的CacheProvider.Ehcache是一种广泛使用的开源Java分布式 ...

  6. perl 5.22手动安装Mysql DBI和DBD

    mysql 手动安装DBI 和DBD: DBI版本: [root@dr-mysql01 DBD-mysql-4.033]# perl -MDBI -le 'print $DBI::VERSION;' ...

  7. 基于visual Studio2013解决C语言竞赛题之0520相邻元素

          题目

  8. CMake初步（1）

    转自:<你所不知的OSG>第一章:CMake初步(1)http://bbs.osgchina.org/forum.php?mod=viewthread&tid=1189&f ...

  9. linux C函数之access函数的用法

    1.函数功能: 检查调用进程是否可以对指定的文件执行某种操作. 2.函数原型: 1)函数头文件 #include <stdio.h> #include <unistd.h> 2 ...

  10. poj 2114 Boatherds 树的分治

    还是利用点的分治的办法来做,统计的办法不一样了,我的做法是排序并且标记每个点属于哪颗子树. #include <iostream> #include <cstdio> #inc ...