首页 > 网页制作 > HTML/Xhtml

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

admin HTML/Xhtml 2022-02-04 23:40:27 Html   网页   表格   标记"

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

Html表格的结构化

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

结构化格式

XML/HTML Code复制内容到剪贴板
  1. <table>     
  2.      
  3. <thead>thead> --------表头区     
  4.      
  5. <tbody>tbody>---------表体区     
  6.      
  7. <tfoot>tfoot>------------表尾区     
  8.      
  9. table>    

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

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

XML/HTML Code复制内容到剪贴板
  1. <table>     
  2.      
  3. <caption>caption>     
  4.      
  5. table>    
下的属性值有:

属性名称

属性值

说明

align

Top

标题在表格上方

Bottom

标题在表格下方


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

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

属性名称

属性值

说明

Align

Left

靠左

Center

考中

Right

靠右

Valign

Right

靠右

Top

考上

Middle

靠中

Bottom

靠下

Span

数字

直列数


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

XML/HTML Code复制内容到剪贴板
  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>95td>     
  24. <td>95td>     
  25. <td>95td>     
  26. tr>     
  27. <tr>     
  28. <td>张三td>     
  29. <td>95td>     
  30. <td>95td>     
  31. <td>95td>     
  32. tr>     
  33. <tr>     
  34. <td>张三td>     
  35. <td>95td>     
  36. <td>95td>     
  37. <td>95td>     
  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>95td>     
  68. <td>95td>     
  69. <td>95td>     
  70. tr>     
  71. <tr>     
  72. <td>张三td>     
  73. <td>95td>     
  74. <td>95td>     
  75. <td>95td>     
  76. tr>     
  77. <tr>     
  78. <td>张三td>     
  79. <td>95td>     
  80. <td>95td>     
  81. <td>95td>     
  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>95td>     
  110. <td>95td>     
  111. <td>95td>     
  112. tr>     
  113. <tr>     
  114. <td>张三td>     
  115. <td>95td>     
  116. <td>95td>     
  117. <td>95td>     
  118. tr>     
  119. <tr>     
  120. <td>张三td>     
  121. <td>95td>     
  122. <td>95td>     
  123. <td>95td>     
  124. tr>     
  125. tbody>     
  126. <tfoot>     
  127. tfoot>     
  128. table>     
  129.      
  130. body>     
  131. head>     
  132. html>    

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

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/HTML/70954.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持