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⁩.

Theabbr property of theHTMLTableCellElement interfaceindicates an abbreviation associated with the cell. If the cell does not represent a header cell<th>, it is ignored.

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