Signatur
Beschreibung
Die Eigenschaft abbr des Interfaces HTMLTableCellElement spiegelt das HTML-Attribut abbr einer Tabellenzelle wider. Sie enthält eine kurze Alternativbezeichnung für den Zellinhalt. Das ist vor allem bei Kopfzellen (<th>) mit langem Text nützlich.
Hauptsächlich nutzen assistive Technologien wie Screenreader diesen Wert. Liest ein Screenreader eine Datenzelle vor, kündigt er meist die zugehörige Kopfzelle mit an. Mit abbr kann er statt „Durchschnittliche monatliche Ausgaben in Euro“ einfach „Ausgaben“ sagen. Das macht große Tabellen deutlich angenehmer zu bedienen.
Laut aktueller HTML-Spezifikation ist das Attribut abbr nur bei <th> gültig. Bei <td> gilt es als veraltet. Die DOM-Eigenschaft gibt es aber auf allen HTMLTableCellElement-Instanzen. Sie ist ein String: Wenn das Attribut fehlt, liefert sie "". Wenn du einen Wert zuweist, wird das Attribut im Markup gesetzt.
Rückgabewert
abbr oder ein leerer String "", wenn das Attribut nicht gesetzt ist. Die Eigenschaft ist les- und schreibbar.Beispiele
Kurzbezeichnung einer Kopfzelle auslesen
// HTML: <th id="kopf" abbr="Ausgaben">Durchschnittliche monatliche Ausgaben in Euro</th>
const th = document.getElementById('kopf');
console.log(th.abbr);
console.log(th.textContent);Abkürzungen für alle langen Kopfzellen automatisch setzen
const kuerzel = {
'Umsatz im ersten Quartal': 'Q1',
'Umsatz im zweiten Quartal': 'Q2',
'Umsatz im dritten Quartal': 'Q3'
};
document.querySelectorAll('table.bericht th').forEach((th) => {
const text = th.textContent.trim();
if (!th.abbr && kuerzel[text]) {
th.abbr = kuerzel[text]; // setzt das HTML-Attribut abbr
}
});
console.log(document.querySelector('table.bericht th').outerHTML);Tabelle dynamisch erzeugen und fehlendes Attribut prüfen
const table = document.createElement('table');
const row = table.createTHead().insertRow();
const th = document.createElement('th');
th.textContent = 'Anzahl der registrierten Nutzerinnen und Nutzer';
console.log(JSON.stringify(th.abbr)); // Attribut fehlt noch
th.abbr = 'Nutzer';
row.append(th);
console.log(th.getAttribute('abbr'));
document.body.append(table);// Wichtig · Fallstricke
- Nur bei
<th>sinnvoll: Nach HTML Living Standard istabbrbei<td>veraltet. Die DOM-Eigenschaft funktioniert dort zwar, Validatoren melden das Attribut aber als Fehler. - Keine sichtbare Wirkung: Browser zeigen den Wert nicht an. Er ist also kein Ersatz für einen Tooltip (
title) oder das Element<abbr>. Ob und wie Screenreader den Wert nutzen, ist unterschiedlich. Teste das deshalb mit echten Hilfstechnologien. - Kein
null: Fehlt das Attribut, liefert die Eigenschaft"". Weist dunullzu, wird daraus der String"null". Zum Entfernen nutzeremoveAttribute('abbr'). - Kompatibilität: Die Eigenschaft wird in allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge) und war schon im alten Internet Explorer vorhanden.