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

时间：2021-05-08

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

Html表格的结构化

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

结构化格式

XML/HTML Code复制内容到剪贴板
  • <table>
  • <thead>…</thead>--------表头区
  • <tbody>…</tbody>---------表体区
  • <tfoot>…</tfoot>------------表尾区
  • </table>

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

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

    XML/HTML Code复制内容到剪贴板
  • <table>
  • <caption>…</caption>
  • </table>
    • <caption>下的属性值有：

    属性名称

    属性值

    说明

    align

    Top

    标题在表格上方

    Bottom

    标题在表格下方


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

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

    <colgroup>…<colgroup>

    属性名称

    属性值

    说明

    Align

    Left

    靠左

    Center

    考中

    Right

    靠右

    Valign

    Right

    靠右

    Top

    考上

    Middle

    靠中

    Bottom

    靠下

    Span

    数字

    直列数


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

    XML/HTML Code复制内容到剪贴板
  • <html>
  • <head>
  • <li>表格嵌套的使用一</li>
  • <tablewidth="500">
  • <tr>
  • <tdalign="center">学生成绩表</td>
  • </tr>
  • <td>
  • <tableborder="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>
  • <tdcolspan="4">成绩汇总</td>
  • </tr>
  • </tfoot>
  • </table>
  • </td>
  • </tr>
  • </table>
  • <br/>
  • <li>表格嵌套的使用二</li>
  • <tableborder="1"width="500">
  • <captionalign="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>
  • <tdcolspan="4">成绩汇总</td>
  • </tr>
  • </tfoot>
  • </table>
  • <br/>
  • <li>表格嵌套的使用三</li>
  • <tableborder="1"width="500">
  • <captionalign="bottom">学生成绩</caption>
  • <col></col>
  • <colbgcolor=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网页表格结构化标记的应用的全部内容了，希望对大家有所帮助，多多支持~

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章