Zellen verbinden mit colspan

Horizontale Verbindung

  Wie in Microsoft Word oder Excel kann man auch in HTML-Tabellen Zellen miteinander verbinden.
Auf dieser Seite wird das horizontale Verbinden erklärt.

"col" ist eine Abkürzung von "column" (=Tabellen-Spalte oder Säule auf englisch).
"span" könnte man mit (über)spannen übersetzen.

<table>
	<tr>
    	<td colspan="2">Verbindung</td>
    	<td>Hallo Zelle</td>
	</tr>
	<tr>
    	<td>Hallo Zelle</td>
    	<td>Hallo Zelle</td>
    	<td>Hallo Zelle</td>
	</tr>
</table>

Vorschau (unformatiert)

Verbindung Hallo Zelle
Hallo Zelle Hallo Zelle Hallo Zelle

Die Zahl im Attributwert definiert, wie viele Spalten "überspannt" werden sollen. Beachte, dass sich die Anzahl der Zellen in der ersten Zeile reduziert.

colspan und rowspan sind mühsam

Wenn man versucht, komplexe Tabelle "von Hand" zu schreiben, wird die Geduld arg strapaziert. Auch bei colspan und rowspan leistet der Tables Generator einen wertvolle, visuelle Hilfestellung, auch wenn man dieses Features zuerst entdecken muss:

Logo Tables Generator

Kurzanleitung

Zellen, die verbunden werden sollen, markieren (mit gedrückter Maustaste überfahren):
Tables Generator Merge Step 1

Klicke auf den Button mit den Pfeilen:
Tables Generator Merge Button

Die Zellen sind nun verbunden. Klicke auf den Button "Generate", um den Code für die Tabelle zu generieren:
Tables Generator Merge Step 2