HTMLTableElement.width — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableElement.width

Beschreibung

Die Eigenschaft HTMLTableElement.width spiegelt das HTML-Attribut width eines <table>-Elements wider. Der Wert ist immer ein String. Das kann eine Pixelangabe ohne Einheit sein ("500") oder eine Prozentangabe relativ zum umgebenden Block ("100%").

Beim Lesen erhältst du den Attributwert genau so, wie er im Markup steht. Fehlt das Attribut, ist der Wert ein leerer String. Du bekommst also nicht die tatsächlich dargestellte Breite. Die liefern offsetWidth, getBoundingClientRect() oder getComputedStyle(). Wenn du der Eigenschaft etwas zuweist, wird das Attribut width gesetzt bzw. aktualisiert.

Attribut und Eigenschaft gelten in HTML5 als veraltet. Sie funktionieren in allen Browsern weiter, damit alte Seiten nicht kaputtgehen. In neuem Code solltest du die Breite aber über CSS setzen, etwa mit table.style.width oder einer CSS-Klasse. Sinnvoll ist die Eigenschaft vor allem, wenn du altes Markup auswertest oder auf CSS umstellst.

Parameter

Name	Typ	Default	Beschreibung
$wert (beim Setzen)	string	""	Neue Breite als String, z. B. `"600"` (Pixel) oder `"75%"`. Zahlen werden automatisch in einen String umgewandelt.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs width oder "", wenn das Attribut fehlt. Das ist nicht die gerenderte Breite.

Beispiele

Breite auslesen und setzen

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

table.width = '80%';
console.log(table.width);
console.log(table.getAttribute('width'));
console.log(table.outerHTML);

"" 80% 80% <table width="80%"></table>

Attributwert und gerenderte Breite unterscheiden

const table = document.createElement('table');
table.innerHTML = '<tr><td>Inhalt</td></tr>';
table.width = '300';
document.body.append(table);

console.log(typeof table.width, table.width); // Attributwert als String
console.log(table.offsetWidth);               // tatsächliche Breite in Pixeln (Zahl)

string 300 300

Alte width-Attribute durch CSS ersetzen

// Alle Tabellen mit veraltetem width-Attribut auf CSS umstellen
document.querySelectorAll('table[width]').forEach((table) => {
  const w = table.width.trim();
  // Reine Zahlen sind Pixelangaben, Prozentwerte bleiben unverändert
  table.style.width = /^\d+$/.test(w) ? `${w}px` : w;
  table.removeAttribute('width');
});

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

// Wichtig · Fallstricke

Veraltet: Das Attribut width an <table> ist in HTML5 nicht mehr erlaubt. Verwende CSS (style.width, Klassen). Die Browser unterstützen die Eigenschaft weiterhin, sie kann aber als Fehler gemeldet werden, wenn du dein Markup prüfen lässt.
Kein Messwert: Die Eigenschaft liefert den Attribut-String, nicht die tatsächliche Breite. Zum Messen eignen sich offsetWidth oder getBoundingClientRect().width.
CSS hat Vorrang: Setzt du eine Breite per CSS, etwa mit table { width: 100% }, überschreibt sie das Attribut. Das Attribut wirkt nur als Darstellungshinweis mit niedriger Priorität.
Der Browser prüft den Wert nicht. Auch ungültige Werte wie "abc" landen unverändert im Attribut und werden bei der Darstellung ignoriert.
Einheiten wie "300px" sind im Attribut nicht vorgesehen. Die meisten Browser werten nur die führende Zahl aus.

Siehe auch

HTMLObjectElement.width HTMLTableElement.align HTMLTableElement.border HTMLTableElement.frame HTMLTableElement.rows