Signatur
Beschreibung
Die Eigenschaft vAlign von HTMLTableRowElement spiegelt das HTML-Attribut valign eines <tr>-Elements wider. Sie legt fest, wie der Inhalt der Zellen dieser Zeile vertikal angeordnet wird. Übliche Werte sind "top", "middle", "bottom" und "baseline".
Die Eigenschaft ist veraltet. Das Attribut valign ist in HTML5 nicht mehr konform. Browser werten es nur noch aus Kompatibilitätsgründen aus. Für neuen Code nimmt man die CSS-Eigenschaft vertical-align, etwa über element.style.verticalAlign oder ein Stylesheet.
Praktisch wichtig ist vAlign vor allem dann, wenn man alte HTML-Tabellen ausliest oder umbaut, zum Beispiel beim Übertragen alter Attribute nach CSS. Da es sich um ein gespiegeltes Attribut handelt, liefert das Lesen genau den Attributwert als String. Fehlt das Attribut, ist der Wert ein leerer String. Ungültige Werte werden nicht korrigiert.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Beim Setzen: die gewünschte vertikale Ausrichtung, z. B. "top", "middle", "bottom" oder "baseline". Der Wert wird unverändert in das Attribut valign geschrieben. |
Rückgabewert
valign. Ist das Attribut nicht gesetzt, ist es ein leerer String "".Beispiele
Ausrichtung einer Zeile lesen und setzen
const row = document.createElement('tr');
console.log(JSON.stringify(row.vAlign));
row.vAlign = 'top';
console.log(row.vAlign);
console.log(row.getAttribute('valign'));Alte valign-Attribute nach CSS übertragen
// Alle Zeilen mit altem valign-Attribut auf CSS umstellen
document.querySelectorAll('tr[valign]').forEach((row) => {
const align = row.vAlign.toLowerCase();
// vertical-align bei <tr> wirkt über die Zellen
for (const cell of row.cells) {
cell.style.verticalAlign = align;
}
row.removeAttribute('valign');
});
console.log(document.querySelectorAll('tr[valign]').length);Moderne Alternative mit CSS
const table = document.querySelector('table');
const row = table.insertRow();
row.insertCell().textContent = 'Kurz';
row.insertCell().innerHTML = 'Mehrzeiliger<br>Inhalt';
// statt row.vAlign = 'bottom':
for (const cell of row.cells) {
cell.style.verticalAlign = 'bottom';
}
console.log(row.cells[0].style.verticalAlign);// Wichtig · Fallstricke
- Veraltet:
valignist in HTML5 nicht mehr konform. Verwende stattdessen die CSS-Eigenschaftvertical-alignauf den<td>- bzw.<th>-Zellen. - Der Wert wird nicht geprüft. Ungültige Angaben wie
"center"werden gespeichert, haben aber keine Wirkung. Die Groß-/Kleinschreibung bleibt so erhalten, wie sie gesetzt wurde. - CSS-Regeln mit
vertical-alignauf den Zellen haben Vorrang vor dem Attribut. Setzt manvAlignund passiert scheinbar nichts, überschreibt vermutlich ein Stylesheet den Wert. - Kompatibilität: Alle gängigen Browser unterstützen die Eigenschaft weiterhin, sie wird aber nicht weiterentwickelt. Es gibt sie auch bei
HTMLTableCellElement,HTMLTableSectionElementundHTMLTableColElement.