此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
<td>：表格数据单元格元素
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
尝试一下
<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: #fff;}th[scope="row"] { background-color: #d6ecd4;}td { text-align: center;}tr:nth-of-type(even) { 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;}caption { caption-side: bottom; padding: 10px;}属性
这个元素包含全局属性。
已弃用属性
以下属性已被弃用，不应再使用。下文记录了这些属性，供更新现有代码时参考，也仅供参考。
abbr已弃用包含对数据单元格内容的简短描述。某些用户代理（如语音阅读器）可能会在内容本身之前显示该描述。将简短内容放在单元格内，并将较长的描述放在
title属性中，因为该属性已被弃用。或者，最好将内容包含在数据单元格中，并使用 CSS 来可视化地截断溢出的文本。align已弃用指定数据单元格的水平对齐方式。可能的枚举值包括
left、center、right、justify和 "char"。如果支持，char值将根据char属性中定义的字符和charoff属性定义的偏移量对文本内容进行对齐。请使用text-alignCSS 属性代替，因为该属性已被弃用。axis已弃用包含以空格分隔的字符串列表，每个字符串与数据单元格适用的单元格组的
id属性相对应。bgcolor已弃用定义数据单元格的背景颜色。该值是 HTML 颜色；可以是以
#为前缀的6 位十六进制 RGB 代码，也可以是颜色关键字。不支持其他 CSS<color>值。由于该属性已被弃用，请使用background-colorCSS 属性代替。char已弃用没有任何作用。其最初目的是指定内容与数据单元格中的某个字符对齐。当尝试对齐数字或货币值时，其典型值包括句号（
.）。如果align未设置为char，该属性将被忽略。charoff已弃用没有任何作用。它最初用于指定数据单元格内容与
char属性指定的对齐字符之间的偏移字符数。height已弃用定义推荐的数据单元格高度。请使用
heightCSS 属性代替，因为该属性已被弃用。scope已弃用定义标题（在
<th>中定义）元素相关的单元格。可能的枚举值包括row、col、rowgroup和colgroup。该属性只能与<th>元素一起使用，以定义作为页眉的行或列，因为<td>元素已弃用该属性。valign已弃用指定数据单元格的垂直对齐方式。可能的枚举值包括
baseline、bottom、middle和top。由于该属性已被弃用，请使用vertical-alignCSS 属性代替。width已弃用定义推荐的数据单元格宽度。由于该属性已被弃用，请使用
widthCSS 属性代替。
使用说明
示例
请参阅<table> 获取介绍通用标准和最佳实践的完整表格示例。
基本数据单元格
本例使用<td> 元素和其他与表格相关的元素来介绍一个包含音标字母数据的基本表格。
HTML
某些表格行（<tr> 元素）同时包含标题单元格（<th> 元素）和数据单元格<td> 元素。作为每行第一个子元素的<th> 元素构成表格的第一列，每个<th> 为该行中的数据单元格提供行标题。每个相应的<td> 元素包含与各自列标题和行标题单元格对齐的数据。
备注：通常情况下，为便于理解列中的信息，会使用带有列标题的表头组。<thead> 和<tbody> 元素可用于将这些列标题和数据分组到相应的表头和表体部分。在本示例中，为了将注意力集中在数据单元格上并降低本示例的复杂性，我们并没有这样做。
<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 伪类用于替换单元格的外观，使表格中的信息更易于理解和识别。
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> 元素）。
<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”数据单元格。
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”数据单元格（即字母“A”、“B”和“C”）相关的每个行标题单元格（<th> 元素）都有一个唯一的标识符，即id 属性。然后，“ABC”数据单元格（<td> 元素）在headers 属性的空格分隔列表中使用这些id 值。
<table> <tr> <th scope="row">A</th> <td>Alfa</td> <td>AL fah</td> <td headers="a b c" 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>结果
技术概要
规范
| Specification |
|---|
| HTML # the-td-element |
浏览器兼容性
参见
- 学习：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 伪类