Signatur
Beschreibung
Die Eigenschaft cellPadding spiegelt das HTML-Attribut cellpadding eines <table>-Elements wider. Sie legt den Innenabstand fest, also den Abstand zwischen dem Rand jeder Zelle (<td>, <th>) und ihrem Inhalt. Anders als in der MDN-Kurzbeschreibung angedeutet geht es dabei nicht um den Abstand zwischen den Zellen, dafür ist cellSpacing zuständig.
Der Wert ist immer ein String, z. B. "8" (wird als Pixel gedeutet) oder "5%". Fehlt das Attribut, liefert die Eigenschaft einen leeren String "". Beim Schreiben wird der Wert unverändert als Attribut übernommen, der Browser prüft ihn also nicht.
Die Eigenschaft gilt als veraltet. Sie ist vor allem nützlich, wenn man alten HTML-Code (z. B. HTML-E-Mails oder Legacy-CMS-Ausgaben) auswerten oder ins moderne CSS umziehen will. In neuem Code setzt man den Abstand über die CSS-Eigenschaft padding auf td/th.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Beim Zuweisen: der neue Innenabstand als String, z. B. "10" (Pixel) oder "5%". Zahlen werden automatisch in einen String umgewandelt. |
Rückgabewert
cellpadding oder "", wenn das Attribut nicht gesetzt ist.Beispiele
Innenabstand auslesen und setzen
// HTML: <table id="preise" cellpadding="4">...</table>
const tabelle = document.querySelector('#preise');
console.log(tabelle.cellPadding); // aktueller Wert
tabelle.cellPadding = 12; // Zahl wird zu String
console.log(tabelle.cellPadding);
console.log(tabelle.getAttribute('cellpadding'));Fehlendes Attribut erkennen
const tabelle = document.createElement('table');
console.log(JSON.stringify(tabelle.cellPadding)); // leerer String
console.log(tabelle.hasAttribute('cellpadding'));Legacy-Tabellen nach CSS umstellen
// Wandelt alle cellpadding-Attribute in CSS-padding um
const migrateCellPadding = () => {
document.querySelectorAll('table[cellpadding]').forEach((table) => {
const raw = table.cellPadding.trim();
const padding = raw.endsWith('%') ? raw : `${parseInt(raw, 10) || 0}px`;
for (const cell of table.querySelectorAll('td, th')) {
cell.style.padding = padding;
}
table.removeAttribute('cellpadding');
});
};
migrateCellPadding();
console.log(document.querySelectorAll('table[cellpadding]').length);// Wichtig · Fallstricke
- Veraltet:
cellpaddingist in HTML5 nicht mehr gültig. Nutze stattdessen CSS, z. B.td, th { padding: 8px; }. Die Eigenschaft wird aus Kompatibilitätsgründen aber in allen gängigen Browsern weiterhin unterstützt. - Immer ein String: Auch
table.cellPadding = 10ergibt beim Lesen"10". Zum Rechnen musst du den Wert mitparseInt()umwandeln und dabei Prozentwerte gesondert behandeln. - CSS hat Vorrang: Ein per CSS gesetztes
paddingauf den Zellen überschreibt den Attributwert. Der Wert voncellPaddingsagt deshalb nichts über den tatsächlich angezeigten Abstand aus. Den bekommst du übergetComputedStyle(cell).padding. - Nicht mit
cellSpacingverwechseln: Das steuert den Abstand zwischen den Zellen (in CSS:border-spacing).