HTMLTableColElement.vAlign — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableColElement.vAlign

Beschreibung

Die Eigenschaft vAlign der Schnittstelle HTMLTableColElement spiegelt das HTML-Attribut valign eines <col>- oder <colgroup>-Elements wider. Früher legte sie fest, wie der Inhalt der Zellen einer Spalte vertikal ausgerichtet wird. Mögliche Werte sind "top", "middle", "bottom" und "baseline".

Die Eigenschaft ist veraltet. Moderne Browser lesen und schreiben das Attribut zwar noch, wenden es aber nicht auf die Zellen der Spalte an. Der Grund: Zellen erben in CSS keine Eigenschaften vom <col>-Element, weil sie im DOM nicht dessen Kindelemente sind. Nur wenige Eigenschaften wie background, border, width und visibility wirken überhaupt auf Spaltenelemente.

Du findest die Eigenschaft deshalb hauptsächlich in altem Code oder beim Auswerten von altem HTML-Markup. Für neue Projekte setzt du die vertikale Ausrichtung mit der CSS-Eigenschaft vertical-align direkt auf die <td>- bzw. <th>-Zellen. Mit Selektoren wie td:nth-child(n) kannst du dabei gezielt einzelne Spalten ansprechen.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs valign, z. B. "top", "middle", "bottom" oder "baseline". Fehlt das Attribut, ist das Ergebnis ein leerer String "". Beim Schreiben wird der zugewiesene String unverändert als Attribut gesetzt.

Beispiele

valign aus altem Markup auslesen

// HTML: <table><colgroup><col valign="top"><col></colgroup>...</table>
const cols = document.querySelectorAll('col');

cols.forEach((col, i) => {
  console.log(`Spalte ${i + 1}:`, col.vAlign || '(nicht gesetzt)');
});

Spalte 1: top Spalte 2: (nicht gesetzt)

Wert setzen – spiegelt sich im Attribut wider

const col = document.createElement('col');
col.vAlign = 'bottom';

console.log(col.getAttribute('valign'));
console.log(col.outerHTML);

bottom <col valign="bottom">

Migration: veraltetes valign in CSS umwandeln

// Überträgt valign von <col> auf die passenden Zellen per CSS
const migrateVAlign = (table) => {
  const cols = [...table.querySelectorAll('col')];
  cols.forEach((col, index) => {
    const align = col.vAlign.toLowerCase();
    if (!align) return;
    for (const row of table.rows) {
      const cell = row.cells[index];
      if (cell) cell.style.verticalAlign = align;
    }
    col.removeAttribute('valign');
  });
};

migrateVAlign(document.querySelector('table'));

// Wichtig · Fallstricke

Keine sichtbare Wirkung: Aktuelle Browser (Chrome, Firefox, Safari, Edge) stellen die Eigenschaft zwar noch bereit, richten die Zellen aber nicht danach aus. Verwende stattdessen vertical-align in CSS auf td/th.
Keine Prüfung der Werte: Jeder beliebige String wird unverändert übernommen, auch ungültige Werte wie "center". Die Groß- und Kleinschreibung bleibt dabei erhalten. Wenn du Werte vergleichst, normalisiere sie vorher mit toLowerCase().
Bei der Zuordnung von Spalten zu Zellen, wie im Migrationsbeispiel, musst du colspan und das Attribut span von <col> berücksichtigen. Sonst werden die Indizes falsch zugeordnet.
Andere Tabellenelemente haben die gleiche veraltete Eigenschaft, z. B. HTMLTableCellElement.vAlign, HTMLTableRowElement.vAlign und HTMLTableSectionElement.vAlign.

Siehe auch

HTMLFieldSetElement.validity HTMLOptionElement.value HTMLTableColElement.align HTMLTableColElement.span HTMLTableColElement.ch