<th>: The Table Header element

<th> HTML 元素将单元格定义为一组表格单元格的标题，并且可以用作 <tr> 元素的子元素。该组的确切性质由 scope 和 headers 属性定义。

¥The <th> HTML element defines a cell as the header of a group of table cells and may be used as a child of the <tr> element. The exact nature of this group is defined by the scope and headers attributes.

Try it

属性

¥Attributes

该元素包括 全局属性。

¥This element includes the global attributes.

abbr

标题单元格内容的简短描述，作为在其他上下文中引用单元格时用于标题单元格的替代标签提供。某些用户代理（例如语音阅读器）可能会在内容本身之前呈现此描述。

colspan

一个非负整数值，指示标题单元格跨越或延伸了多少列。默认值为 1。用户代理将高于 1000 的值视为不正确而忽略，并将此类值默认为 1。

headers

与 <th> 元素的 id 属性相对应的空格分隔字符串列表，这些元素为此标题单元格提供标题。

rowspan

一个非负整数值，指示标题单元格跨越或延伸了多少行。默认值为 1；如果其值设置为 0，则标题单元格将延伸到 <th> 所属的表格分组部分的末尾（<thead>、<tbody>、<tfoot>，即使是隐式定义的）。高于 65534 的值将在 65534 处被剪裁。

scope

定义与标题（在 <th> 中定义）元素相关的单元格。可能的 enumerated 值为：

  • row：标题与其所属行的所有单元格相关；
  • col：标题与其所属列的所有单元格相关；
  • rowgroup：标题属于行组并与其所有单元格相关；
  • colgroup：标头属于 colgroup 并与其所有单元格相关。

如果未指定 scope 属性，或其值不是 row、col、rowgroup 或 colgroup，则浏览器会自动选择标题单元格适用的单元格集。

已弃用的属性

¥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 属性，因为此属性已弃用。

axis

包含空格分隔的字符串列表，每个字符串对应于标题单元格所应用到的一组单元格的 id 属性。请改用 scope 属性，因为此属性已弃用。

bgcolor

定义标题单元格的背景颜色。该值是 HTML 颜色；6 位十六进制 RGB 代码（前缀为“#”）或 颜色关键词。不支持其他 CSS <color> 值。请改用 background-color CSS 属性，因为此属性已弃用。

char

指定内容与标题单元格字符的对齐方式。当尝试对齐数字或货币值时，此值的典型值包括句点 (.)。如果 align 未设置为 char，则忽略该属性。

charoff

指定标题单元格内容相对于 char 属性指定的对齐字符的偏移字符数。

height

定义建议的标题单元格高度。请改用 height CSS 属性，因为此属性已弃用。

valign

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

width

定义建议的标题单元格宽度。请改用 width CSS 属性，因为此属性已弃用。

使用说明

¥Usage notes

  • <th> 只能在 <tr> 元素内使用。
  • 在简单的上下文中，在标题单元格（<th> 元素）上使用 scope 属性是多余的，因为 scope 是推断出来的。但是，某些辅助技术可能无法正确推断，因此指定标头范围可能会改善用户体验。
  • 当使用 colspan 和 rowspan 属性跨越多个列和行的标题单元格时，未定义这些属性的单元格（默认值为 1）会自动装入表结构中跨越 1x1 单元格的可用空间中，如 下图：

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

注意：这些属性不得用于重叠单元格。

¥Note: These attributes must not be used to overlap cells.

示例

¥Examples

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

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

基本的列标题和行标题

¥Basic column and row headers

此示例使用 <th> 元素在基本表结构中引入列标题和行标题。

¥This example uses <th> elements to introduce column and row headers in a basic table structure.

HTML

第一行（<tr> 元素）包含列标题（<th> 元素），它充当列的 "titles"，以便更容易理解列中的信息并识别数据。为了指示每个列标题与相应列中的所有单元格相关，scope 属性设置为 col（列）。

¥The first row (<tr> element) contains the column headers (<th> elements), which act as "titles" for the columns to make it easier to understand the information in the columns and identify the data. To indicate that each column header relates to all cells in the corresponding column, the scope attribute is set to col (column).

其余行包含表的主要数据。这些行中的每一行都有一个作为第一个单元格引入的行标题（<th> 元素）。这将创建一个包含行标题的列作为表的第一列。与列标题类似，scope 属性设置为 row 以指定每个行标题与哪些单元格相关，在下面的示例中，这些单元格是每个 row 中的所有数据单元格（<td> 元素）。

