<td>: 表格数据单元格元素

基线广泛可用

此功能已久经考验，并在许多设备和浏览器版本上正常工作。它自 2015 年 7 月.

The <td> HTML 元素定义表格中的一个单元格，它包含数据，可以作为 <tr> 元素的子元素使用。

试一试

属性

此元素包括全局属性.

colspan: 包含一个非负整数，指示数据单元格所跨越或扩展的列数。默认值为 1。用户代理会将超过 1000 的值视为不正确，并设置为默认值 (1)。
表头: 包含一个空格分隔的字符串列表，每个字符串对应于为该表格单元格提供表头的 <th> 元素的 id 属性。
行跨度: 包含一个非负整数，指示数据单元格所跨越或扩展的行数。默认值为 1；如果其值为 0，则扩展到单元格所属的表格分组部分（<thead>、<tbody>、<tfoot>，即使是隐式定义的）的末尾。大于 65534 的值将被截取为 65534。

已弃用的属性

以下属性已弃用，不应再使用。它们在下面列出是为了参考更新现有代码和了解历史信息。

abbr 已弃用: 包含数据单元格内容的简短缩写描述。一些用户代理（如语音阅读器）可能会在内容本身之前呈现此描述。将缩写的内容放在单元格内，并将（更长的）描述放在 title 属性中，因为此属性已弃用。或者，最好将内容包含在数据单元格中，并使用 CSS 来视觉上剪裁溢出文本。
align 已弃用: 指定数据单元格的水平对齐方式。可能的枚举值为 left、center、right、justify 和 char。如果支持，char 值将文本内容对齐到在 char 属性中定义的字符，以及在 charoff 属性中定义的偏移量。使用 text-align CSS 属性代替，因为此属性已弃用。
axis 已弃用: 包含一个空格分隔的字符串列表，每个字符串对应于数据单元格所应用的一组单元格的 id 属性。
bgcolor 已弃用: 定义数据单元格的背景颜色。该值是一个 HTML 颜色；可以是 6 位十六进制 RGB 代码（以 '#' 为前缀），或颜色关键字。其他 CSS <color> 值不受支持。使用 background-color CSS 属性代替，因为此属性已弃用。
char 已弃用: 不执行任何操作。它最初的目的是指定内容对齐到数据单元格的一个字符。这方面的一些典型值包括句点 (.)，当尝试对齐数字或货币值时。如果 align 未设置为 char，则会忽略此属性。
charoff 已弃用: 不执行任何操作。它最初的目的是指定将数据单元格内容从由 char 属性指定的对齐字符偏移多少个字符。
height 已弃用: 定义推荐的数据单元格高度。使用 height CSS 属性代替，因为此属性已弃用。
scope 已弃用: 定义标题（在 <th> 中定义）元素所关联的单元格。可能的枚举值为 row、col、rowgroup 和 colgroup。仅将此属性与 <th> 元素一起使用来定义它是哪个行的标题，因为此属性已在 <td> 元素中弃用。
valign 已弃用: 指定数据单元格的垂直对齐方式。可能的枚举值为 baseline、bottom、middle 和 top。使用 vertical-align CSS 属性代替，因为此属性已弃用。
width 已弃用: 定义推荐的数据单元格宽度。使用 width CSS 属性代替，因为此属性已弃用。

使用注意事项

<td> 只能在 <tr> 元素内使用。
当使用 colspan 和 rowspan 属性将数据单元格跨越多列和多行时，未定义这些属性的单元格（默认值为 1）会自动填充到表格结构中跨越 1x1 单元格的可用空间，如下图所示：

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

示例

有关完整表格示例，请参阅 <table>，其中介绍了常见标准和最佳实践。

基本数据单元格

此示例使用 <td> 元素以及其他与表格相关的元素来介绍一个包含语音字母数据的基本表格。

HTML

一些表格行（<tr> 元素）包含表头单元格（<th> 元素）和数据单元格 <td> 元素。作为每行的第一个子元素的 <th> 元素构成表格的第一列，每个 <th> 为该行内的数据单元格提供行表头。每个相应的 <td> 元素包含与其各自的列表头和行表头单元格对齐的数据。

注意：通常，会实现包含列表头的表格头组，以便更容易理解列中的信息。 <thead> 和 <tbody> 元素将用于将此类表头行和数据行分组到各自的表格头部分和主体部分。为了集中讨论数据单元格并降低此示例的复杂性，此示例中未实现这一点。

html

<table>
  <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 属性选择器和 :nth-of-type 伪类用于交替更改单元格的外观，以便更容易理解和识别表格中的信息。

css

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

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

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

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

结果

列跨度和行跨度

此示例通过添加一个额外的“ABC”单元格来扩展和增强上一个示例中的基本表格。

HTML

在第一行（<tr> 元素）中引入了一个额外的表格数据单元格 (<td> 元素)。这会在表格中创建第四列。

使用 rowspan 属性，“ABC”单元格跨越了表格的前三行。后续行的最后一个数据单元格都跨越了两列。这通过使用 colspan 属性完成，将它们正确地对齐到表格结构中。请注意，添加了一行（<tr> 元素）到表格中以说明这一点。

html

<table>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
    <td rowspan="3">ABC</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 colspan="2">DELL tah</td>
  </tr>
  <tr>
    <th scope="row">E</th>
    <td>Echo</td>
    <td colspan="2">ECK oh</td>
  </tr>
</table>

CSS

:first-of-type 和 :last-of-type 伪类在 CSS 中使用，以选择和设置添加的“ABC”数据单元格的样式。

css

tr:first-of-type td:last-of-type {
  width: 60px;
  background-color: #505050;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

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

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

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

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

结果

将数据单元格与表头单元格关联

对于数据单元格 (<td> 元素) 和表头单元格（<th> 元素）之间更复杂的关系，仅使用具有 scope 属性的 <th> 元素可能不足以满足辅助技术（特别是屏幕阅读器）的需求。

HTML

为了提高上一个示例的可访问性，并使屏幕阅读器能够说出与每个数据单元格关联的表头，可以引入 headers 属性和 id 属性。与“ABC”数据单元格关联的每个行表头单元格（<th> 元素），即字母“A”、“B”和“C”，都使用 id 属性获得唯一的标识符。“ABC”数据单元格 (<td> 元素) 然后在 headers 属性的空格分隔列表中使用这些 id 值。

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

html

<table>
  <tr>
    <th id="a" scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
    <td headers="a b c" rowspan="3">ABC</td>
  </tr>
  <tr>
    <th id="b" scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th id="c" scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td colspan="2">DELL tah</td>
  </tr>
  <tr>
    <th scope="row">E</th>
    <td>Echo</td>
    <td colspan="2">ECK oh</td>
  </tr>
</table>

结果

虽然视觉结果与上一个示例表格相同，但现在每个数据单元格 (<td>) 都明确地与其行表头单元格 (<th>) 关联。

技术摘要

内容类别	分区根。
允许的内容	流内容.
标签省略	开始标签是必需的。如果结束标签紧随其后的是一个 `<th>` 或 `<td>` 元素，或者父元素中没有更多数据，则可以省略结束标签。
允许的父元素	一个 `<tr>` 元素。
隐式 ARIA 角色	`cell`（如果它是 `<table>` 元素的后代）
允许的 ARIA 角色	任何
DOM 接口	`HTMLTableCellElement`

规范

规范
HTML 标准 # the-td-element

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

了解：HTML 表格
<caption>、<col>、<colgroup>、<table>、<tbody>、<tfoot>、<th>、<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 伪类