Signatur
Beschreibung
Die Eigenschaft HTMLTableElement.rules spiegelt das HTML-Attribut rules eines <table>-Elements wider. Sie gibt an, welche inneren Ränder zwischen den Zellen gezeichnet werden: keine, nur zwischen Zeilengruppen (<thead>, <tbody>, <tfoot>), nur zwischen Zeilen, nur zwischen Spalten oder alle. Den äußeren Rahmen der Tabelle steuert dagegen die ebenfalls veraltete Eigenschaft frame.
Gültige Werte sind die Zeichenketten "none", "groups", "rows", "cols" und "all". Die Eigenschaft ist ein einfach gespiegeltes DOMString: Sie gibt genau den im Attribut stehenden Text zurück bzw. schreibt den zugewiesenen Wert unverändert ins Attribut. Eine Prüfung auf gültige Werte gibt es nicht.
In der Praxis begegnet man rules fast nur noch in altem HTML-Code, z. B. in HTML-E-Mails oder alten CMS-Vorlagen. Für neue Projekte legt man Zellränder per CSS fest, also mit border, border-collapse und passenden Selektoren wie tbody + tbody oder tr:not(:last-child) td.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | "none" | "groups" | "rows" | "cols" | "all" | string | "" (Attribut nicht gesetzt) | Wird beim Schreiben zugewiesen und unverändert in das Attribut rules übernommen. Ungültige Werte werden gespeichert, aber vom Browser beim Darstellen nicht beachtet. |
Rückgabewert
rules als Zeichenkette oder "", wenn das Attribut fehlt.Beispiele
Wert auslesen und setzen
const table = document.createElement('table');
console.log(JSON.stringify(table.rules)); // Attribut noch nicht gesetzt
table.rules = 'rows';
console.log(table.rules);
console.log(table.getAttribute('rules'));Nur Trennlinien zwischen Zeilengruppen anzeigen
const table = document.querySelector('#preise');
// Linien nur zwischen thead, tbody und tfoot
table.frame = 'box';
table.rules = 'groups';
table.border = '1';Alte Tabellen auf CSS umstellen
// Veraltetes rules-Attribut in CSS-Klassen übersetzen
const map = { all: 'rules-all', rows: 'rules-rows', cols: 'rules-cols', groups: 'rules-groups' };
document.querySelectorAll('table[rules]').forEach((table) => {
const cls = map[table.rules.toLowerCase()];
if (cls) table.classList.add(cls);
table.removeAttribute('rules');
});
// Passendes CSS, z. B.:
// .rules-rows { border-collapse: collapse; }
// .rules-rows tr + tr td { border-top: 1px solid #ccc; }// Wichtig · Fallstricke
- Veraltet: Das Attribut
rulesist in HTML5 als obsolet eingestuft. Browser unterstützen es nur noch aus Kompatibilitätsgründen, Validatoren melden es als Fehler. Verwende stattdessen CSS. - Der Wert wird nicht geprüft oder normalisiert.
table.rules = 'foo'wird angenommen, hat aber keine sichtbare Wirkung. Die Groß-/Kleinschreibung bleibt so, wie sie zugewiesen wurde. - Sichtbar wird die Wirkung meist erst zusammen mit
border. Ist ein CSS-Rahmen für die Zellen gesetzt, hat dieser Vorrang vor den Standardformaten, dierulesauslöst. - Mit
"groups"werden Spaltengruppen nur erkannt, wenn sie mit<colgroup>ausgezeichnet sind.