Tabellenzellen in HTML mit dem colspan-Tag verbinden

Zwei oder mehr Zellen zu einer Einheit machen

Nachdem die Zeilen und Zellen besprochen und mit tr (Zeilen) bzw. td (Zellen/Spalten) angelegt sind, ergibt sich in Tabellen immer wieder das Problem, dass man nicht in jeder Zeile das gleiche Schema braucht. Manchmal wäre es gut, wenn man Zellen zusammenlegen kann. Das geht in HTML recht einfach, indem man den colspan-Tag wählt.

Mit diesem Zusatz für den td-Tag kann man den Browser informieren, dass die bisherige Struktur nicht beibehalten wird, sondern dass die aktuelle Zelle so lange ist wie die angegebene Zahl von Zellen.

colspan-Tag für das Verbinden mehrerer Datenzellen in der Tabelle

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

Ergibt:

Erste Zelle	Zweite Zelle
Das ist eine Zelle mit der Breite von zwei

Das einfache Beispiel zeigt die simple Tabelle mit den zwei Zeilen, wie sie schon vorher verwendet wurde, nur zeigt die zweite Zeile einen anderen Charakter, weil die beiden Spalten (Zellen) verbunden wurden. Durch den Parameter colspan kann man festlegen, wie viele Zellen verbunden werden sollen. Hat man zum Beispiel eine fünfspaltige Tabelle und möchte drei Zellen verbinden, dann würde der td-Tag für die erste betroffene Zelle durch colspan=3 ergänzt werden.

Mit dieser einfachen Technik kann man in Tabellen unterschiedliche Schwerpunkte setzen, mehr Platz für Erklärungen schaffen oder generell das Erscheinungsbild manipulieren. Man sollte es aber nicht übertreiben, denn theoretisch könnte man in jeder Zeile andere Zellen verbinden, aber das hätte zur Folge, dass sich die Leserinnen und Leser nicht mehr auskennen und das kann keinen Sinn machen.

Lesen Sie auch

So wie in normalen Texten kommt die Tabelle auch auf Internetseiten sehr oft vor und ist daher ein wichtiges Thema im Webdesign. Zum einen soll sie übersichtlich sein, zum anderen soll sie auch gefällig sein, wofür vor allem moderne CSS-Möglichkeiten Pate stehen. Die Grundstruktur sieht den table-Tag als Platzhalter vor und mit dem tr-Tag gibt es die Zeilen und mit dem td-Tag die Zellen.

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

Außerdem besteht die Möglichkeit, mit dem thead und tfoot Kopfzeile als Überschrift und Fußzeile als Abschluss einzubauen. Man kann die Spalten auch mit dem colgroup-Tag vorweg definiert, speziell in Sachen Breite.

Wichtige Funktionen können gefragt sein, wenn man nicht die übliche Tabelle braucht, sondern bestimmte Zeilen zusammenführen muss oder auch Spalten zusammengehören.

Themenseiten

Startseite HTML-Grundlagen

Tabellenzellen in HTML mit dem colspan-Tag verbinden

Zwei oder mehr Zellen zu einer Einheit machen

colspan-Tag für das Verbinden mehrerer Datenzellen in der Tabelle

Lesen Sie auch

Diesen Artikel teilen

Infos zum Artikel

Kategorien

Interner Bereich