<th>: 表头元素

Baseline 广泛可用 *

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

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

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

试一试

<table>
  <caption>
    Alien football stars
  </caption>
  <tr>
    <th scope="col">Player</th>
    <th scope="col">Gloobles</th>
    <th scope="col">Za'taak</th>
  </tr>
  <tr>
    <th scope="row">TR-7</th>
    <td>7</td>
    <td>4,569</td>
  </tr>
  <tr>
    <th scope="row">Khiresh Odo</th>
    <td>7</td>
    <td>7,223</td>
  </tr>
  <tr>
    <th scope="row">Mia Oolong</th>
    <td>9</td>
    <td>6,219</td>
  </tr>
</table>

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

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

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

td {
  text-align: center;
}

tr:nth-of-type(even) {
  background-color: #eeeeee;
}

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

属性

此元素包含全局属性。

缩写

表头单元格内容的简短缩写描述，作为在其他上下文中引用该单元格时使用的替代标签。一些用户代理（例如屏幕阅读器）可能会在内容本身之前显示此描述。

colspan

一个非负整数值，表示表头单元格跨越或扩展的列数。默认值为 1。用户代理会将大于 1000 的值视为不正确，并将其默认设置为 1。

headers

一个由空格分隔的字符串列表，对应于为该表头单元格提供标题的 <th> 元素的 id 属性。

rowspan

一个非负整数值，表示表头单元格跨越或扩展的行数。默认值为 1；如果其值设置为 0，表头单元格将扩展到 <th> 所属的表格分组部分的末尾（<thead>、<tbody>、<tfoot>，即使是隐式定义的）。大于 65534 的值将被截断为 65534。

scope

定义标题（在 <th> 中定义）元素所关联的单元格。可能的枚举值为

row: 标题与其所属行的所有单元格相关联；
col: 标题与其所属列的所有单元格相关联；
rowgroup: 标题属于一个行组，并与其所有单元格相关联；
colgroup: 标题属于一个列组，并与其所有单元格相关联。

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

已弃用属性

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

align 已弃用: 指定表头单元格的水平对齐方式。可能的枚举值为 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 已弃用: 指定表头单元格的垂直对齐方式。可能的枚举值为 baseline、bottom、middle 和 top。请改用 vertical-align CSS 属性，因为此属性已弃用。
width 已弃用: 定义建议的表头单元格宽度。请改用 width CSS 属性，因为此属性已弃用。

用法说明

<th> 只能在 <tr> 元素中使用。
在简单的上下文中，在表头单元格（<th> 元素）上使用 scope 属性是多余的，因为 scope 是可以推断的。然而，某些辅助技术可能无法正确推断，因此指定表头范围可能会改善用户体验。
当使用 colspan 和 rowspan 属性使表头单元格跨越多列和多行时，未定义这些属性（默认值为 1）的单元格将自动填充到表格结构中跨越 1x1 单元格的可用空白空间中，如下图所示

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

示例

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

基本的列标题和行标题

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

HTML

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

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

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

html

<table>
  <tr>
    <th scope="col">Symbol</th>
    <th scope="col">Code word</th>
    <th scope="col">Pronunciation</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>DELL tah</td>
  </tr>
</table>

CSS

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

css

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

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

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

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

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

结果

列和行跨越

此示例通过添加第二行以提供额外的列标题，扩展和增强了前一个示例中的基本表格。

HTML

一个额外的表格行（<tr> 元素）作为表格的第二行标题添加，其中包含两个额外的列标题（<th> 元素）。通过这种方式，“发音”列被分成两列，一列用于 IPA（国际音标）符号，一列用于重拼（原始发音列）。相应的数据单元格（<td> 元素）被添加到每个后续行。

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

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

html

<table>
  <tr>
    <th scope="col" rowspan="2">Symbol</th>
    <th scope="col" rowspan="2">Code word</th>
    <th scope="col" colspan="2">Pronunciation</th>
  </tr>
  <tr>
    <th scope="col">IPA</th>
    <th scope="col">Respelling</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>ˈælfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>ˈbraːˈvo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>ˈtʃɑːli</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>ˈdeltɑ</td>
    <td>DELL tah</td>
  </tr>
</table>

CSS

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

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

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

结果

将表头单元格与其他表头单元格关联

对于表头单元格之间更复杂的关系，仅使用带有 scope 属性的 th 元素可能不足以用于辅助技术，尤其是屏幕阅读器。

HTML

为了提高前一个示例的可访问性，并允许屏幕阅读器（例如）读出与每个表头单元格关联的标题，可以引入 headers 属性以及 id 属性。由于“发音”列在示例中被分成两列，引入了“两行”标题，辅助技术（例如屏幕阅读器）可能无法识别“发音”表头单元格与哪些额外的表头单元格（th 元素）相关，反之亦然。因此，在“发音”、“IPA”和“重拼”表头单元格上使用 headers 属性，根据添加的 id 属性的唯一标识符值（以空格分隔的列表形式）关联相关的表头单元格。

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

html

<table>
  <tr>
    <th scope="col" rowspan="2">Symbol</th>
    <th scope="col" rowspan="2">Code word</th>
    <th scope="col" colspan="2" id="p" headers="i r">Pronunciation</th>
  </tr>
  <tr>
    <th scope="col" id="i" headers="p">IPA</th>
    <th scope="col" id="r" headers="p">Respelling</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>ˈælfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>ˈbraːˈvo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>ˈtʃɑːli</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>ˈdeltɑ</td>
    <td>DELL tah</td>
  </tr>
</table>

结果

视觉结果与前一个示例表格相比没有变化。

技术摘要

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

规范

规范
HTML # the-th-element

浏览器兼容性

另见

学习：HTML 表格基础
<caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <thead>, <tr>: 其他与表格相关的元素
background-color: 设置每个表头单元格背景色的 CSS 属性
border: 控制表头单元格边框的 CSS 属性
height: 控制建议的表头单元格高度的 CSS 属性
text-align: 水平对齐每个表头单元格内容的 CSS 属性
vertical-align: 垂直对齐每个表头单元格内容的 CSS 属性
width: 控制建议的表头单元格宽度的 CSS 属性
:nth-of-type, :first-of-type, :last-of-type: 选择所需表头单元格的 CSS 伪类

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 2025 年 8 月 13 日修改。

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