欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

浅谈Html网页表格结构化标记的应用

程序员文章站 2022-05-04 22:30:00
...
下面小编就为大家带来一篇浅谈Html网页表格结构化标记的应用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

浅谈Html网页表格结构化标记的应用

Html表格的结构化

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

结构化格式


XML/HTML Code复制内容到剪贴板

  1. <table>

  2. <thead></thead> --------表头区

  3. <tbody></tbody>---------表体区

  4. <tfoot></tfoot>------------表尾区

  5. </table>

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

Html表格的标题

每个表格都有自己的标题,正如上述第二幅图片所示,那么又如何做到让标题随着内容来移动呢?

表格的标题


XML/HTML Code复制内容到剪贴板

  1. <table>

  2. <caption></caption>

  3. </table>

<caption>下的属性值有:

属性名称

属性值

说明

align

Top

标题在表格上方

Bottom

标题在表格下方


小结:通过设置表格的标题,能够随时让标题跟着表格动。

Html直列化格式

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

<colgroup>…<colgroup>

属性名称

属性值

说明

Align

Left

靠左

Center

考中

Right

靠右

Valign

Right

靠右

Top

考上

Middle

靠中

Bottom

靠下

Span

数字

直列数


小结:通过设置表格的直列化格式,能够对我们需要的内容进行加深颜色,这里只是针对的列内容。

源代码如下:


XML/HTML Code复制内容到剪贴板

  1. <html>

  2. <head>

  3. <li>表格嵌套的使用一</li>

  4. <table width="500" >

  5. <tr>

  6. <td align="center">学生成绩表</td>

  7. </tr>

  8. <td>

  9. <table border="1" width="100%">

  10. <thead>

  11. <tr>

  12. <th>姓名</th>

  13. <th>语文</th>

  14. <th>数学</th>

  15. <th>外语</th>

  16. </tr>

  17. </thead>

  18. <tbody>

  19. <tr>

  20. <td>张三</td>

  21. <td>95</td>

  22. <td>95</td>

  23. <td>95</td>

  24. </tr>

  25. <tr>

  26. <td>张三</td>

  27. <td>95</td>

  28. <td>95</td>

  29. <td>95</td>

  30. </tr>

  31. <tr>

  32. <td>张三</td>

  33. <td>95</td>

  34. <td>95</td>

  35. <td>95</td>

  36. </tr>

  37. </tbody>

  38. <tfoot>

  39. <tr>

  40. <td colspan="4">成绩汇总</td>

  41. </tr>

  42. </tfoot>

  43. </table>

  44. </td>

  45. </tr>

  46. </table>

  47. <br/>

  48. <li>表格嵌套的使用二</li>

  49. <table border="1" width="500" >

  50. <caption align="bottom">学生成绩</caption>

  51. <thead>

  52. <tr>

  53. <th>姓名</th>

  54. <th>语文</th>

  55. <th>数学</th>

  56. <th>外语</th>

  57. </tr>

  58. </thead>

  59. <tbody>

  60. <tr>

  61. <td>张三</td>

  62. <td>95</td>

  63. <td>95</td>

  64. <td>95</td>

  65. </tr>

  66. <tr>

  67. <td>张三</td>

  68. <td>95</td>

  69. <td>95</td>

  70. <td>95</td>

  71. </tr>

  72. <tr>

  73. <td>张三</td>

  74. <td>95</td>

  75. <td>95</td>

  76. <td>95</td>

  77. </tr>

  78. </tbody>

  79. <tfoot>

  80. <tr>

  81. <td colspan="4">成绩汇总</td>

  82. </tr>

  83. </tfoot>

  84. </table>

  85. <br/>

  86. <li>表格嵌套的使用三</li>

  87. <table border="1" width="500" >

  88. <caption align="bottom">学生成绩</caption>

  89. <col ></col>

  90. <col bgcolor=blue></col>

  91. <thead>

  92. <tr>

  93. <th>姓名</th>

  94. <th>语文</th>

  95. <th>数学</th>

  96. <th>外语</th>

  97. </tr>

  98. </thead>

  99. <tbody>

  100. <tr >

  101. <td>张三</td>

  102. <td>95</td>

  103. <td>95</td>

  104. <td>95</td>

  105. </tr>

  106. <tr>

  107. <td>张三</td>

  108. <td>95</td>

  109. <td>95</td>

  110. <td>95</td>

  111. </tr>

  112. <tr>

  113. <td>张三</td>

  114. <td>95</td>

  115. <td>95</td>

  116. <td>95</td>

  117. </tr>

  118. </tbody>

  119. <tfoot>

  120. </tfoot>

  121. </table>

  122. </body>

  123. </head>

  124. </html>

以上就是小编为大家带来的浅谈Html网页表格结构化标记的应用的全部内容了,希望对大家有所帮助,多多支持PHP中文网~

更多浅谈Html网页表格结构化标记的应用相关文章请关注PHP中文网!