1. Web
  2. HTML
  3. 参考
  4. 元素
  5. <thead>

<thead>：表格头部元素

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

<thead> HTML 元素用于封装一组表格行（<tr> 元素），表示它们构成表格的头部，包含有关表格列的信息。这通常以列标题（<th> 元素）的形式出现。

试一试

<table>
  <caption>
    Council budget (in £) 2018
  </caption>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

thead,
tfoot {
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td {
  text-align: center;
}

属性

此元素包含全局属性。

已弃用属性

以下属性已弃用，不应使用。它们仅在更新现有代码时作为参考和出于历史兴趣而在此处记录。

align

指定每个表头单元格的水平对齐方式。可能的枚举值包括 left、center、right、justify 和 char。如果支持，char 值会根据 char 属性中定义的字符以及 charoff 属性定义的偏移量来对齐文本内容。请改用 text-align CSS 属性，因为此属性已弃用。

bgcolor

定义每个表头单元格的背景颜色。该值是 HTML 颜色；可以是带 # 前缀的6 位十六进制 RGB 代码，也可以是颜色关键字。不支持其他 CSS <color> 值。请改用 background-color CSS 属性，因为此属性已弃用。

char

不执行任何操作。它最初旨在指定每个表头单元格内容与某个字符的对齐方式。如果 align 未设置为 char，则此属性将被忽略。

charoff

不执行任何操作。它最初旨在指定表头单元格内容与 char 属性指定的对齐字符之间的字符偏移量。

valign

指定每个表头单元格的垂直对齐方式。可能的枚举值包括 baseline、bottom、middle 和 top。请改用 vertical-align CSS 属性，因为此属性已弃用。

用法说明

  • <thead> 位于任何 <caption> 和 <colgroup> 元素之后，但在任何 <tbody>、<tfoot> 和 <tr> 元素之前。
  • <thead> 元素及其相关的 <tbody> 和 <tfoot> 元素提供了有用的语义信息，可用于屏幕或打印渲染。指定此类表格内容组也为辅助技术（包括屏幕阅读器和搜索引擎）提供了宝贵的上下文信息。
  • 打印文档时，如果表格跨越多页，表格头部通常会指定每页都相同的信息。

示例

请参阅 <table> 以获取一个完整的表格示例，其中介绍了常见的标准和最佳实践。

基本表头结构

此示例演示了一个表格，该表格分为带列标题的头部部分和带表格主要数据的正文部分。

HTML

<thead> 和 <tbody> 元素用于将表格行结构化为语义部分。<thead> 元素表示表格的头部部分，其中包含一行（<tr>）列标题单元格（<th>）。

html
<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Major</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>Computer Science</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>Russian Literature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>Astrophysics</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

CSS

使用一些基本的 CSS 来设置表格头部的样式和突出显示，以便列标题在表格正文数据中脱颖而出。

css
thead {
  border-bottom: 2px solid rgb(160 160 160);
  text-align: center;
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

结果

多行表头

此示例演示了一个具有两行的表格头部部分。

HTML

在此示例中，我们通过在 <thead> 元素中包含两行表格行（<tr>），从而创建了一个多行表格头部，扩展了基本示例中的表格标记。我们添加了一个额外的列，将学生姓名分为姓氏和名字。

html
<table>
  <thead>
    <tr>
      <th rowspan="2">Student ID</th>
      <th colspan="2">Student</th>
      <th rowspan="2">Major</th>
      <th rowspan="2">Credits</th>
    </tr>
    <tr>
      <th>First name</th>
      <th>Last name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Martha</td>
      <td>Jones</td>
      <td>Computer Science</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Victor</td>
      <td>Nim</td>
      <td>Russian Literature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Alexandra</td>
      <td>Petrov</td>
      <td>Astrophysics</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

单元格跨度

为了将标题单元格与正确的列和行关联和对齐，在 <th> 元素上使用了 colspan 和 rowspan 属性。这些属性中设置的值指定了每个标题单元格（<th>）跨越多少个单元格。由于这些属性的设置方式，第二行的两个标题单元格与它们所对应的列对齐。它们各自跨越一行和一列，因为 colspan 和 rowspan 属性的默认值都为 1。

此示例演示的列和行跨度如下图所示

Illustration demonstrating column and row spanning of table cells: cells 1, 3, and 4 spanning one column and two rows each; cell 2 spanning two columns and one row; cells 5 and 6 span a single row and column each, fitting into the available cells that are the second and third columns in the second row

CSS

CSS 与上一个示例保持不变。

结果

技术摘要

内容类别 无。
允许内容 零个或多个 <tr> 元素。
标签省略 开始标签是强制性的。如果 <thead> 元素紧跟在 <tbody> 或 <tfoot> 元素之后，则结束标签可以省略。
允许父级 一个 <table> 元素。<thead> 必须出现在任何 <caption> 和 <colgroup> 元素之后（即使是隐式定义的），但在任何 <tbody>、<tfoot> 和 <tr> 元素之前。
隐式 ARIA 角色 rowgroup
允许的 ARIA 角色 任意
DOM 接口 HTMLTableSectionElement

规范

规范
HTML
# 表头元素

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面由 MDN 贡献者 最后修改于 。

在 GitHub 上查看此页面 • 报告此内容存在问题