<thead>：表格头部元素

基线 广泛可用

此功能已得到很好的确立，并且可在许多设备和浏览器版本上运行。它自以下日期起在各浏览器中可用： 2015 年 7 月.

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

试一试

属性

此元素包含 全局属性。

已弃用属性

以下属性已弃用，不应使用。在更新现有代码和出于历史参考的目的，我们会在下面记录它们。

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>元素之前。
  • 与相关的<tbody>和<tfoot>元素一起，<thead>元素提供了有用的语义信息，并且可以在屏幕或打印渲染时使用。指定此类表格内容组还可以为辅助技术（包括屏幕阅读器和搜索引擎）提供有价值的上下文信息。
  • 打印文档时，如果表格跨多个页面，则表头通常会指定在每个页面上保持不变的信息。

示例

有关完整的表格示例，介绍常见标准和最佳实践，请参阅<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: #fff;
}

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>

单元格跨度

为了将表头单元格与正确的列和行关联并对齐，colspan和rowspan属性用于<th>元素。这些属性中设置的值指定每个表头单元格（<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 与上一个示例中的 CSS 相同。

结果

技术摘要

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

规范

规范
HTML 标准
# the-thead-element

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