HTMLTableColElement.ch — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableColElement.ch

Beschreibung

Die Eigenschaft ch der Schnittstelle HTMLTableColElement spiegelt das veraltete Inhaltsattribut char der Elemente <col> und <colgroup>. In HTML 4.01 sollte damit ein Ausrichtungszeichen festgelegt werden, zum Beispiel ein Dezimalpunkt ".", damit Zahlen in einer Spalte an diesem Zeichen ausgerichtet werden (zusammen mit align="char" und dem Versatz aus charoff).

Kein Browser hat diese zeichenbasierte Ausrichtung jemals umgesetzt. Die Eigenschaft ist daher ohne Funktion: Lesen liefert nur den Wert des Attributs char, und Schreiben setzt nur dieses Attribut. Auf das Layout wirkt sich beides nicht aus.

In der Praxis brauchen Sie ch nur, wenn Sie Altbestände auswerten oder bereinigen, etwa beim Migrieren alter HTML-Tabellen. Für neuen Code verwenden Sie CSS: text-align auf den Zellen, font-variant-numeric: tabular-nums für gleich breite Ziffern oder serverseitig formatierte Werte.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs char. Fehlt das Attribut, ist der Wert der leere String "". Beim Setzen wird der Wert in einen String umgewandelt und als Attribut char geschrieben.

Beispiele

Attribut char aus einer Legacy-Tabelle auslesen

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

cols.forEach((col, i) => {
  console.log(`Spalte ${i}: ch = "${col.ch}"`);
});

Spalte 0: ch = "." Spalte 1: ch = ""

Setzen spiegelt nur das Attribut und ändert das Layout nicht

const col = document.createElement('col');
col.ch = ',';

console.log(col.getAttribute('char')); // Attribut wurde gesetzt
console.log(col.outerHTML);
// Die Darstellung der Tabelle ändert sich dadurch nicht.

, <col char=",">

Migration: veraltete Attribute entfernen und durch CSS ersetzen

const migrateLegacyCols = (table) => {
  const cols = [...table.querySelectorAll('col, colgroup')];
  const hadCharAlign = cols.some((col) => col.ch !== '');

  cols.forEach((col) => {
    col.removeAttribute('char');
    col.removeAttribute('charoff');
    col.removeAttribute('align');
  });

  if (hadCharAlign) {
    // Zahlen rechtsbündig mit gleich breiten Ziffern darstellen
    table.querySelectorAll('td').forEach((td) => {
      td.style.textAlign = 'right';
      td.style.fontVariantNumeric = 'tabular-nums';
    });
  }
  return hadCharAlign;
};

const table = document.querySelector('table');
console.log('Migriert:', migrateLegacyCols(table));

Migriert: true

// Wichtig · Fallstricke

Veraltet und ohne Wirkung: Kein Browser richtet Spalten am Zeichen aus ch aus. Verlassen Sie sich für das Layout nicht auf diese Eigenschaft.
Name weicht vom Attribut ab: Die IDL-Eigenschaft heißt ch, das Attribut heißt char. getAttribute('ch') liefert null.
Die Eigenschaft ist nicht auf ein Zeichen begrenzt. Auch col.ch = 'abc' wird ohne Prüfung übernommen.
Der Validator meldet das Attribut char in HTML5 als Fehler. Eigenschaft und Attribut sind nur noch aus Gründen der Rückwärtskompatibilität vorhanden.
Browser-Kompatibilität: Chrome, Firefox, Safari und Edge unterstützen die Attribut-Spiegelung, aber keine Darstellung. Die verwandte Eigenschaft chOff (Attribut charoff) verhält sich genauso.
Als Ersatz dient CSS: text-align und font-variant-numeric: tabular-nums. Die geplante CSS-Ausrichtung text-align: \".\" ist bisher in keinem Browser umgesetzt.

Siehe auch

HTMLSelectElement.form HTMLTableColElement.chOff HTMLTableColElement.span HTMLTableColElement.align HTMLTableColElement.vAlign