HTMLTableCellElement: abbr 属性

基线广泛可用

此功能已建立良好，并在许多设备和浏览器版本中均可使用。它在所有浏览器中可用，自 2015 年 7 月.

abbr 属性 HTMLTableCellElement 接口指示与单元格关联的缩写。如果单元格不代表标题单元格 <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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。