Signatur
Beschreibung
Die Eigenschaft chOff des Interfaces HTMLTableColElement spiegelt das veraltete HTML-Attribut charoff von <col>- und <colgroup>-Elementen wider. Ursprünglich sollte sie zusammen mit ch (Attribut char) und align="char" festlegen, um wie viele Zeichen der Zellinhalt einer Spalte gegenüber dem Ausrichtungszeichen (z. B. dem Dezimalkomma) verschoben wird.
Kein Browser hat diese zeichenbasierte Ausrichtung je umgesetzt. Die Eigenschaft lässt sich lesen und schreiben, aber sie hat keinerlei Auswirkung auf die Darstellung. Sie dient nur noch der Abwärtskompatibilität: Beim Lesen erhältst du den Wert des Attributs als Zeichenkette (oder "", wenn es fehlt), und beim Schreiben wird das Attribut charoff im DOM gesetzt.
Praktisch ist chOff höchstens beim Auswerten oder Bereinigen alter HTML-Dokumente nützlich, etwa um veraltete Attribute zu finden und durch CSS zu ersetzen. Für neuen Code solltest du Spaltenausrichtung über CSS lösen, etwa mit text-align auf den Zellen oder font-variant-numeric: tabular-nums für Zahlen, die sauber untereinander stehen sollen.
Rückgabewert
charoff als Zeichenkette oder "", wenn das Attribut fehlt. Beim Zuweisen wird der Wert in eine Zeichenkette umgewandelt und als Attribut charoff gespeichert.Beispiele
Wert des charoff-Attributs auslesen
// HTML: <table><colgroup><col id="betrag" align="char" char="," charoff="2"></colgroup>...</table>
const col = document.getElementById('betrag');
console.log(col.chOff); // gespiegelter Attributwert
console.log(typeof col.chOff);
console.log(col.getAttribute('charoff'));Wert setzen – ändert nur das Attribut, nicht die Darstellung
const col = document.createElement('col');
console.log(JSON.stringify(col.chOff)); // Attribut fehlt
col.chOff = 3; // Zahl wird zu String
console.log(col.chOff, typeof col.chOff);
console.log(col.outerHTML);Alte Tabellen bereinigen und auf CSS umstellen
// Veraltete Ausrichtungsattribute finden, entfernen und durch CSS ersetzen
const cleanLegacyCols = (root = document) => {
const cols = root.querySelectorAll('col[charoff], colgroup[charoff]');
cols.forEach((col) => {
console.warn(`Veraltetes charoff="${col.chOff}" entfernt`, col);
col.removeAttribute('charoff');
col.removeAttribute('char');
});
// Zahlen in Tabellenzellen per CSS gleichmäßig ausrichten
root.querySelectorAll('td.betrag').forEach((td) => {
td.style.textAlign = 'right';
td.style.fontVariantNumeric = 'tabular-nums';
});
return cols.length;
};
console.log(`${cleanLegacyCols()} Spalten bereinigt`);// Wichtig · Fallstricke
- Keine Wirkung: Kein Browser setzt die zeichenbasierte Ausrichtung (
align="char",char,charoff) um. Wenn duchOffsetzt, ändert sich an der Darstellung nichts. - Veraltet: Das Attribut
charoffist im HTML Living Standard als obsolet eingestuft. HTML-Validatoren melden es als Fehler. Verwende es in neuem Code nicht. - Typ: Der Wert ist immer eine Zeichenkette und wird nicht als Zahl geprüft.
col.chOff = 'abc'ist erlaubt und löst keinen Fehler aus. - Kompatibilität: Die Eigenschaft gibt es aus Kompatibilitätsgründen in allen gängigen Browsern (Chrome, Edge, Firefox, Safari). Wegen ihres Status als veraltet solltest du dich langfristig nicht auf sie verlassen.
- Alternative: Ausrichtung per CSS lösen (
text-align,font-variant-numeric: tabular-nums). Beachte: Auf<col>wirken nur wenige CSS-Eigenschaften (background,border,width,visibility). Die Ausrichtung musst du daher an den Zellen (td/th) setzen.