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

Html表格的结构化

所谓的结构化，正如上述第一副图所看到的，就是把我们的表格划分为三种：表头、表体、表尾。从而当我们在改动表体部分的时候，不会影响到其他两部分，从而解除了耦合，方便我们的应用。

结构化格式

  1. <table>
  2.  
  3. <thead>…</thead> --------表头区
  4.  
  5. <tbody>…</tbody>---------表体区
  6.  
  7. <tfoot>…</tfoot>------------表尾区
  8.  
  9. </table>

 总结：通过把表格划分为三部分，方便了我们对表格的编辑操作。

Html表格的标题

每一个表格都有自己的标题，正如上述第二幅图片所看到的，那么又怎样做到让标题随着内容来移动呢？

表格的标题

  1.    <table>
  2.  
  3. <caption>…</caption>
  4.  
  5. </table>

<caption>下的属性值有：

属性名称

属性值

说明

align

Top

标题在表格上方

Bottom

标题在表格下方

小结：通过设置表格的标题，可以随时让标题跟着表格动。

 

Html直列化格式

什么是表格的直列化格式呢？我们寻常在Excel中所见到的给整列加背景颜色，说的就是这么一回事。

<colgroup>…<colgroup>

属性名称

属性值

说明

Align

Left

靠左

Center

考中

Right

靠右

Valign

Right

靠右

Top

考上

Middle

靠中

Bottom

靠下

Span

数字

直列数

小结：通过设置表格的直列化格式，可以对我们须要的内容进行加深颜色。这里仅仅是针对的列内容。

源码例如以下：

  1.    <html>
  2. <head>
  3.  
  4. <li>表格嵌套的使用一</li>
  5.  
  6. <table  width="500" >
  7. <tr>
  8. <td align="center">学生成绩表</td>
  9. </tr>
  10. <td>
  11. <table border="1" width="100%">
  12. <thead>
  13. <tr>
  14. <th>姓名</th>
  15. <th>语文</th>
  16. <th>数学</th>
  17. <th>外语</th>
  18. </tr>
  19. </thead>
  20. <tbody>
  21. <tr>
  22. <td>张三</td>
  23. <td>95</td>
  24. <td>95</td>
  25. <td>95</td>
  26. </tr>
  27. <tr>
  28. <td>张三</td>
  29. <td>95</td>
  30. <td>95</td>
  31. <td>95</td>
  32. </tr>
  33. <tr>
  34. <td>张三</td>
  35. <td>95</td>
  36. <td>95</td>
  37. <td>95</td>
  38. </tr>
  39. </tbody>
  40. <tfoot>
  41. <tr>
  42. <td colspan="4">成绩汇总</td>
  43. </tr>
  44. </tfoot>
  45. </table>
  46. </td>
  47. </tr>
  48. </table>
  49.  
  50.    <br/>
  51.  
  52. <li>表格嵌套的使用二</li>
  53.  
  54. <table border="1" width="500" >
  55. <caption align="bottom">学生成绩</caption>
  56. <thead>
  57. <tr>
  58. <th>姓名</th>
  59. <th>语文</th>
  60. <th>数学</th>
  61. <th>外语</th>
  62. </tr>
  63. </thead>
  64. <tbody>
  65. <tr>
  66. <td>张三</td>
  67. <td>95</td>
  68. <td>95</td>
  69. <td>95</td>
  70. </tr>
  71. <tr>
  72. <td>张三</td>
  73. <td>95</td>
  74. <td>95</td>
  75. <td>95</td>
  76. </tr>
  77. <tr>
  78. <td>张三</td>
  79. <td>95</td>
  80. <td>95</td>
  81. <td>95</td>
  82. </tr>
  83. </tbody>
  84. <tfoot>
  85. <tr>
  86. <td colspan="4">成绩汇总</td>
  87. </tr>
  88. </tfoot>
  89. </table>
  90.  
  91.  <br/>
  92.  
  93. <li>表格嵌套的使用三</li>
  94. <table border="1" width="500" >
  95. <caption align="bottom">学生成绩</caption>
  96. <col ></col>
  97. <col bgcolor=blue></col>
  98. <thead>
  99. <tr>
  100. <th>姓名</th>
  101. <th>语文</th>
  102. <th>数学</th>
  103. <th>外语</th>
  104. </tr>
  105. </thead>
  106. <tbody>
  107. <tr >
  108. <td>张三</td>
  109. <td>95</td>
  110. <td>95</td>
  111. <td>95</td>
  112. </tr>
  113. <tr>
  114. <td>张三</td>
  115. <td>95</td>
  116. <td>95</td>
  117. <td>95</td>
  118. </tr>
  119. <tr>
  120. <td>张三</td>
  121. <td>95</td>
  122. <td>95</td>
  123. <td>95</td>
  124. </tr>
  125. </tbody>
  126. <tfoot>
  127. </tfoot>
  128. </table>
  129.  
  130. </body>
  131. </head>
  132. </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. SolrCloud简介

    原文地址:http://www.chepoo.com/solrcloud-introduction.html 一.简介 SolrCloud是Solr4.0版本以后基于Solr和Zookeeper的分布 ...

  2. 设计模式 ( 十七) 状态模式State（对象行为型）

    设计模式 ( 十七) 状态模式State(对象行为型) 1.概述 在软件开发过程中,应用程序可能会根据不同的情况作出不同的处理.最直接的解决方案是将这些所有可能发生的情况全都考虑到.然后使用if... ...

  3. 基于visual Studio2013解决算法导论之049活动选择问题

     题目 活动选择问题 解决代码及点评 // 活动选择问题.cpp : 定义控制台应用程序的入口点. // #include<iostream> #define N 100 using ...

  4. poj1920 Towers of Hanoi

    关于汉诺塔的递归,记住一个结论是,转移n个盘子至少需要2^n-1步 #include<iostream> #include<cstdio> #include<cmath& ...

  5. hdu2243之AC自动机+矩阵乘法

    考研路茫茫——单词情结 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  6. [置顶] T-sql sql server 设置主键约束、标示列、唯一约束、默认值、约束、创建表

    ----选择数据库 use ythome go ----查看表是否存在 if Exists ( select * from sysobjects where name='sys_menu' and t ...

  7. java--内部类实现“类的多重继承”

    class Fa1{ private int k = 1; void show() { System.out.println(k); } } class Fa2{ private int k = 10 ...

  8. SVN的trunk、branch、tag（二）

    转——简单的对比 SVN的工作机制在某种程度上就像一颗正在生长的树: 一颗有树干和许多分支的树 分支从树干生长出来,并且细的分支从相对较粗的树干中长出 一棵树可以只有树干没有分支(但是这种情况不会持续 ...

  9. Mixtile LOFT

    日前,国内电子原型类开发团队Mixtile(深圳致趣科技)新推出的 Mixtile LOFT套件,受到业内著名的海外科技网站CNXSoft的关注和报道. 如果要阅读相关的原文报道,可点击这里.下面摘录 ...

  10. OSX: 真的吗？Mac OS X重大漏洞 改时钟获系统最高权限

    9月3日才注意到这个在8月28日刊登在英文网站9月1日在驱动之家的,关于OS X系统的sudo漏洞没有修补的新闻,今天才有时间成文上传. 这个sudo漏洞是在2013年2月27日被公布出来的,它的注册 ...