HTMLTableElement.frame — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableElement.frame

Beschreibung

Die Eigenschaft frame des Interfaces HTMLTableElement spiegelt das gleichnamige HTML-Attribut des <table>-Elements. Sie legt fest, welche Seiten des äußeren Tabellenrahmens dargestellt werden – zum Beispiel nur oben und unten oder nur links und rechts.

Gültige Werte sind:

"void" – kein Rahmen (Standard)
"above" – nur oben
"below" – nur unten
"hsides" – oben und unten
"vsides" – links und rechts
"lhs" – nur links
"rhs" – nur rechts
"box" bzw. "border" – alle vier Seiten

Die Eigenschaft ist veraltet. Sie existiert nur noch aus Kompatibilitätsgründen für Altbestände. In neuem Code solltest du Rahmen ausschließlich per CSS setzen (border-top, border-bottom usw.). Sichtbar wird der Effekt meist nur, wenn auch das Attribut border gesetzt ist bzw. kein CSS-Rahmen die Darstellung überschreibt.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Setzen: einer der Werte `void`, `above`, `below`, `hsides`, `vsides`, `lhs`, `rhs`, `box`, `border`. Der Wert wird unverändert in das Attribut `frame` geschrieben.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs frame, bzw. ein leerer String "", wenn das Attribut nicht gesetzt ist.

Beispiele

Wert auslesen und setzen

const table = document.createElement('table');
table.border = '1';
console.log(JSON.stringify(table.frame));

// Nur oberen und unteren Rahmen zeichnen
table.frame = 'hsides';
console.log(table.frame);
console.log(table.getAttribute('frame'));

"" hsides hsides

Altbestand prüfen und auf CSS migrieren

// Mapping der veralteten frame-Werte auf CSS-Rahmenseiten
const frameToSides = {
  void: [], above: ['top'], below: ['bottom'],
  hsides: ['top', 'bottom'], vsides: ['left', 'right'],
  lhs: ['left'], rhs: ['right'],
  box: ['top', 'right', 'bottom', 'left'],
  border: ['top', 'right', 'bottom', 'left']
};

document.querySelectorAll('table[frame]').forEach((table) => {
  const sides = frameToSides[table.frame.toLowerCase()] ?? [];
  table.style.borderStyle = 'none';
  sides.forEach((side) => {
    table.style[`border-${side}`] = '1px solid #333';
  });
  table.removeAttribute('frame');
  console.log('Migriert:', sides.join(', ') || 'kein Rahmen');
});

Migriert: top, bottom

Moderne Alternative ohne frame

const table = document.querySelector('table');
// Gleicher Effekt wie frame = 'vsides'
Object.assign(table.style, {
  borderLeft: '2px solid black',
  borderRight: '2px solid black',
  borderTop: 'none',
  borderBottom: 'none'
});

// Wichtig · Fallstricke

Veraltet: frame ist im HTML-Standard als obsolet markiert. Verwende stattdessen CSS-border-Eigenschaften; die Eigenschaft kann künftig entfernt werden.
Der Setter prüft den Wert nicht: Ungültige Werte wie "foo" werden trotzdem ins Attribut geschrieben und vom Browser als Standard (kein bzw. voller Rahmen, je nach Kontext) behandelt.
CSS-Regeln für border auf der Tabelle haben Vorrang vor dem Präsentationsattribut – eine Änderung von frame zeigt dann keine sichtbare Wirkung.
Der Effekt ist in den meisten Browsern nur sichtbar, wenn zusätzlich das Attribut border gesetzt ist.
Browser-Kompatibilität: Lesen und Schreiben funktioniert in allen gängigen Browsern, die Darstellung kann aber im Detail abweichen.

Siehe auch

CSSVariableReferenceValue.fallback HTMLMapElement.name HTMLTableElement.rows HTMLTableElement.rules HTMLTableElement.align