¥The remaining rows contain the main data of the table. Each of these rows has a row header (<th> element) introduced as the first cell. This creates a column with row headers as the first column of the table. Similar to the column headers, the scope attribute is set to row to specify which cells each row header relates to, which in the example below are all data cells (<td> elements) in each row.

注意：通常，分组元素 <thead> 和 <tbody> 用于将带有标题的行分组到相应的表头和表体部分。本示例中省略了这些元素，以降低复杂性并能够重点关注标题单元格的使用。

¥Note: Normally, the grouping elements <thead> and <tbody> are used to group rows with headers into the respective table head and body sections. These elements are omitted in this example to reduce complexity and enable focusing on the use of header cells.

html

<table>
  <tr>
    <th scope="col">符合</th>
    <th scope="col">码字</th> 
    <th scope="col">发音</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>阿尔法</td> 
    <td>阿尔法赫</td>
  </tr> 
  <tr>
    <th scope="row">B</th>
    <td>布拉沃</td> 
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>查理</td> 
    <td>查利</td>
  </tr> 
  <tr>
    <th scope="row">D</th>
    <td>三角洲</td> 
    <td>戴尔他</td>
  </tr>
</table>

CSS

一些基本的 CSS 用于设置表格及其单元格的样式。我们使用 CSS 属性选择器 根据标题单元格的 scope 属性值来定位标题单元格，高亮列标题和行标题（<th> 元素），并将它们彼此区分并与数据单元格 (<td>) 区分开来。

¥Some basic CSS is used to style the table and its cells. We use CSS attribute selectors to target header cells based on their scope attribute values, highlighting column and row headers (<th> elements) and differentiating them each other and from the data cells (<td>).

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

th[scope="col"] {
  background-color: #505050;
  color: #fff;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

tr:nth-of-type(odd) td {
  background-color: #eee;
}
css
table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

结果

¥Result

列和行跨越

¥Column and row spanning

此示例通过添加第二行作为附加列标题来扩展和增强 前面的例子 的基本表。

¥This example extends and enhances the basic table from the previous example by adding a second row for additional column headers.

HTML

添加一个附加表行（<tr> 元素）作为表的第二个标题行，并带有两个附加列标题（<th> 元素）。这样，"发音" 列就被分成两列，一列用于 IPA（国际音标）记法，一列用于重新拼写（原始发音列）。相应的数据单元格（<td> 元素）将添加到每个后续行。

¥An additional table row (<tr> element) is added as the second header row of the table with two additional column headers (<th> elements). In this way, the "Pronunciation" column is split into two columns, one for the IPA (International Phonetic Alphabet) notation and one for the respelling (the original pronunciation column). The corresponding data cells (<td> elements) are added to each subsequent row.

如 使用说明 中所示，colspan 和 rowspan 属性可用于 <th> 元素，以将标题单元格分配到正确的列和行。为了在表结构中实现 "two-row" 标题，第一个 <tr> 元素中的前两个标题单元格跨两行。第三个标题单元格跨两列宽（保留在第一行）。此设置在第二行的第三列和第四列中留下两个可用区域，其中自动放置第二个 <tr> 元素内的两个标题，colspan 和 rowspan 属性的默认值为 1。

¥As shown in the usage notes, the colspan and rowspan attributes can be used for the <th> elements to allocate the header cells to the correct columns and rows. To achieve a "two-row" header in the table structure, the first two header cells within the first <tr> element are spanned across two rows. The third header cell is spanned two columns wide (remaining in the first row). This setup leaves two available areas in the third and fourth columns in the second row, where the two headers within the second <tr> element are automatically placed, with the default value being 1 for the colspan and rowspan attributes.

注意：通常，<thead> 和 <tbody> 元素用于将带有标题的行分组到相应的表头和正文部分。本示例中未实现这一点，以重点关注标头和跨度并降低示例的复杂性。

¥Note: Normally, <thead> and <tbody> elements are used to group rows with headers into the respective table head and body sections. This is not implemented in this example to focus on the headers and spanning and reduce the example's complexity.

html

<table>
  <tr>
    <th scope="col" rowspan="2">符合</th>
    <th scope="col" rowspan="2">码字</th> 
    <th scope="col" colspan="2">发音</th>
  </tr>
  <tr>
    <th scope="col">IPA</th>
    <th scope="col">重新拼写</th>
  </tr> 
  <tr>
    <th scope="row">A</th>
    <td>阿尔法</td> 
    <td>埃尔法</td>
    <td>阿尔法赫</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>布拉沃</td> 
    <td>布拉ː沃</td>
    <td>BRAH voh</td>
  </tr> 
  <tr>
    <th scope="row">C</th>
    <td>查理</td> 
    <td>tʃɑːli</td>
    <td>查利</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>三角洲</td> 
    <td>德尔特</td>
    <td>戴尔他</td>
  </tr>
</table>

CSS

CSS 与 前面的例子 相比没有变化。

¥The CSS is unchanged from the previous example.

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;
}

