HTML 表格头部标签 - <thead> #

什么是 <thead> 标签？ #

<thead> 标签用于定义HTML表格的头部部分。它包含表格的表头行（使用 <tr> 标签定义），用于组织表格的标题行，提高表格的语义化和可访问性。

基本语法 #

html 
<table>
  <thead> <!-- 表格头部 -->
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
  </tbody>
</table>

父元素与子元素 #

父元素 #

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

子元素 #

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

属性 #

全局属性 #

<thead> 标签支持所有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>
  </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;
  }
  
  thead th {
    font-weight: bold;
    text-align: left;
  }
</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>
  </tbody>
</table>

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

html 
<table>
  <caption>2025年销售数据</caption>
  <thead>
    <tr>
      <th>月份</th>
      <th>销售额</th>
      <th>利润</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1月</td>
      <td>¥100万</td>
      <td>¥20万</td>
    </tr>
    <tr>
      <td>2月</td>
      <td>¥120万</td>
      <td>¥24万</td>
    </tr>
    <!-- 更多数据行 -->
  </tbody>
  <tfoot>
    <tr>
      <th>总计</th>
      <td>¥1200万</td>
      <td>¥240万</td>
    </tr>
  </tfoot>
</table>

最佳实践 #

1. 始终使用表头结构 #

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

2. 表头只包含表头单元格 #

在 <thead> 元素中，应该只使用 <th> 标签来定义表头单元格，而不是 <td> 标签。

3. 与tbody和tfoot结合使用 #

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

4. 使用CSS样式美化表头 #

使用CSS来设置表头的样式，如背景色、字体大小、字体粗细等，以提高表格的可读性。

5. 保持表头简洁 #

表头内容应该简洁明了，避免过长或过于复杂的描述。

浏览器兼容性 #

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

  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE6+

总结 #

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

最后更新：2026-02-07