• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    浅谈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>    
    <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.      
    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网页表格结构化标记的应用的全部内容了，希望对大家有所帮助，多多支持脚本之家~
    上一篇：HTML table 直列化格式详解
    下一篇：向div元素添加圆角边框的实现方法
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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