1. Web
  2. HTML
  3. 参考
  4. 元素
  5. <td>

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

Baseline 广泛可用 *

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

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

<td> HTML 元素定义了表格中包含数据的单元格，可用作 <tr> 元素的子元素。

试一试

<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，则它会延伸到单元格所属的表格分组部分（<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 单元格的可用空闲空间，如下图所示

    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

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

示例

请参阅 <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: #eeeeee;
}

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

结果

列和行跨越

此示例通过添加一个额外的“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

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

css
tr:first-of-type td:last-of-type {
  width: 60px;
  background-color: #505050;
  color: white;
  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: #eeeeee;
}

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

结果

将数据单元格与标题单元格关联

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

HTML

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

注意：建议为 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 角色 如果是一个 <table> 元素的后代，则为 cell；如果是一个具有 grid 角色的元素的后代，则为 gridcell
允许的 ARIA 角色 任意
DOM 接口 HTMLTableCellElement

规范

规范
HTML
# the-td-element

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面由 MDN 贡献者 于 上次修改。

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