BHAK & BHAS Bludenz

Grundkurs HTML & CSS

Zellen verbinden


Horizontale Verbindungen

Wer jemals in Word oder Excel Tabellen bearbeitet hat, kennt die verbundenen Zellen, die beispielsweise als mehrspaltige Überschriften gute Dienste leisten. Dies kann man mit HTML-Tabellen auch erreichen.

2 verbundene Spalten
Spalte 1 Spalte 2

Im obigen Beispiel wurde die Syntax für die erste Zeile wie folgt abgeändert:

<tr><td colspan="2"></td></tr>

Die entscheidende Rolle spielt das Attribut colspan="n" zum <td>-Tag. Wenn man Zellen verbinden will, empfiehlt es sich dringend, zuerst die Tabelle ohne Verbindungen, aber mit sichtbarem Rand anzulegen. Damit kann man auf den ersten Blick erkennen, ob alle Zeilen gleich viele Spalten enthalten. Erst dann sollte man einzelne Zeilen mittels colspan verbinden. Wenn die Tabelle perfekt aussieht und man den Rand nicht mehr braucht, setzt man das Attribut border zum Schluss der Arbeit auf 0. Diese Vorgangsweise sollte auch beim Verbinden von Zeilen angewendet werden.

Vertikale Verbindungen

2 verbundene Zeilen Zeile 1, Spalte 2
Zeile 2, Spalte 2

Dieses Beispiel ist etwas komplexer, weil die Veränderungen in zwei <tr>-Tags vorgenommen werden müssen. Deshalb lautet der Code:

<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>

Man beachte, dass in diesem Beispiel in der zweiten Zeile nur mehr eine Zelle definiert werden muss, weil sich die erste Zelle der ersten Zeile ja über zwei Zeilen erstreckt.

Horizontale und vertikale Verbindung

Die Königsklasse der Zellenverbindung ist die gleichzeitige Anwendung auf Spalten und Zeilen. Hier wird das Anlegen einer Grundtabelle zur Pflichtübung, es sei denn, man neigt zur Gehirnakrobatik. Ein Beispiel:

A1 B1 C1 D1
A2 2 verbundene Spalten und Zeilen D2
A3 D3
A4 B4 C4 D4

Um diese Tabelle zu erstellen, schreibt man zuerst eine "normale" Zeile mit vier Zellen, dann eine Zeile mit:

<tr>
<td></td>
<td colspan="2" rowspan="2"></td>
<td></td>
</tr>

dann eine "verkürzte" Zeile - es fehlen ja zwei Zellen - mittels:

<tr>
<td></td>
<td></td>
</tr>

und schließlich wieder eine "normale" Zeile mit vier Zellen. Und nun wünsche ich viel Spaß bei ...


Aufgabe 23

Öffne im Windows-Editor die Datei geruest.htm und bilde die unten abgebildete Tabelle nach. Speichere das Ergebnis mit dem <title> Designtabelle als uebung16.htm ab.

Arbeitsvorlage