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

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. Raphael Js矢量库API简介：

    Raphael Js矢量库API简介:Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQT ...

  2. 转：Javascript继承机制的设计思想

    我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...

  3. javacoo/CowSwing 丑牛迷你采集器

    丑牛迷你采集器是一款基于Java Swing开发的专业的网络数据采集/信息挖掘处理软件,通过灵活的配置,可以很轻松迅速地从 网页上抓取结构化的文本.图片.文件等资源信息,可编辑筛选处理后选择发布到网站 ...

  4. 十进制字符串转成二进制（decimal to binary）

    题目:给一个十进制的字符串例如1.25, 将其转化为二进制字符串,这个例子的结果是1.01 = 1*2^0 + 0*2^(-1) + 1*2^(-2) = 1.25. 如果不能完整的用二进制表示,输出 ...

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

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

  6. CSipSimple最新版本号(二)--加入视频功能

    前面我们编译好了最新版本号的CSipSimple,并且測试已经能够打电话了.如今要把视频功能加上去. 不知道怎么编译的,能够看我的上一篇博文:CSipSimple最新版本号 我们先来看一下之前的项目是 ...

  7. 一天一个类,一点也不累 之 Vector

    一天一个类,一点也不累. 今天要说的是ArrayList的亲兄弟--Vector 亲兄弟?看看“族谱” Class Vector<E> java.lang.Object java.util ...

  8. 01-OC介绍

    目录 一.OC语言介绍 二.ios系统 三.在OC语言开发中使用C语言语法 四.面向对象 回到顶部 一.OC语言介绍 1 早在20世纪80年代早期,BardCox发明了Objective-C,扩充了C ...

  9. hdu 1282回文数猜想

    http://acm.hdu.edu.cn/showproblem.php?pid=1282 Problem Description 一个正整数,如果从左向右读(称之为正序数)和从右向左读(称之为倒序 ...

  10. HEVC码率控制浅析——HM代码阅读之一

    HM的码率控制提案主要参考如下三篇:K0103,M0036,M0257.本文及后续文章将基于HM12.0进行讨论,且首先仅讨论K0103对应的代码,之后再陆续补充M0036,M0257对应的代码分析, ...