Zellen verbinden

Manchmal passt ein Wert nicht in genau eine Zelle, sondern gilt für mehrere Spalten oder Zeilen. Dafür gibt es zwei Attribute, die auf td und th gleichermaßen funktionieren.

01 / 04colspan: nach rechts

<table>
  <caption>Wochenplan</caption>
  <thead>
    <tr>
      <th scope="col">Tag</th>
      <th colspan="2" scope="col">Mahlzeiten</th>
    </tr>
    <tr>
      <td></td>
      <th scope="col">Mittag</th>
      <th scope="col">Abend</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Montag</th>
      <td>Linsensuppe</td>
      <td>Brot und Salat</td>
    </tr>
  </tbody>
</table>

colspan="2" zieht eine Zelle über zwei Spalten. Im Beispiel steht in der ersten Kopfzeile „Mahlzeiten“ über den beiden Spalten „Mittag“ und „Abend“. So entsteht eine zweistufige Kopfzeile, wie man sie aus Tabellenkalkulationen kennt.

Wichtig ist die Rechnung dahinter. Die Tabelle hat drei Spalten. Die erste Kopfzeile enthält nur zwei Zellen, weil die zweite davon zwei Spalten breit ist: eins plus zwei ergibt drei. Stimmt diese Summe nicht, verrutscht die Tabelle.

Ganz links in der zweiten Kopfzeile steht eine leere Zelle. Sie hält den Platz unter „Tag“ frei, und sie ist bewusst ein td und kein th: Dort steht keine Beschriftung, also gibt es auch nichts, was etwas beschriften könnte. In älteren Vorlagen findest du an solchen Stellen oft ein   als Füllung. Das stammt aus einer Zeit, in der Browser leere Zellen ohne Rahmen ließen, und heute macht es die Sache schlechter: Ein Screenreader liest das geschützte Leerzeichen mit, statt die Zelle zu überspringen.

02 / 04rowspan: nach unten

<table>
  <caption>Kochzeiten nach Menge</caption>
  <tbody>
    <tr>
      <th rowspan="2" scope="row">Linsensuppe</th>
      <td>2 Portionen</td>
      <td>25 Minuten</td>
    </tr>
    <tr>
      <td>4 Portionen</td>
      <td>30 Minuten</td>
    </tr>
  </tbody>
</table>

rowspan="2" zieht eine Zelle über zwei Zeilen. Hier gilt die Beschriftung „Linsensuppe“ für beide Zeilen daneben.

Und jetzt die Stelle, an der es fast immer schiefgeht: Die zweite Zeile hat nur noch zwei Zellen statt drei. Der erste Platz ist schon von der übergreifenden Zelle aus der Zeile darüber belegt. Wer dort trotzdem drei Zellen schreibt, schiebt die Tabelle nach rechts.

Die Regel dazu: Für jede Zeile, die eine rowspan-Zelle überdeckt, fällt in dieser Zeile eine Zelle weg. Genauso wie bei colspan eine Zelle mit colspan="2" zwei Plätze verbraucht.

03 / 04Wenn die Rechnung nicht aufgeht

<table>
  <tbody>
    <tr>
      <td colspan="2">Zwei Spalten breit</td>
      <td>und noch eine</td>
    </tr>
    <tr>
      <td>eins</td>
      <td>zwei</td>
    </tr>
  </tbody>
</table>

Die erste Zeile hat rechnerisch drei Plätze (zwei plus eins), die zweite nur zwei. Der Browser meldet wieder keinen Fehler, er macht die Tabelle einfach drei Spalten breit und lässt unten rechts eine Lücke.

Auf der Seite siehst du davon nur, dass in der zweiten Zeile rechts nichts mehr steht. Ohne Rahmen fällt eine fehlende Zelle kaum auf, und bei einer Tabelle mit zwölf Spalten und einer verschobenen Zeile sucht man dann lange. Deshalb lohnt es sich, beim Bauen kurz nachzuzählen: Jede Zeile muss dieselbe Zahl an Plätzen ergeben, wobei jede Zelle so viele Plätze zählt, wie ihr colspan sagt, und überdeckte Plätze aus rowspan nicht neu vergeben werden.

04 / 04Ganze Spalten ansprechen

Zum Schluss zwei Elemente, die selten gebraucht werden: colgroup und col stehen ganz vorn in der Tabelle, hinter einer caption und vor thead und tbody, und beschreiben die Spalten, bevor die erste Zeile beginnt. Damit lässt sich eine ganze Spalte auf einmal einfärben oder auf eine Breite bringen, statt in jeder Zeile dieselbe Klasse zu setzen. Viel mehr geht allerdings nicht: Schriftfarbe, Ausrichtung und Innenabstand wirken auf col nicht, die vererben sich nicht in die Zellen. Inhalte tragen sie ohnehin nicht, die stehen weiterhin in den Zellen.