Tabellen <table> formatieren

Was bisher noch etwas irritiert, ist, dass alle Inhalte untereinander stehen. Wenn unsere Seite voller wird, schaut das nicht nur blöd aus, sondern ist auch unpraktisch für den Leser.

Deshalb möchten wir gerne das Bild vom Hund neben einen Text setzen. Dafür brauchen wir, wie in einem Textverarbeitungsprogramm, eine Tabelle.

In HTML sind die beiden Richtungen einer Tabelle (table) definiert: Die Tabellenzeile (tablerow, tr) und die Tabellenspalten (tabledata, td). Das, was innerhalb des Befehls <td> steht, ist Inhalt einer Tabellenzelle.

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

Schauen wir uns doch einmal eine fertige Tabelle an: Wir definieren eine Tabellenzeile (tr) mit zwei Spalten (td), wobei die erste Spalte wegen des Bildes 260 Punkt breit sein muss (width). Die Gesamttabelle soll 500 Punkt breit sein und einen Haarlinienrahmen (border) haben. Außerdem sollen die Tabellenzellen keinen Abstand voneinander haben (cellspacing). Innerhalb einer Zelle soll der Text bzw. das Bild 5 Punkt Abstand zum Rahmen haben (cellpadding).

Ich bin nur ein kleiner Blindtext. Wenn ich gross bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen. Denn vorerst bin ich nur ein kleiner Blindtext.

<table align="center" width="500" border="1" cellspacing="0" cellpadding="5">
<tr>
<td width="300">
<img src="grafik/hund.jpg" border="0" alt="Ich bin der Hund und heiße Wasti" width="300" height="181"/>
</td>
<td>
Ich bin nur ein kleiner Blindtext. Wenn ich gross bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch <font color="blue">nicht</font>, mich weiterzulesen. Denn vorerst bin ich nur ein kleiner Blindtext.
</td>
</tr>
</table>

In unserer nächsten Tabelle hängen wir eine Tabellenzeile an.
Wir brauchen die Breite der Zellen nicht mehr definieren, einmal reicht. Bei der neuen Tabellenzeile (tr) drehen wir aber zur Veranschaulichung die Reihenfolge um: Zuerst kommt der Text, dann der Hund:

<table align="center" width="500" border="1" cellspacing="0" cellpadding="5">
<tr>
<td width="300">
<img src="grafik/hund.jpg" border="0" alt="Ich bin der Hund und heiße Wasti" width="300" height="181"/>
</td>
<td>
Ich bin nur ein kleiner Blindtext. Wenn ich gross bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch <font color="blue">nicht</font>, mich weiterzulesen. Denn vorerst bin ich nur ein kleiner Blindtext.
</td>
</tr>

<tr>
<td>
Ich bin nur ein kleiner Blindtext. Wenn ich gross bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch <font color="blue">nicht</font>, mich weiterzulesen. Denn vorerst bin ich nur ein kleiner Blindtext.
</td>
<td width="300">
<img src="grafik/hund.jpg" border="0" alt="Ich bin der Hund und heiße Wasti" width="300" height="181"/>
</td>
</tr>
</table>

	Ich bin nur ein kleiner Blindtext. Wenn ich gross bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen. Denn vorerst bin ich nur ein kleiner Blindtext.
Ich bin nur ein kleiner Blindtext. Wenn ich gross bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen. Denn vorerst bin ich nur ein kleiner Blindtext.

Die Arbeit mit Tabellen ist verhältnismäßig kompliziert. Man muss v.a. sehr genau arbeiten.

Lass uns nun deine Seite so bearbeiten, dass dein Bild neben dem Text zu stehen kommt. Dazu fügst du eine Tabelle mit zwei Zellen ein (der Rand soll nicht sichtbar sein; cellpadding="0" und cellspacing="0"). Dann verschiebst du das Bild und deinen Text in jeweils eine Zelle, fertig!
Wenn du Lust hast, machst du dasselbe noch mit deinem Hund.

So könnte die Seite jetzt aussehen: Zur Beispielseite mit Tabellen (Zwischenergebnis)

Tabellen für das Seitenlayout

Tabellen eignen sich auch als Layoutmittel, wenn man sie als so genannte "blinde Tabellen", also ohne Rahmen (border="0",) einsetzt. Diese Seite hier ist z.B. in einer Tabelle eingebunden, die nur eine Zelle hat. So lässt sich der gesamte Seiteninhalt mittig ausrichten (vor die Tabelle <center>, hinter die Tabelle </center>) und in der Breite begrenzen (dadurch wird der Text besser lesbar).
Man sollte immer darauf achten, nicht zu viel Inhalt in eine Tabelle zu stecken, da der Browser immer erst die ganze Tabelle lädt, bevor man etwas sieht. Man kann aber mehrere kurze und gleich formatierte Tabellen hintereinanderstellen, schon ist dieses Problem gelöst.

So, nun hast du die wichtigsten HTML-Befehle kennengelernt. Für die Erstellung einfacher Seiten reicht das aus, allerdings sind die Textformatierungsmöglichkeiten bisher noch sehr eingeschränkt.
Wenn du noch Zeit und Lust hast, dann steigen wir etwas tiefer in die Materie ein:

Weiter zu den Seiten für Fortgeschrittene