HTMLTableCellElement.vAlign — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableCellElement.vAlign

Beschreibung

Die Eigenschaft vAlign des Interfaces HTMLTableCellElement liest und schreibt das Inhaltsattribut valign einer Tabellenzelle (<td> oder <th>). Sie legt fest, wie der Zellinhalt vertikal ausgerichtet wird. Übliche Werte sind "top", "middle", "bottom" und "baseline".

Die Eigenschaft spiegelt das Attribut einfach wider: Der Wert wird unverändert als String zurückgegeben. Fehlt das Attribut, ergibt sich ein leerer String "". Beim Schreiben wird das Attribut valign gesetzt, die Browser prüfen den Wert dabei nicht.

Die Eigenschaft ist veraltet. Du brauchst sie eigentlich nur, wenn du alten HTML-Code auslesen oder umbauen willst, zum Beispiel beim Übertragen von valign-Attributen in CSS. Für neuen Code nimmst du die CSS-Eigenschaft vertical-align, per JavaScript also cell.style.verticalAlign.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Schreiben: neuer Wert für das Attribut `valign`, z. B. `"top"`, `"middle"`, `"bottom"` oder `"baseline"`.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs valign oder "", wenn das Attribut fehlt.

Beispiele

Wert auslesen und setzen

// HTML: <table><tr><td id="zelle" valign="top">Inhalt</td></tr></table>
const cell = document.getElementById('zelle');
console.log(cell.vAlign);

cell.vAlign = 'bottom';
console.log(cell.getAttribute('valign'));

top bottom

Alte valign-Attribute in CSS übertragen

// Alle Zellen mit valign auf vertical-align umstellen
const migrateVAlign = (root = document) => {
  root.querySelectorAll('td[valign], th[valign]').forEach((cell) => {
    const value = cell.vAlign.toLowerCase();
    if (['top', 'middle', 'bottom', 'baseline'].includes(value)) {
      cell.style.verticalAlign = value;
    }
    cell.removeAttribute('valign');
  });
};

migrateVAlign();
console.log(document.querySelectorAll('[valign]').length);

Fehlendes Attribut

const td = document.createElement('td');
console.log(JSON.stringify(td.vAlign));
console.log(td.hasAttribute('valign'));

"" false

// Wichtig · Fallstricke

Veraltet: Das Attribut valign ist in HTML5 nicht mehr zulässig. Nutze stattdessen CSS vertical-align bzw. element.style.verticalAlign.
Der Wert wird nicht geprüft. Ungültige Werte wie "center" werden zwar gespeichert, bewirken aber unter Umständen nichts. Die Groß- und Kleinschreibung bleibt beim Auslesen so, wie sie gesetzt wurde.
CSS-Regeln haben Vorrang vor dem Präsentationsattribut valign. Wenn ein Stylesheet vertical-align setzt, ändert eine Änderung an vAlign nichts Sichtbares.
Die Eigenschaft gibt nur den Attributwert zurück, nicht die tatsächlich berechnete Ausrichtung. Die bekommst du über getComputedStyle(cell).verticalAlign.
Kompatibilität: Alle Browser unterstützen die Eigenschaft aus Gründen der Abwärtskompatibilität. Verwandte veraltete Eigenschaften gibt es auch an HTMLTableRowElement, HTMLTableSectionElement und HTMLTableColElement.

Siehe auch

HTMLProgressElement.value HTMLTableCellElement.align HTMLTableCellElement.abbr HTMLTableCellElement.colSpan HTMLTableCellElement.ch