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

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. 多玩YY聊天记录解析全过程

    再来一发,现在开始! 下载安装YY,观察YY目录,很明显的发现了sqlite3.dll,这个数据库很多很多很多软件都在用,简单小巧且开源.删除sqlite3.dll 进入YY,历史记录不能正常显示,基 ...

  2. 错误解决--oracle中出现ORA-01791: 不是 SELECTed 表达式 错误

    Oracle数据库,执行下面语句出现错误“ORA-01791: 不是 SELECTed 表达式”: select distinct t.name from auth_employee t order ...

  3. 结构体中使用#define定义宏

    struct  hostent {   char    *h_name;        /* official name of host */   char    **h_aliases;    /* ...

  4. 在Eclipse/MyEclipse中安装spket插件

    Spket ide是强大的工具包为了JavaScript和XML的开发,这个强大的编辑器对JavaScript, XUL/XBLand Yahoo! Widget的开发都有全面的支持 ,比如代码完毕, ...

  5. BZOJ 1072 [SCOI2007]安排perm 如压力DP

    意甲冠军:联系 方法:状压DP? 题解:这题事实上没啥好写的.不算非常难,推一推就能搞出来. 首先看到这个问题,对于被d整除这个条件,非常easy就想到是取余数为0,所以想到可能状态中刚開始含有取余数 ...

  6. Google出品的自动Web安全扫描程序 Skipfish 下载及安装使用方法

    Skipfish是由google出品的一款自动化的网络安全扫描工具,该工具可以安装在linux.freebsd.MacOS X系统和windows(cygwin). 谷歌工程师Michal Zalew ...

  7. 在WINDOWS下 三步快速配置 eclipse c++ 环境

    所需软件 1.Eclipse IDE for C/C++ Developers http://www.eclipse.org/downloads/packages/eclipse-ide-cc-dev ...

  8. No mapping found for HTTP request with URI [/HelloWeb/] in DispatcherServlet with name 'HelloWeb' Spring MVC

    I'm learning the Spring Framework, and I'm doing the HelloWeb tutorial on tutorialspoint, and I can' ...

  9. Properties文件及与之相关的System.getProperties操作(转)

    如何使用Java读写系统属性? 读: 简述properties文件的结构和基本用法结构:扩展名为properties的文件,内容为key.value的映射,例如"a=2" 示例用到 ...

  10. perl 类里的函数调用其他类的函数

    perl 类里的函数调用其他类的函数: package Horse; use base qw(Critter); sub new { my $invocant = shift; my $class = ...