HTML 表格主体标签 - <tbody>

什么是 <tbody> 标签？

<tbody> 标签用于定义HTML表格的主体部分。它包含表格的主要数据行（使用 <tr> 标签定义），用于组织表格的实际数据，提高表格的语义化和可访问性。

基本语法

html 
<table>
  <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>
</table>

父元素与子元素

父元素

<tbody> 标签必须作为 <table> 元素的子元素。

子元素

<tbody> 标签只能包含 <tr>（表格行）元素。

属性

全局属性

<tbody> 标签支持所有HTML全局属性，常用的包括：

属性 描述
class 为表格主体指定类名
id 为表格主体指定唯一ID
style 内联样式
title 鼠标悬停时显示的提示文本
lang 指定表格主体内容的语言

示例

基本使用

html 
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>25</td>
      <td>产品经理</td>
    </tr>
  </tbody>
</table>

使用CSS样式的数据行

html 
<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  thead {
    background-color: #4CAF50;
    color: white;
  }
  
  tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* 斑马条纹 */
  }
  
  tbody tr:hover {
    background-color: #e9e9e9; /* 悬停效果 */
  }
</style>

<table>
  <thead>
    <tr>
      <th>产品名称</th>
      <th>价格</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>笔记本电脑</td>
      <td>¥5999</td>
      <td>20</td>
    </tr>
    <tr>
      <td>智能手机</td>
      <td>¥3999</td>
      <td>50</td>
    </tr>
    <tr>
      <td>平板电脑</td>
      <td>¥2999</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

与其他表格结构元素一起使用

html 
<table>
  <caption>员工信息表</caption>
  <thead>
    <tr>
      <th>部门</th>
      <th>姓名</th>
      <th>职位</th>
      <th>薪资</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>技术部</td>
      <td>张三</td>
      <td>工程师</td>
      <td>¥15000</td>
    </tr>
    <tr>
      <td>设计部</td>
      <td>李四</td>
      <td>设计师</td>
      <td>¥12000</td>
    </tr>
    <tr>
      <td>市场部</td>
      <td>王五</td>
      <td>市场专员</td>
      <td>¥8000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3">平均薪资</th>
      <td>¥11666</td>
    </tr>
  </tfoot>
</table>

最佳实践

1. 始终使用表格主体结构

为表格添加 <tbody> 元素可以提高表格的语义化和可访问性，特别是对于复杂表格。

2. 数据行只包含数据单元格

在 <tbody> 元素中，应该主要使用 <td> 标签来定义数据单元格，除非需要在行首使用 <th> 标签作为行标题。

3. 与thead和tfoot结合使用

将 <tbody> 与 <thead> 和 <tfoot> 结合使用，可以创建结构清晰、语义化良好的表格。

4. 使用CSS样式美化数据行

使用CSS来设置数据行的样式，如斑马条纹、悬停效果等，以提高表格的可读性。

5. 保持数据行一致性

确保数据行具有一致的结构，每行包含相同数量的单元格（除非使用了 colspan 或 rowspan）。

浏览器兼容性

<tbody> 标签在所有现代浏览器中都有良好的支持，包括：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE6+

总结

<tbody> 标签是HTML表格中的语义化结构元素，用于组织表格的主要数据部分。通过合理使用 <tbody> 标签，可以提高表格的可读性、可访问性和可维护性。记住要与 <thead> 和 <tfoot> 结合使用，使用CSS进行样式设置，并遵循最佳实践来确保表格的质量。

最后更新：2026-02-07