HTML lernen - Tabellen - Zellen verbinden

Oftmals ist es nötig in Tabellen eine oder mehrere Zellen zu verbinden. Nachfolgend erfahren Sie mehr über die beiden HTML-Attribute, die dies erlauben.

Hinweis: Beide Attribute können nur im td-Tag (oder th-Tag) verwendet werden!

horizontale Zellen verbinden mit colspan

colspan verbindet horizontal gelagerte Zellen miteinander. Dabei muss beachtet werden, dass die Zellen, die mit einander verbunden werden, zu einer "verschmelzen". D.h. es ist auch nur ein td-Tag für x Zellen nötig, wenn diese miteinander verbunden werden.

Wert des Attributs ist die Anzahl an Zellen, die miteinander verbunden werden. colspan="1" ist überflüssig, da dies bedeutet, es handelt sich einfach nur um die aktuelle Zelle.

Beispiel mit verbundenen Zellen:

<table>
 <tr>
  <td>Zelle 1</td>
  <td>Zelle 2</td>
  <td>Zelle 3</td>
 </tr>
 <tr>
  <td colspan="2">Zelle 1 und 2</td>
  <td>Zelle 3</td>
 </tr>
 <tr>
  <td>Zelle 1</td>
  <td colspan="2">Zelle 2 und 3</td>
 </tr>
 <tr>
  <td colspan="3">Zelle 1, 2 und 3</td>
 </tr>
 <tr>
  <td>Zelle 1</td>
  <td>Zelle 2</td>
  <td>Zelle 3</td>
 </tr>
</table>

vertikale Zellen verbinden mit rowspan

Mit rowspan können Zellen, die untereinander liegen miteinander verbunden werden. Hier gilt das Gleiche wie für colspan.

Hinweis: Bei diesem Attribut werden die einzelnen td-Tags nicht innerhalb eines tr-Tags zusammengeführt, sondern in mehreren tr-Tags ein td-Tag.

Beispiel:

<table>
 <tr>
  <td>Zelle 1</td>
  <td>Zelle 2</td>
  <td>Zelle 3</td>
 </tr>
 <tr>
  <td rowspan="3">Zelle 1 der Zeilen 2 und 3</td>
  <td>Zelle 2</td>
  <td>Zelle 3</td>
 </tr>
 <tr>
  <td>Zelle 2</td>
  <td>Zelle 3</td>
 </tr>
 <tr>
  <td>Zelle 2</td>
  <td>Zelle 3</td>
 </tr>
 <tr>
  <td>Zelle 1</td>
  <td>Zelle 2</td>
  <td>Zelle 3</td>
 </tr>
</table>

Hinweis: Kombinationen aus colspan und rospan sind ebenfalls möglich.