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 以指定每个行标题所关联的单元格，在下面的示例中，这些单元格是每行中的所有数据单元格（<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: #fff;
}

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

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

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> 元素）被添加到每个后续行中。

如用法说明中所示，<th> 元素可以使用 colspan 和 rowspan 属性分配到正确的列和行。为了在表格结构中实现“两行”标题，第一个 <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 与上一个示例中的 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;
}

结果

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

对于表头单元格之间更复杂的关系，仅使用带 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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

学习：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 伪类，用于选择所需的表头单元格