Signatur
Beschreibung
Die Eigenschaft align der Schnittstelle HTMLTableCaptionElement spiegelt das gleichnamige Inhaltsattribut des <caption>-Elements wider. Beim Lesen erhältst du den Attributwert als String, beim Schreiben wird das Attribut align im DOM gesetzt oder überschrieben.
Übliche Werte sind "left", "center" und "right" für die horizontale Ausrichtung sowie "top" und "bottom" für die Position der Beschriftung über oder unter der Tabelle. Der Browser prüft den Wert beim Setzen nicht: Jeder beliebige String wird ohne Fehlermeldung übernommen. Ist das Attribut nicht vorhanden, liefert die Eigenschaft einen leeren String "".
Das Attribut gehört zum veralteten Präsentations-Markup aus HTML 4. Nutze die Eigenschaft deshalb vor allem, um bestehendes Alt-Markup auszulesen oder zu migrieren. In neuem Code legst du Darstellung und Position mit CSS fest, nämlich mit text-align für die horizontale Ausrichtung und caption-side für die Position.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Nur beim Setzen: der neue Wert des Attributs align, z. B. "left", "center", "right", "top" oder "bottom". Der Browser prüft den Wert nicht. |
Rückgabewert
align, genau so, wie er im Markup steht (ohne Normalisierung). Fehlt das Attribut, ist das Ergebnis ein leerer String "".Beispiele
Ausrichtung aus bestehendem Markup auslesen
// HTML: <table id="umsatz"><caption align="bottom">Umsatz 2024</caption>...</table>
const caption = document.querySelector('#umsatz caption');
console.log(caption.align);
console.log(caption.getAttribute('align'));Fehlendes Attribut und Setzen ohne Prüfung
const table = document.createElement('table');
const caption = table.createCaption();
caption.textContent = 'Mitgliederliste';
console.log(JSON.stringify(caption.align)); // Attribut fehlt
caption.align = 'center';
console.log(caption.outerHTML);
caption.align = 'quer'; // ungültig, wird trotzdem übernommen
console.log(caption.align);Alt-Markup nach CSS migrieren
// Ersetzt veraltete align-Attribute durch moderne CSS-Eigenschaften
const migrateCaptions = (root = document) => {
for (const caption of root.querySelectorAll('caption[align]')) {
const value = caption.align.toLowerCase();
if (value === 'top' || value === 'bottom') {
caption.style.captionSide = value;
} else if (['left', 'center', 'right'].includes(value)) {
caption.style.textAlign = value;
}
caption.removeAttribute('align');
}
};
migrateCaptions();
console.log(document.querySelectorAll('caption[align]').length);// Wichtig · Fallstricke
- Veraltet: Das Attribut
alignan<caption>ist in HTML5 nicht mehr konform. Verwende stattdessen CSS:text-alignfür die horizontale Ausrichtung undcaption-side: top | bottomfür die Position. - Keine Prüfung: Die Eigenschaft ist ein einfach gespiegeltes String-Attribut. Ungültige Werte lösen keinen Fehler aus, sie wirken nur nicht. Groß- und Kleinschreibung bleibt erhalten, deshalb solltest du vor Vergleichen z. B.
toLowerCase()aufrufen. - Darstellung: Die Browser werten
topundbottomeinheitlich übercaption-sideaus. Werte wieleftundrightwerden historisch unterschiedlich dargestellt. Verlass dich daher nicht auf ein einheitliches Aussehen. - Vorrang von CSS: Gesetzte CSS-Regeln haben Vorrang vor dem Präsentationsattribut. Das Setzen von
alignkann deshalb scheinbar wirkungslos bleiben. - Kompatibilität: Die Eigenschaft wird in allen gängigen Browsern weiter unterstützt, damit bestehende Seiten funktionieren.