HTML tbody 标签

HTML tbody 语法

在 HTML 中,tbody 是一个结构语义标签,用于定义表格的主体部分。它通常与 theadtfoot 一起使用,从而将表格划分为表头、表身、表脚这 3 部分。

语法:

<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
        <tr>
            <th>表头单元格1</th>
            <th>表头单元格2</th>
        </tr>
    </thead>
    <!--表身-->
    <tbody>
        <tr>
            <td>表行单元格1</td>
            <td>表行单元格2</td>
        </tr>
        <tr>
            <td>表行单元格3</td>
            <td>表行单元格4</td>
        </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
        <tr>
            <td>标准单元格5</td>
            <td>标准单元格6</td>
        </tr>
    </tfoot>
</table>

说明:

thead、tbody、tfoot 这 3 个标签主要是用于实现表格的语义划分,它们之间的区别如下。

  • thead:用于包含表格的 “表头” 部分。
  • tbody:用于包含表格的 “表身” 部分。
  • tfoot:用于包含表格的 “表脚” 部分。

注意:

  • tbody 必须是 table 的直接子元素。
  • 在一个 table 中,tbody 只能出现一次。

HTML tbody 摘要

属于 HTML 表格
使用频率
兼容性 查看
官方文档 查看
MDN 查看

HTML tbody 示例

接下来,我们通过一个简单的例子来讲解一下 HTML tbody 标签是如何使用的。

示例:tbody 标签的基本用法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 使用CSS为表格加上边框 */
        table, tr, td,th { border: 1px solid silver; }
    </style>
</head>
<body>
    <table>
        <caption>考试成绩表</caption>
        <thead>    
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>英语</th>
                <th>数学</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>80</td>
                <td>80</td>
                <td>80</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
            <tr>
                <td>小杰</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>平均</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

页面效果如下图所示。

HTML tbody标签示例

分析:

表脚(tfoot)往往用于统计数据的。对于 thead、tbody 和 tfoot 标签,不一定全部都上,例如 tfoot 就很少会用到。一般情况下,我们都是根据实际需要来使用这些标签。

thead、tbody 和 tfoot 标签也是表格中非常重要的标签,它从语义上区分了表头、表身和表脚,很多人容易忽略它们。

此外,thead、tbody 和 tfoot 除了使得代码更具有语义之外,还有另外一个重要作用:方便分块来控制表格的 CSS 样式。

上一篇: thead

下一篇: tfoot

给站长反馈

绿叶网正在不断完善中,小伙伴们如果发现任何问题,还望多多给站长反馈,谢谢!

邮箱:lvyenet@vip.qq.com

「绿叶网」服务号
绿叶网服务号放大
关注服务号,微信也能看教程。
绿叶网服务号