Tabellen benötigt man in erster Linie um Daten übersichtlicher zu gestalten. Aber auch um mit Bildern zu arbeiten können Tabellen sehr hilfreich sein. Leider ist das Erstellen von komplexen Tabellen recht umständlich. Deshalb will ich versuchen, die einzelnen Schritte so einfach wie möglich darzustellen.

Das Grundgerüst
Eine Tabelle besteht aus Spalten und Zeilen. Aus der Anzahl der Spalten und Zeilen ergibt sich die der 'Zellen'. In diese Zellen lassen sich nicht nur Text, sondern auch Grafiken, Links und Java-Applets, etc. einbinden. Dem Browser muß ersteinmal gesagt werden, daß jetzt eine Tabelle folgt. Hierzu beginnt man mit dem Tag <table> und schließt ab mit dem Tag </table>. Eine Zeile erstellt man, in dem man den Tag <tr> verwendet. <tr> bedeutet übrigens 'table row' also Tabellenzeile. Damit man die einzelnen Zellen auch sieht benötigt man einen Rahmen, den man mit dem Tag <table border="1">. Die Dicke der Rahmen kann geändert werden, in dem man den Wert erhöht. Ein Wert von 0 stellt keinen Rahmen dar.
Um eine Zelle genauer zu definieren, verwendet man den Tag <td>. Mit ihm kann man auch die Zellengröße und Farbe bestimmen. Hiermit wird eine Zelle auf die Größe 800 Pixel gedehnt: <td width=800>. Für jede Zelle muß diese Angabe wiederholt werden! Ansonsten wird die Breite so festgelegt, daß der Text hineinpaßt. Ein konkretes Beispiel:

Diese 'Tabelle' wurde mit diesem HTML-Code erzeugt:

<table border="1">
<tr>
<td width="200"><strong>Überschrift 1</strong></td>
<td><strong>Überschrift 2</strong></td>
</tr>
<tr>
<td width="200">Text 1</td>
<td>Text 2</td>
</tr>
</table>

Ausrichten von Text in Zellen
Mit dem Tag <td align="center"> wird hier der Text zentriert ausgerichtet. Mit 'left', 'right' lassen sich die anderen Ausrichtugen erreichen. Auch vertikal läßt sich der Text nach oben, mittig oder nach unten ausrichten. Hierzu man den Tag <td valign="top">. Bei Bedarf kann 'top' (oben) durch 'middle' (mittig) oder 'bottom' (unten) ersetzt werden. Diese Tags lassen sich kombinieren. Ein Beispiel: <td width="200" align="center" valign="top">. Eine komplette richtet man aus, in dem man im 'table-Tag' den Tag zum Ausrichten einfügt.

Arbeiten mit Hintergrundfarben
Mit dem Tag <bgcolor="#FFFF00"> würde man z. B. eine gelbe Zelle erzeugen. Stellt man den table-Tag, so betrifft die Hintergrundfarbe die ganze Tabelle. Beispiel:

<table border="1" bgcolor="#FFFF00">
<tr>
<td align="center" width="200" bgcolor="#FFFF80"><strong>Überschrift
1</strong></td>
<td bgcolor="#FFFF80"><strong>Überschrift 2</strong></td>
</tr>
<tr>
<td align="right" width="200" bgcolor="#FFFFFF">Text 1</td>
<td bgcolor="#FFFFFF">Text 2</td>
</tr>
</table>

Zellen über Spalten laufen lassen
Häufig benötigt man Tabellen, deren Zellen über mehrere Spalten laufen. Ein Beispiel:

Mit dem Tag <td rowspan="3"> wird die vertikale Richtung 'überspannt'. Die Zahl bedeutet, daß diese Überspannung über drei Zellen reicht (siehe Beispiel). Genauso funktioniert der Tag <td colspan="2">. Er sorgt für die 'Überspannung' von horizontalen Zellen. Der gesamte Code der obigen Tabelle:

<table border="1">
<tr>
<td>Überschrift 1</td>
<td>Überschrift 2</td>
<td>Überschrift 3</td>
<td>Überschrift 4</td>
<td rowspan="3">vertikal<br>
vertikal<br>
vertikal</td>
</tr>
<tr>
<td colspan="2">T e x t 1 T e x t 1 T e x t 1</td>
<td>Text 2</td>
<td>Text 3</td>
</tr>
<tr>
<td>Text 4</td>
<td>Text 5</td>
<td colspan="2">T e x t 6 T e x t 6 T e x t 6</td>
</tr>
</table>

Andere Anwendungen mit Tabellen
Es lassen sich auch wunderbar Seiten mit Bildern aufteilen, wenn man Tabellen verwendet. Verwende die HTML-Tags, die im Kurs 2 beschrieben sind, um Bilder in eine Tabelle einzufügen.