<thead>: The Table Head element

<thead> HTML 元素封装了一组表行（<tr> 元素），指示它们包含表头以及有关表列的信息。这通常采用列标题（<th> 元素）的形式。

¥The <thead> HTML element encapsulates a set of table rows (<tr> elements), indicating that they comprise the head of a table with information about the table's columns. This is usually in the form of column headers (<th> elements).

Try it

属性

¥Attributes

该元素包括 全局属性。

¥This element includes the global attributes.

已弃用的属性

¥Deprecated attributes

以下属性已被弃用，不应使用。下面记录了它们，供更新现有代码时参考，并且仅供历史参考。

¥The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.

align

指定每个头单元的水平对齐方式。可能的 enumerated 值为 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

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

使用说明

¥Usage notes

  • <thead> 放置在任何 <caption> 和 <colgroup> 元素之后，但在任何 <tbody>、<tfoot> 和 <tr> 元素之前。
  • 与相关的 <tbody> 和 <tfoot> 元素一起，<thead> 元素提供了有用的 semantic 信息，并且可以在渲染屏幕或打印时使用。指定此类表格内容组还可以为辅助技术（包括屏幕阅读器和搜索引擎）提供有价值的上下文信息。
  • 打印文档时，对于多页表，表头通常指定每页上保持相同的信息。

示例

¥Examples

请参阅 <table> 了解介绍通用标准和最佳实践的完整表格示例。

¥See <table> for a complete table example introducing common standards and best practices.

基本头部结构

¥Basic head structure

此示例演示了一个表，该表分为包含列标题的 head 部分和包含表主要数据的 body 部分。

¥This example demonstrates a table divided into a head section with column headers and a body section with the table's main data.

HTML

<thead> 和 <tbody> 元素用于将表行构造为 semantic 部分。<thead> 元素表示表的头部部分，其中包含一行 (<tr>) 列标题单元格 (<th>)。

¥The <thead> and <tbody> elements are used to structure the table rows into semantic sections. The <thead> element represents the head section of the table, which contains a row (<tr>) of column headers cells (<th>).

html

<table>
  <thead>
    <tr>
      <th>学生卡</th>
      <th>名称</th> 
      <th>主要的</th>
      <th>致谢</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>琼斯，玛莎</td> 
      <td>计算机科学</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>尼姆·维克托</td> 
      <td>俄罗斯文学</td>
      <td>220</td>
    </tr> 
    <tr>
      <td>4100332</td>
      <td>亚历山德拉·彼得罗夫</td> 
      <td>天体物理学</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

CSS

使用一些基本的 CSS 来设置表格标题的样式并高亮，以便使列标题从表格主体中的数据中脱颖而出。

¥Some basic CSS is used to style and highlight the table head so that the headings of the columns stand out from the data in the table body.

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

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

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

tbody > tr > td:last-of-type {
  text-align: center;
}

结果

¥Result

多头排

¥Multiple head rows

此示例演示了包含两行的表头部分。

¥This example demonstrates a table head section with two rows.

HTML

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

¥We extend the markup the table from the basic example in this example by including two table rows (<tr>) within the <thead> element creating a multi-row table head. We included an additional column, splitting the student names into first and last names.

html

<table>
  <thead>
    <tr>
      <th rowspan="2">学生卡</th>
      <th colspan="2">学生</th> 
      <th rowspan="2">主要的</th>
      <th rowspan="2">致谢</th>
    </tr>
    <tr>
      <th>名</th>
      <th>姓</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>玛莎</td> 
      <td>琼斯</td>
      <td>计算机科学</td> 
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>胜利者</td> 
      <td>尼姆</td>
      <td>俄罗斯文学</td> 
      <td>220</td>
    </tr> 
    <tr>
      <td>4100332</td>
      <td>亚历山德拉</td> 
      <td>彼得罗夫</td>
      <td>天体物理学</td> 
      <td>260</td>
    </tr>
  </tbody>
</table>

细胞跨越

¥Cell spanning

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

¥In order to associate and line up the header cells with the correct columns and rows, the colspan and rowspan attributes are used on the <th> elements. The values set in these attributes specify how many cells each header cell (<th>) spans. Due to the way these attributes are set, the two second-row header cells are lined up with the columns they head. These each span one row and one column as the default values for the colspan and rowspan attributes are both 1.

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

¥The column and row spanning demonstrated by this example are illustrated in the following figure:

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 与 前面的例子 相比没有变化。

¥The CSS is unchanged from the previous example.

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

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

tbody {
  background-color: #e4f0f5;
}

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

tbody > tr > td:last-of-type {
  text-align: center;
}

结果

¥Result

技术总结

¥Technical summary

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

规范

Specification
HTML Standard
# the-thead-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also