HTMLTableElement.cellSpacing — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableElement.cellSpacing

Beschreibung

Die Eigenschaft cellSpacing von HTMLTableElement spiegelt das veraltete HTML-Attribut cellspacing eines <table>-Elements wider. Sie legt fest, wie viel Platz zwischen benachbarten Zellen (<td> und <th>) sowie zwischen den äußeren Zellen und dem Tabellenrand liegt.

Der Wert ist immer ein String. Gibt man nur eine Zahl an (z. B. "10"), rechnet der Browser sie als Pixel. Beim Lesen bekommt man genau den Attributwert zurück, der im Markup steht. Fehlt das Attribut, ist das Ergebnis ein leerer String. Das tatsächlich angezeigte Layout (etwa durch CSS) liefert die Eigenschaft nicht.

Im Alltag braucht man die Eigenschaft fast nur noch, wenn man alten Code oder altes Markup pflegt, zum Beispiel HTML-E-Mails oder ältere CMS-Vorlagen. In neuem Code verwendet man die CSS-Eigenschaft border-spacing zusammen mit border-collapse: separate.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs cellspacing, z. B. "5" oder "10px". Fehlt das Attribut, ist der Wert ein leerer String "". Wenn man einen Wert zuweist, wird das Attribut gesetzt.

Beispiele

Zellabstand lesen und setzen

// <table id="preise" cellspacing="4">...</table>
const table = document.getElementById('preise');

console.log(table.cellSpacing); // aktueller Attributwert

table.cellSpacing = '12';
console.log(table.getAttribute('cellspacing'));

4 12

Fehlendes Attribut ergibt leeren String

const table = document.createElement('table');
console.log(JSON.stringify(table.cellSpacing));
console.log(table.hasAttribute('cellspacing'));

table.cellSpacing = 0;   // Zahl wird zu String umgewandelt
console.log(typeof table.cellSpacing, table.cellSpacing);

"" false string 0

Alten Code auf CSS border-spacing umstellen

// Alle Tabellen mit altem cellspacing-Attribut auf CSS umstellen
const migrateCellSpacing = () => {
  document.querySelectorAll('table[cellspacing]').forEach((table) => {
    const raw = table.cellSpacing.trim();
    const value = /^\d+$/.test(raw) ? `${raw}px` : raw;
    table.style.borderCollapse = 'separate';
    table.style.borderSpacing = value;
    table.removeAttribute('cellspacing');
  });
};

migrateCellSpacing();

// Wichtig · Fallstricke

Veraltet: Die Eigenschaft gehört nicht mehr zum aktuellen HTML-Standard und ist nur noch aus Gründen der Rückwärtskompatibilität vorhanden. Alle gängigen Browser unterstützen sie weiterhin, in neuem Code sollte man aber CSS border-spacing verwenden.
Kein Effekt bei border-collapse: collapse: Fallen die Zellrahmen zusammen, bleibt cellspacing ohne Wirkung. Viele CSS-Resets setzen genau diesen Wert.
CSS hat Vorrang: Ein im Stylesheet gesetztes border-spacing überschreibt das Attribut. Die Eigenschaft liefert trotzdem weiter den Attributwert und nicht den tatsächlich angezeigten Abstand. Den bekommt man mit getComputedStyle(table).borderSpacing.
Prozentwerte werden von modernen Browsern nicht zuverlässig umgesetzt. Sicherer sind ganze Pixelwerte.
Die Eigenschaft steuert nur den Abstand zwischen den Zellen. Für den Innenabstand in einer Zelle gibt es cellPadding bzw. CSS padding.

Siehe auch

HTMLScriptElement.fetchPriority HTMLTableCellElement.rowSpan HTMLTableElement.cellPadding HTMLTableElement.caption HTMLTableElement.align