HTMLTableElement.align — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableElement.align

Beschreibung

Die Eigenschaft align von HTMLTableElement spiegelt das gleichnamige HTML-Attribut eines <table>-Elements wider. Sie bestimmt, wie die Tabelle als Ganzes horizontal im umgebenden Inhalt angeordnet wird – nicht die Ausrichtung des Textes in den Zellen.

Übliche Werte sind:

"left" – Tabelle wird links angeordnet, nachfolgender Inhalt kann rechts daneben fließen (ähnlich float: left).
"center" – Tabelle wird zentriert (entspricht margin-inline: auto).
"right" – Tabelle wird rechts angeordnet, Inhalt fließt links daneben (ähnlich float: right).

Die Eigenschaft ist ein einfacher String-Reflektor: Beim Lesen erhält man den aktuellen Attributwert (oder einen leeren String, falls das Attribut fehlt), beim Schreiben wird das Attribut align gesetzt. Der Browser prüft den Wert nicht auf Gültigkeit – ungültige Werte werden gespeichert, aber bei der Darstellung ignoriert.

Seit HTML5 gilt das Attribut als veraltet. Es existiert nur noch aus Kompatibilitätsgründen, etwa beim Pflegen alter Seiten oder beim Auslesen von Legacy-Markup. Für neue Projekte sollte die Ausrichtung ausschließlich per CSS erfolgen.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des align-Attributs, z. B. "left", "center" oder "right". Fehlt das Attribut, wird ein leerer String "" zurückgegeben.

Beispiele

Ausrichtung einer Tabelle auslesen

// HTML: <table id="preise" align="center">...</table>
const table = document.querySelector('#preise');
console.log(table.align);

// Tabelle ohne align-Attribut
const neu = document.createElement('table');
console.log(JSON.stringify(neu.align));

center ""

Ausrichtung setzen und Attribut prüfen

const table = document.createElement('table');
table.align = 'right';

console.log(table.getAttribute('align'));
console.log(table.outerHTML);

right <table align="right"></table>

Legacy-Markup auf modernes CSS migrieren

// Ersetzt veraltete align-Attribute durch gleichwertiges CSS
const migrateTableAlign = (root = document) => {
  root.querySelectorAll('table[align]').forEach((table) => {
    switch (table.align.toLowerCase()) {
      case 'center':
        table.style.marginInline = 'auto';
        break;
      case 'left':
        table.style.float = 'left';
        break;
      case 'right':
        table.style.float = 'right';
        break;
    }
    table.removeAttribute('align');
  });
};

migrateTableAlign();
console.log(document.querySelectorAll('table[align]').length);

// Wichtig · Fallstricke

Veraltet: Das Attribut align ist in HTML5 nicht mehr konform. Browser unterstützen es weiterhin (Chrome, Firefox, Safari, Edge), Validatoren melden es jedoch als Fehler. Verwende stattdessen CSS, z. B. margin-inline: auto zum Zentrieren oder float für links/rechts.

Keine Wertprüfung: table.align = 'mitte' wird ohne Fehler gespeichert, hat aber keinen sichtbaren Effekt.
Groß-/Kleinschreibung: Der Wert wird unverändert zurückgegeben ("CENTER" bleibt "CENTER"). Beim Vergleich daher toLowerCase() nutzen.
Nicht mit Zellausrichtung verwechseln: align an der Tabelle richtet nicht den Text in den Zellen aus. Dafür dient CSS text-align an td/th.
CSS hat Vorrang: Das Attribut wirkt nur als Präsentationshinweis mit geringer Spezifität. Jede Autoren-CSS-Regel (z. B. margin oder float) überschreibt es.

Siehe auch

HTMLOptionElement.value HTMLTableElement.caption HTMLTableElement.frame HTMLTableElement.rows HTMLTableElement.rules