HTMLTableCellElement.rowSpan — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableCellElement.rowSpan

Beschreibung

Die Eigenschaft rowSpan gibt an, wie viele Zeilen eine Tabellenzelle nach unten belegt. Sie ist die JavaScript-Entsprechung des HTML-Attributs rowspan an <td>- und <th>-Elementen. Wenn Sie den Wert lesen, erhalten Sie immer eine Zahl. Wenn Sie ihn setzen, aktualisiert der Browser das Attribut sofort und berechnet das Tabellenlayout neu.

Sie brauchen rowSpan, wenn Sie Tabellen per Skript aufbauen oder ändern. Typische Fälle sind das Zusammenfassen gleicher Werte in einer Spalte (etwa Gruppenüberschriften in Berichten), Kalender- und Stundenpläne, in denen ein Termin mehrere Zeitslots belegt, oder Editoren, in denen Nutzer Zellen verbinden und wieder trennen können.

Fehlt das Attribut oder ist es ungültig, liefert die Eigenschaft 1. Der Wert 0 hat eine besondere Bedeutung: Die Zelle reicht dann bis zum Ende ihres Tabellenabschnitts (<thead>, <tbody> oder <tfoot>). Werte über 65534 werden auf 65534 begrenzt.

Wichtig: Wenn Sie rowSpan erhöhen, müssen Sie die Zellen, die jetzt überdeckt werden, in den folgenden Zeilen selbst entfernen. Sonst verschiebt sich die Tabelle, und es entstehen überzählige Spalten.

Parameter

Name	Typ	Default	Beschreibung
$wert	number	1	Nur beim Setzen: Anzahl der Zeilen, die die Zelle belegen soll. Nicht negative Ganzzahl. `0` bedeutet „bis zum Ende des Tabellenabschnitts“, der Höchstwert ist `65534`.

Rückgabewert

Typ

number

Beschreibung

Eine nicht negative Ganzzahl (unsigned long) mit der aktuellen Zeilenspanne. Ohne gültiges rowspan-Attribut ist der Wert 1.

Beispiele

Zeilenspanne auslesen und ändern

// HTML: <table><tr><td id="a" rowspan="2">A</td><td>B</td></tr><tr><td>C</td></tr></table>
const zelle = document.getElementById('a');
console.log(zelle.rowSpan);            // 2

zelle.rowSpan = 1;
console.log(zelle.getAttribute('rowspan')); // Attribut wird mitgeändert

zelle.removeAttribute('rowspan');
console.log(zelle.rowSpan);            // Standardwert

2 "1" 1

Gleiche Werte einer Spalte zusammenfassen (Gruppierung)

// Fasst direkt aufeinanderfolgende gleiche Werte in Spalte 0 zu einer Zelle zusammen
const zusammenfassen = (tbody, spalte = 0) => {
  const zeilen = [...tbody.rows];
  let anker = null;
  for (const zeile of zeilen) {
    const zelle = zeile.cells[spalte];
    if (anker && anker.textContent === zelle.textContent) {
      anker.rowSpan += 1;   // Ankerzelle nach unten verlängern
      zelle.remove();       // überdeckte Zelle entfernen
    } else {
      anker = zelle;
    }
  }
};

const tbody = document.querySelector('#bericht tbody');
zusammenfassen(tbody);
console.log([...tbody.rows].map(r => r.cells[0].rowSpan));

z. B. [3, 2, 1, 1] für 7 Zeilen, wobei die Zeilen mit bereits zusammengefassten Zellen jetzt andere Zellen in Spalte 0 haben

Termin im Stundenplan über mehrere Slots

const zeigeTermin = (tabelle, startZeile, spalte, dauerSlots, titel) => {
  const zelle = tabelle.rows[startZeile].cells[spalte];
  zelle.textContent = titel;
  zelle.rowSpan = dauerSlots;
  // überdeckte Zellen in den Folgezeilen entfernen
  for (let i = 1; i < dauerSlots; i++) {
    tabelle.rows[startZeile + i].cells[spalte]?.remove();
  }
};

const plan = document.querySelector('#stundenplan');
zeigeTermin(plan, 1, 2, 3, 'Workshop');
console.log(plan.rows[1].cells[2].rowSpan);

3

Zelle bis zum Abschnittsende strecken (rowSpan = 0)

const seitenleiste = document.querySelector('#tabelle tbody tr:first-child td');
seitenleiste.rowSpan = 0; // reicht bis zur letzten Zeile des <tbody>
console.log(seitenleiste.rowSpan, seitenleiste.getAttribute('rowspan'));

0 "0"

// Wichtig · Fallstricke

Überdeckte Zellen entfernen: Wenn Sie rowSpan erhöhen, werden Zellen in den folgenden Zeilen nicht automatisch gelöscht. Entfernen Sie sie selbst, sonst ragen Zeilen über die Tabelle hinaus. Achtung beim Durchlaufen: Der Index in row.cells ist nicht immer die sichtbare Spalte, weil Zellen aus früheren Zeilen nach unten hineinragen können.
Grenzwerte: Werte über 65534 werden begrenzt. Negative Werte gelten als ungültig und ergeben den Standardwert 1. Nachkommastellen werden abgeschnitten.
Sonderfall 0: Die Zelle reicht bis zum Ende des umgebenden Tabellenabschnitts, nicht bis zum Ende der ganzen Tabelle. Ältere Browser haben diesen Fall teils nicht einheitlich dargestellt. Setzen Sie im Zweifel lieber die genaue Anzahl an Zeilen.
Barrierefreiheit: Verbundene Zellen machen die Tabelle für Screenreader schwerer lesbar. Bei komplexen Tabellen helfen headers/id oder scope an den Kopfzellen.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Für CSS-Grid-Layouts gibt es keine Entsprechung, dort nutzen Sie grid-row: span n.

Siehe auch

HTMLTableCellElement.align HTMLTableCellElement.colSpan HTMLTableCellElement.noWrap HTMLTableCellElement.scope HTMLTableCellElement.vAlign