HTMLTableElement.border — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableElement.border

Beschreibung

Die Eigenschaft HTMLTableElement.border spiegelt das Inhaltsattribut border des <table>-Elements wider. Der Wert ist ein String und gibt die Breite des äußeren Tabellenrahmens in CSS-Pixeln an. Wird ein Wert größer als 0 gesetzt, zeichnen Browser zusätzlich 1 Pixel breite Rahmen um alle Zellen.

Lesen liefert genau den Attributwert, der im Markup steht, oder einen leeren String "", falls das Attribut fehlt. Beim Schreiben wird das Attribut border im DOM gesetzt; mit removeAttribute('border') lässt es sich wieder entfernen.

Die Eigenschaft ist veraltet. Sie existiert vor allem, damit alter Code und alte HTML-Dokumente weiter funktionieren. Für neue Projekte legt man Rahmen mit CSS fest, etwa mit border und border-collapse. Nützlich ist die Eigenschaft noch, wenn man Altbestände auswertet oder migriert, zum Beispiel beim Umwandeln von border-Attributen in CSS-Klassen.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Nur beim Setzen: neue Rahmenbreite in Pixeln als String, z. B. `"1"`. Zahlen werden automatisch in einen String umgewandelt.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs border oder "", wenn das Attribut fehlt.

Beispiele

Rahmenbreite auslesen und setzen

const table = document.createElement('table');
console.log(JSON.stringify(table.border)); // Attribut fehlt

table.border = 2; // Zahl wird zu String
console.log(table.border, typeof table.border);
console.log(table.outerHTML);

"" 2 string <table border="2"></table>

Alte border-Attribute nach CSS migrieren

// Alle Tabellen mit border-Attribut auf eine CSS-Klasse umstellen
document.querySelectorAll('table[border]').forEach((table) => {
  const width = Number.parseInt(table.border, 10) || 0;
  if (width > 0) {
    table.style.borderWidth = `${width}px`;
    table.classList.add('table--bordered');
  }
  table.removeAttribute('border');
});

console.log(document.querySelectorAll('table[border]').length);

Moderne Alternative mit CSS

const table = document.querySelector('table');
// Statt table.border = '1':
Object.assign(table.style, {
  borderCollapse: 'collapse',
  border: '1px solid #444'
});
table.querySelectorAll('th, td').forEach((cell) => {
  cell.style.border = '1px solid #999';
});

// Wichtig · Fallstricke

Veraltet: Die HTML-Spezifikation stuft border als überholt ein. Verwende stattdessen CSS (border, border-collapse). Aus Kompatibilitätsgründen unterstützen alle Browser die Eigenschaft aber weiterhin.
Der Wert ist immer ein String, auch wenn man eine Zahl zuweist. Zum Rechnen Number.parseInt() verwenden.
table.border = '' entfernt das Attribut nicht, sondern setzt es leer, also border="". Browser zeigen dann trotzdem einen Rahmen an (meist 1 px). Zum Entfernen removeAttribute('border') nutzen.
CSS-Regeln für border haben Vorrang vor dem Attribut, denn Präsentationsattribute haben eine sehr niedrige Spezifität.
Wird border gesetzt, fügen Browser zusätzlich Zellrahmen hinzu. Das unterscheidet sich von einer reinen CSS-Regel auf table.

Siehe auch

HTMLQuoteElement.cite HTMLTableElement.tBodies HTMLTableElement.bgColor HTMLTableElement.frame HTMLTableElement.rows