colspan: eine Zelle über mehrere Spalten
colspan="n" macht eine Zelle so breit wie n Spalten. Die Zeile, in der sie steht, hat dann n - 1 Zellen weniger. Hier erstreckt sich die Summe über die ersten beiden Spalten:
Die letzte Zeile hat zwei Zellen, aber die erste zählt doppelt, die Zeile ergibt also wie die anderen drei Spalten.
rowspan: eine Zelle über mehrere Zeilen
rowspan="n" macht eine Zelle so hoch wie n Zeilen. Die Zeilen darunter lassen diese Spalte aus, weil die hohe Zelle sie schon füllt:
Die Zeilen für Bob und Cy haben nur ein <td>: Die Spalte Team ist schon durch „Design“ belegt. Im HTML markiert das nichts, lies eine Tabelle mit rowspan also von oben nach unten und merk dir, welche Spalten noch abgedeckt sind.
colspan und rowspan zusammen: ein Stundenplan
Eine Zelle kann sich in beide Richtungen erstrecken. Ein Stundenplan ist der klassische Fall: Manche Kurse dauern zwei Einheiten, manche laufen über zwei Tage:
Zähl die Zeile für 10:00: die Zeitüberschrift, dann ist Mon von HTML aus der Zeile darüber abgedeckt, dann füllt Lab Tue und Wed. Um 11:00 ist Mon wieder frei, und Lab deckt noch Tue und Wed ab, die Zeile hat also eine Datenzelle.
Zellen zählen, damit die Tabelle rechteckig bleibt
Jede Zeile muss dieselbe Anzahl Spalten ergeben, wobei das colspan jeder Zelle und die Spalten zählen, die rowspan-Zellen von oben abdecken. Hat eine Zeile eine Zelle zu viel, fügt der Browser dafür eine neue Spalte hinzu, und die Tabelle bekommt einen gezackten Rand:
In der falschen Tabelle hat die zweite Zeile vergessen, dass A ihre erste Spalte abdeckt, also landet D in einer dritten Spalte, die keine andere Zeile hat. Die Lösung ist, eine Zelle zu löschen. Derselbe Fehler mit colspan besteht darin, in der Zeile mit der breiten Zelle alle ursprünglichen Zellen zu behalten.
Eine Zelle zu wenig ist das umgekehrte Problem: Die Zeile endet zu früh und lässt an ihrem Ende ein Loch.
Gruppierte Überschriften mit colspan
Eine Überschrift kann sich über die Spalten erstrecken, die sie beschriftet, oberhalb einer Zeile mit spezifischeren Überschriften. Kennzeichne sie mit scope="colgroup", damit Screenreader sie auf alle Spalten darunter anwenden:
„City“ erstreckt sich mit rowspan="2" über beide Kopfzeilen, und jeder Monat mit colspan="2" über seine zwei Spalten. Die <colgroup>-Elemente legen die Spaltengruppen fest, auf die sich scope="colgroup" bezieht. Ein Screenreader auf der Zelle 31 bei Rome kann dann „Rome, July, High, 31“ ansagen. Die übrige Tabellenstruktur erklärt die Seite zur HTML Tabelle.
Verbindungen nur für echte Struktur
Verbundene Zellen machen eine Tabelle mit einem Screenreader schwerer lesbar und schwerer zu sortieren, zu filtern oder in eine Tabellenkalkulation zu kopieren. Nimm sie, wo die Daten wirklich gruppiert sind (eine Summe, eine Überschrift über Unterspalten, ein Kurs, der zwei Stunden dauert). Wenn eine Tabelle viele Verbindungen braucht, sind zwei einfachere Tabellen oft klarer.
Häufige Fehler
- Die abgedeckten Zellen stehen lassen. Eine Zelle mit
colspan="2"ersetzt zwei Zellen; lösch eine der ursprünglichen. - Die Zeilen unter einem
rowspanvergessen. Jede davon braucht eine Zelle weniger. colspanan<tr>schreiben. Es funktioniert nur an<td>und<th>.- Verbindungen für optisches Layout, etwa eine Bannerzeile quer über eine Layout-Tabelle. Für Layout nimm CSS Grid.
colspan="100%"für „die volle Breite“. Der Browser liest nur die führenden Ziffern, diese Zelle erstreckt sich also über 100 Spalten und fügt der Tabelle leere Spalten hinzu. Der Wert ist eine ganze Zahl von Spalten.
Häufig gestellte Fragen
Was macht colspan in HTML?
colspan lässt ein <td> oder <th> sich über mehrere Spalten erstrecken: <td colspan="3"> nimmt den Platz von drei Zellen in seiner Zeile ein. Diese Zeile braucht dann zwei Zellen weniger als die anderen.
Was macht rowspan in HTML?
rowspan lässt eine Zelle sich nach unten über mehrere Zeilen erstrecken: <td rowspan="2"> füllt ihre eigene Zeile und die darunter. Die nächste Zeile muss diese Spalte auslassen, weil die Zelle darüber sie schon abdeckt.
Kann eine Zelle colspan und rowspan zusammen verwenden?
Ja. <td colspan="2" rowspan="2"> deckt einen Block aus zwei Spalten mal zwei Zeilen ab. Jede Zeile, durch die sie läuft, braucht zwei eigene Zellen weniger.
Warum ragt in meiner Tabelle eine zusätzliche Zelle heraus?
Eine Zeile hat mehr Zellen als die anderen, wenn man die Verbindungen mitzählt. Meistens führt eine Zeile unter einem rowspan noch eine Zelle für die abgedeckte Spalte auf, oder eine Zeile mit colspan hat alle ursprünglichen Zellen behalten. Entferne das überzählige <td>.
Was ist der Höchstwert von colspan?
Browser begrenzen colspan auf 1000 und rowspan auf 65534. Bei colspan wird ein Wert von 0 oder einer, der nicht mit einer Ziffer beginnt, als 1 behandelt.
