HTMLTableRowElement.align — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableRowElement.align

Beschreibung

Die Eigenschaft align des Interfaces HTMLTableRowElement spiegelt das HTML-Attribut align eines <tr>-Elements wider. Sie legt fest, wie der Inhalt aller Zellen (<td> und <th>) dieser Zeile horizontal ausgerichtet wird. Zellen können das mit einem eigenen align-Attribut überschreiben.

Übliche Werte sind "left", "center", "right", "justify" und "char". Beim Lesen bekommst du den Attributwert genau so, wie er im Markup steht. Die Werte werden also nicht normalisiert oder geprüft. Fehlt das Attribut, ist der Wert ein leerer String "". Wenn du der Eigenschaft einen Wert zuweist, wird das Attribut direkt im DOM gesetzt.

Die Eigenschaft ist veraltet, denn das Attribut align gilt in HTML5 als obsolet. Du brauchst sie eigentlich nur, wenn du alte Dokumente auswertest oder umbaust. In neuem Code setzt du die Ausrichtung per CSS mit text-align, zum Beispiel über element.style.textAlign oder eine CSS-Klasse.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs align, z. B. "left", "center", "right", "justify" oder "char". Fehlt das Attribut, ist er ein leerer String "". Du kannst ihn lesen und schreiben.

Beispiele

Ausrichtung einer Zeile auslesen

// HTML: <table><tr id="kopf" align="center"><th>Name</th><th>Preis</th></tr></table>
const zeile = document.getElementById('kopf');
console.log(zeile.align);
console.log(zeile.getAttribute('align'));

center center

Ausrichtung setzen (Legacy-Weg)

const tabelle = document.querySelector('table');
const zeile = tabelle.insertRow();
zeile.insertCell().textContent = 'Summe';
zeile.insertCell().textContent = '42,00 €';

// Setzt das Attribut align="right" auf dem <tr>
zeile.align = 'right';
console.log(zeile.outerHTML);

<tr align="right"><td>Summe</td><td>42,00 €</td></tr>

Altes Markup auf CSS umstellen

// Alle veralteten align-Attribute von Zeilen in CSS text-align umwandeln
const migriereZeilen = (root = document) => {
  for (const tr of root.querySelectorAll('tr[align]')) {
    const wert = tr.align.toLowerCase();
    if (['left', 'center', 'right', 'justify'].includes(wert)) {
      tr.style.textAlign = wert;
    }
    tr.removeAttribute('align');
  }
};

migriereZeilen();
console.log(document.querySelectorAll('tr[align]').length);

// Wichtig · Fallstricke

Veraltet: Das Attribut align ist in HTML5 obsolet. Nutze stattdessen die CSS-Eigenschaft text-align. Die Browser unterstützen die DOM-Eigenschaft nur noch, damit alte Seiten weiter funktionieren.
Keine Prüfung der Werte: Auch ungültige Werte wie "mitte" werden ohne Fehler übernommen und bewirken einfach nichts. Beim Lesen kommt der Wert unverändert zurück, also auch mit Großbuchstaben (z. B. "CENTER").
"char" ohne Wirkung: Der Wert "char" ist zusammen mit ch und chOff für die Ausrichtung an einem bestimmten Zeichen gedacht. Das haben die gängigen Browser nie umgesetzt.
Welche Angabe gewinnt: CSS-Regeln mit text-align sowie ein align direkt an den Zellen haben Vorrang vor dem align der Zeile.
Vertikale Ausrichtung: Dafür gibt es die ebenfalls veraltete Eigenschaft vAlign. Heute nimmst du dafür vertical-align in CSS.

Siehe auch

HTMLTableCellElement.headers HTMLTableRowElement.vAlign HTMLTableRowElement.cells HTMLTableRowElement.ch HTMLTableRowElement.chOff