HTMLTableColElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLTableColElement extends HTMLElement

Beschreibung

HTMLTableColElement ist die DOM-Schnittstelle für die Elemente <col> und <colgroup>. Beide Elemente stehen innerhalb einer <table> vor <thead>/<tbody> und beschreiben ganze Spalten, ohne selbst Inhalt zu enthalten. So lassen sich Breite, Hintergrund oder Rahmen einer kompletten Spalte zentral festlegen, statt jede einzelne Zelle zu stylen.

Die wichtigste Eigenschaft ist span (number). Sie legt fest, über wie viele Spalten sich das Element erstreckt, und entspricht dem HTML-Attribut span. Gültig sind Werte von 1 bis 1000. Ungültige Werte werden auf 1 zurückgesetzt, zu große auf 1000 begrenzt. Dazu kommen die veralteten Eigenschaften align, ch, chOff, vAlign und width, die nur noch aus Kompatibilitätsgründen vorhanden sind.

In der Praxis nutzt man die Schnittstelle, um Spalten dynamisch hervorzuheben (z. B. die sortierte Spalte), Spaltenbreiten per Skript anzupassen oder Spalten ein- und auszublenden. Erzeugt werden die Elemente mit document.createElement('col') bzw. document.createElement('colgroup'). Einen eigenen Konstruktor gibt es nicht.

Wichtig: Auf <col> wirken nur wenige CSS-Eigenschaften, nämlich background, border, width und visibility. Textfarbe, Schriftart oder padding werden nicht an die Zellen vererbt.

Parameter

Name	Typ	Default	Beschreibung
$span	number	1	Eigenschaft: Anzahl der Spalten, über die sich `<col>` oder `<colgroup>` erstreckt (1–1000). Spiegelt das Attribut `span`.
$align	string	""	Veraltet. Horizontale Ausrichtung (`left`, `center`, `right`, `justify`, `char`). Stattdessen CSS `text-align` auf den Zellen verwenden.
$vAlign	string	""	Veraltet. Vertikale Ausrichtung. Stattdessen CSS `vertical-align` verwenden.
$width	string	""	Veraltet. Spaltenbreite als Attributwert. Stattdessen `style.width` verwenden.
$ch	string	""	Veraltet. Ausrichtungszeichen für `align="char"`. Wird von Browsern nicht umgesetzt.
$chOff	string	""	Veraltet. Versatz zum Ausrichtungszeichen. Wird von Browsern nicht umgesetzt.

Rückgabewert

Typ

HTMLTableColElement

Beschreibung

Instanzen erhält man über document.createElement('col')/('colgroup') oder über DOM-Abfragen wie querySelector('col').

Beispiele

Spalten per Skript anlegen

const table = document.querySelector('#preise');
const colgroup = document.createElement('colgroup');

const colName = document.createElement('col');
colName.style.width = '40%';

const colWerte = document.createElement('col');
colWerte.span = 3; // gilt für die nächsten drei Spalten
colWerte.style.backgroundColor = '#f5f5f5';

colgroup.append(colName, colWerte);
table.prepend(colgroup); // muss vor thead/tbody stehen

console.log(colWerte instanceof HTMLTableColElement, colWerte.span);

true 3

Sortierte Spalte hervorheben

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

const markiereSpalte = (index) => {
  cols.forEach((col, i) => {
    col.style.backgroundColor = i === index ? '#fff3c4' : '';
  });
};

document.querySelectorAll('th').forEach((th, i) => {
  th.addEventListener('click', () => markiereSpalte(i));
});

Spalte ausblenden und span-Grenzen prüfen

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

col.span = 0;
console.log(col.span); // ungültig, wird auf 1 gesetzt

col.span = 5000;
console.log(col.span); // auf 1000 begrenzt

// Spalte ausblenden (Layout bleibt stabil)
col.style.visibility = 'collapse';

1 1000

// Wichtig · Fallstricke

Begrenzte CSS-Wirkung: Auf <col>/<colgroup> wirken nur border, background, width und visibility. color, font, text-align oder padding erreichen die Zellen nicht. Für diese Eigenschaften die Zellen z. B. mit td:nth-child(n) ansprechen.
visibility: collapse auf Spalten wird inzwischen von allen modernen Browsern unterstützt, bei älteren Safari-Versionen war das Verhalten aber lange uneinheitlich. Im Zweifel testen.
Veraltete Eigenschaften: align, ch, chOff, vAlign und width sind veraltet und sollten in neuem Code nicht verwendet werden. ch/chOff hatten nie eine sichtbare Wirkung.
Position im DOM: <colgroup> muss nach einer eventuellen <caption> und vor <thead>/<tbody> stehen. <col> ist nur innerhalb von <colgroup> gültig. Hat ein <colgroup> eigene <col>-Kinder, wird sein span ignoriert.
span ist in allen Browsern unterstützt (Baseline).

Siehe auch

HTMLTableCellElement HTMLTableRowElement HTMLTableElement HTMLLabelElement HTMLObjectElement