HTMLTableSectionElement.vAlign — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableSectionElement.vAlign

Beschreibung

Die Eigenschaft vAlign spiegelt das veraltete HTML-Attribut valign eines Tabellenabschnitts (<thead>, <tbody>, <tfoot>) wider. Sie legt fest, wie der Inhalt der Zellen dieses Abschnitts vertikal ausgerichtet wird, sofern Zeilen oder Zellen keine eigene Angabe machen.

Gültige Werte sind "top", "middle", "bottom" und "baseline". Die Eigenschaft ist ein einfacher reflektierender String: Beim Lesen erhält man exakt den Attributwert (oder "", wenn das Attribut fehlt), beim Setzen wird das Attribut valign geschrieben. Eine Validierung findet nicht statt – ungültige Werte werden gespeichert, aber vom Browser beim Rendern ignoriert.

In neuem Code sollte man vAlign nicht mehr verwenden. Die vertikale Ausrichtung gehört ins CSS, typischerweise über vertical-align auf den Zellen (td, th). Die Eigenschaft ist vor allem beim Pflegen oder Migrieren von Alt-Markup nützlich, etwa um vorhandene valign-Attribute auszulesen und in CSS umzuwandeln.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des valign-Attributs, z. B. "top", "middle", "bottom" oder "baseline"; leerer String, wenn das Attribut nicht gesetzt ist.

Beispiele

Wert auslesen und setzen

const tbody = document.createElement('tbody');
console.log(JSON.stringify(tbody.vAlign)); // Attribut fehlt

tbody.vAlign = 'top';
console.log(tbody.vAlign);
console.log(tbody.getAttribute('valign'));

"" top top

Altes valign-Markup in CSS migrieren

// Alle Tabellenabschnitte mit valign finden und in CSS überführen
const sections = document.querySelectorAll('thead[valign], tbody[valign], tfoot[valign]');

sections.forEach((section) => {
  const align = section.vAlign.toLowerCase();
  if (['top', 'middle', 'bottom', 'baseline'].includes(align)) {
    for (const cell of section.querySelectorAll('td, th')) {
      cell.style.verticalAlign = align;
    }
  }
  section.removeAttribute('valign');
});

console.log(`${sections.length} Abschnitte migriert`);

z. B. "2 Abschnitte migriert"

Keine Validierung beim Setzen

const thead = document.createElement('thead');
thead.vAlign = 'center'; // ungültig, wird trotzdem gespeichert
console.log(thead.vAlign);
console.log(thead.outerHTML);

center <thead valign="center"></thead>

// Wichtig · Fallstricke

Veraltet: valign ist in HTML5 obsolet. Verwende stattdessen CSS vertical-align auf td/th-Elementen.
Keine Wertprüfung: Ungültige Werte wie "center" werden übernommen, haben aber keine Wirkung. Der Rückgabewert wird auch nicht normalisiert – Groß-/Kleinschreibung bleibt wie im Markup.
Vorrang: Angaben auf <tr>, <td> oder per CSS überschreiben die Abschnitts-Einstellung. CSS hat grundsätzlich Vorrang vor dem Präsentationsattribut.
Kompatibilität: Wird von allen gängigen Browsern weiterhin unterstützt, da die Eigenschaft aus Gründen der Abwärtskompatibilität in der HTML-Spezifikation erhalten bleibt.

Siehe auch

HTMLGeolocationElement.invalidReason HTMLTableCaptionElement.align HTMLTableSectionElement.align HTMLTableSectionElement.ch HTMLTableSectionElement.chOff