HTMLTableCellElement: abbr property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

The abbr property of the HTMLTableCellElement interface indicates an abbreviation associated with the cell. If the cell does not represent a header cell <th>, it is ignored.

It reflects the abbr attribute of the <th> element.

Note: This property doesn't have a visual effect in browsers. It adds information to help assistive technology like screen readers that can use this abbreviation

Value

A string.

Examples

This example adds prefixes with the abbreviation associated with the row header of each first cell.

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})`;
}

Results

Specifications

Specification
HTML # dom-th-abbr

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on ⁨Oct 16, 2024⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content