th[scope="col"] {
  background-color: #505050;
  color: #fff;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

tr:nth-of-type(odd) td {
  background-color: #eee;
}

结果

¥Result

将标题单元格与其他标题单元格关联

¥Associate header cells with other header cells

对于标题单元格之间更复杂的关系，单独使用 th 元素和 scope 属性可能不足以满足辅助技术的需要，尤其是屏幕阅读器。

¥For more complex relationships between header cells, using th elements with the scope attribute alone may not be sufficient for assistive technologies, especially screen readers.

HTML

例如，为了改进 前面的例子 的 accessibility 并允许屏幕阅读器朗读与每个标题单元格关联的标题，可以将 headers 属性与 id 属性一起引入。由于示例中 "发音" 列被分成两列，引入了 "两排" 标题，屏幕阅读器等辅助技术可能无法识别 "发音" 标题单元格与哪些附加标题单元格（th 元素）相关，反之亦然。 反之亦然。因此，在 "发音"、"IPA" 和 "重新拼写" 标题单元格上使用 headers 属性，以基于以空格分隔列表形式添加的 id 属性中的唯一标识符的值来关联相关的标题单元格。

¥To improve the accessibility of the previous example and to allow screen readers, for example, to speak the headers associated with each header cell, the headers attribute can be introduced along with id attributes. Because of the way the "Pronunciation" column is split into two columns in the example, introducing a "two row" header, assistive technologies such as screen readers may not be able to identify which additional header cells (th elements) the "Pronunciation" header cell is related to and vice versa. Therefore, the headers attribute is used on the "Pronunciation", "IPA", and "Respelling" header cells to associate the related header cells based on the values of the unique identifiers from the added id attributes in the form of a space-separated list.

注意：建议对 id 属性使用更具描述性和有用的值。文档中的每个 id 对于该文档来说必须是唯一的。在此示例中，id 值是单个字符，以保持对 headers 属性概念的关注。

¥Note: It's recommended to use more descriptive and useful values for the id attribute. Each id in a document must be unique to that document. In this example, the id values are single characters to maintain focus on the concept of the headers attribute.

html

<table>
  <tr>
    <th scope="col" rowspan="2">符合</th>
    <th scope="col" rowspan="2">码字</th> 
    <th scope="col" colspan="2" id="p" headers="i r">发音</th>
  </tr>
  <tr>
    <th scope="col" id="i" headers="p">IPA</th>
    <th scope="col" id="r" headers="p">重新拼写</th>
  </tr> 
  <tr>
    <th scope="row">A</th>
    <td>阿尔法</td> 
    <td>埃尔法</td>
    <td>阿尔法赫</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>布拉沃</td> 
    <td>布拉ː沃</td>
    <td>BRAH voh</td>
  </tr> 
  <tr>
    <th scope="row">C</th>
    <td>查理</td> 
    <td>tʃɑːli</td>
    <td>查利</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>三角洲</td> 
    <td>德尔特</td>
    <td>戴尔他</td>
  </tr>
</table>

结果

¥Result

视觉结果 与 前面的示例表 相比没有变化。

¥The visual result is unchanged from the previous example table.

技术总结

¥Technical summary

内容类别 没有任何。
允许的内容 流量内容，但没有页眉、页脚、分段内容或标题内容后代。
标签遗漏 开始标记是强制性的。
如果结束标记后面紧跟着 <th> 或 <td> 元素或者其父元素中没有更多数据，则可以省略结束标记。
允许的父级 <tr> 元素。
隐式 ARIA 角色 columnheader 或 rowheader
允许的 ARIA 角色 任何
DOM 接口 HTMLTableCellElement

规范

Specification
HTML Standard
# the-th-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also