HTMLTableCellElement: abbr 属性

Baseline 已广泛支持

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

HTMLTableCellElement 接口的 abbr 属性表示单元格的缩写。如果该单元格不代表标题单元格 <th>，则该属性将被忽略。

它反映了 <th> 元素的 abbr 属性。

注意：此属性在浏览器中没有视觉效果。它会添加信息以帮助辅助技术（如屏幕阅读器）使用此缩写。

值

字符串。

示例

此示例使用与每行第一个单元格的行标题关联的缩写来添加前缀。

HTML

html

<table>
  <thead>
    <tr>
      <th abbr="Maker">Manufacturer</th>
      <th abbr="Model">Car model</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tesla</td>
      <td>3</td>
    </tr>
    <tr>
      <td>BYD</td>
      <td>Dolphin</td>
    </tr>
    <tr>
      <td>VW</td>
      <td>ID.3</td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: collapse;
}

th,
td,
table {
  border: 1px solid black;
}

button {
  margin: 1em 1em 1em 0;
}

JavaScript

const rows = document.querySelectorAll("thead tr");
const cells = rows[0].cells;

for (const cell of cells) {
  cell.textContent = `${cell.textContent} (${cell.abbr})`;
}

结果

规范

规范
HTML # dom-th-abbr

浏览器兼容性

帮助改进 MDN

了解如何贡献

此页面的最后修改时间是 ⁨2024年10月16日⁩，由 MDN 贡献者修改。

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