</> programmierung.net
Start · Sprachen · JavaScript · Referenz · HTMLTableColElement.align

HTMLTableColElement.align

Eigenschaft

Liest oder setzt als String das veraltete HTML-Attribut <code>align</code> eines <code>&lt;col&gt;</code>- oder <code>&lt;colgroup&gt;</code>-Elements, das die horizontale Textausrichtung der Spalte angibt.

seit JavaScript Veraltet (deprecated), in allen Browsern als Eigen deprecated seit ja Kategorie: webapi

Signatur

HTMLTableColElement.align

Beschreibung

Die Eigenschaft align des Interfaces HTMLTableColElement spiegelt das HTML-Attribut align eines <col>- oder <colgroup>-Elements wider. Sie ist ein String und sollte ursprünglich festlegen, wie der Inhalt aller Zellen einer Spalte horizontal ausgerichtet wird. Mögliche Werte waren "left", "center", "right", "justify" und "char".

Die Eigenschaft liest und schreibt nur den Attributwert. Der Browser prüft ihn nicht: Fehlt das Attribut, kommt ein leerer String "" zurück. Ungültige Werte werden ohne Fehlermeldung übernommen. Beim Setzen landet der Wert unverändert im Attribut align im DOM.

Das Attribut ist veraltet. Moderne Browser übertragen es in der Regel nicht auf die Zellen der Spalte. Die Eigenschaft ist daher vor allem nützlich, um bestehendes (Legacy-)Markup auszulesen oder in modernes CSS umzuwandeln. Für neue Projekte nutzt du CSS mit text-align auf den Zellen, etwa über td:nth-child(n).

Parameter

Name Typ Default Beschreibung
$value string "" Nur beim Setzen: neuer Wert des Attributs, z. B. "left", "center", "right", "justify" oder "char". Der Wert wird nicht geprüft.

Rückgabewert

Typ
string
Beschreibung
Der aktuelle Wert des Attributs align. Ist das Attribut nicht gesetzt, ist es ein leerer String.

Beispiele

Ausrichtung einer Spalte auslesen

// HTML: <table id="preise"><colgroup><col><col align="right"></colgroup>...</table>
const cols = document.querySelectorAll('#preise col');
cols.forEach((col, i) => {
  console.log(`Spalte ${i + 1}:`, col.align || '(nicht gesetzt)');
});
Spalte 1: (nicht gesetzt) Spalte 2: right

Wert setzen – wirkt nur auf das Attribut

const col = document.createElement('col');
col.align = 'center';
console.log(col.getAttribute('align'));
console.log(col.outerHTML);
center <col align="center">

Legacy-Markup in CSS text-align umwandeln

// Überträgt veraltete col-align-Werte als CSS auf die Zellen
const migrateColAlign = (table) => {
  const cols = [...table.querySelectorAll('col')];
  cols.forEach((col, index) => {
    const align = col.align.toLowerCase();
    if (!['left', 'center', 'right', 'justify'].includes(align)) return;
    for (const row of table.rows) {
      const cell = row.cells[index];
      if (cell) cell.style.textAlign = align;
    }
    col.removeAttribute('align');
  });
};

migrateColAlign(document.querySelector('#preise'));

// Wichtig · Fallstricke

  • Veraltet: Das Attribut align an <col>/<colgroup> ist in HTML5 obsolet. Die Eigenschaft gibt es aus Kompatibilitätsgründen zwar in allen Browsern, die Darstellung beeinflusst sie aber meist nicht mehr.
  • Keine Wirkung auf Zellen: Firefox, Chrome und Safari richten den Inhalt der Zellen nicht nach col.align aus. Auch CSS-text-align am <col> hat keine Wirkung: <col> unterstützt nur border, background, width und visibility. Setze text-align stattdessen direkt auf die Zellen, z. B. td:nth-child(2) { text-align: right; }.
  • Keine Prüfung: Ungültige Werte wie "mitte" werden kommentarlos übernommen. Vergleiche Werte am besten ohne Beachtung der Groß-/Kleinschreibung, z. B. mit toLowerCase().
  • Der Wert "char" gehört zu den ebenfalls veralteten Eigenschaften ch und chOff. Er wurde nie zuverlässig unterstützt.

Siehe auch

HTMLObjectElement.height HTMLSelectElement.labels HTMLTableColElement.vAlign HTMLTableColElement.span HTMLTableColElement.ch
← Vorheriger Eintrag HTMLTableColElement