Positionierung mit Tabellen

Sie haben nun kennengelernt, wie man auf einfache Weise Inhalte wie Texte und Grafiken in eine Webseite einfügt. Jetzt wäre es sicherlich noch wissenswert, wie man diese Inhalte dem Layout gemäß positioniert. Die klassische Methode ist das Layout mit Hilfe von Tabellen. Auch die Profis setzen sie nach wie vor immer wieder ein.

Wie ist eine solche Tabelle aufgebaut? Eine Tabelle besteht aus Zeilen und Spalten. Viele Computerbesitzer kennen diese Gestaltungsmöglichkeit auch schon von M$ Word und haben mit Word schon einige Tabellen erstellt. Leider verfügen die meisten HTML-Editoren nicht über den praktischen Zeichenstift (außer Frontpage...;-|). Daher ist es sinnvoll, sich vorher mit einem Stift und einem Stück Papier Gedanken zu machen, wie die Webseite und ihre Inhalte aufgeteilt werden sollen. So kann man vorher absehen, wieviele Zeilen und Spalten die Tabelle haben soll.

Aufbau einer Tabelle

Eine Tabelle wird vom <table> - Tag umschlossen. Anschließend werden die Zeilen mit dem <tr> - Tag definiert. Innerhalb jeder Zeile wird die Anzahl der Spalten definiert, indem die Zahl der Tabellenzellen pro Zeile festgelegt wird.

Eine Tabellenzelle wird durch das <td> - Tag angegeben. Bei der Gestaltung mit Tabellen ist unbedingt zu beachten, daß die Summe der Zeilen und die Summe der Spalten immer dieselbe sind. Damit Sie im Beispiel auch etwas erkennen können, ist hier das Attribut "border" für das <table> - Tag auf 1 gesetzt. Die Zahlenangabe für border legt die Randstärke für die Tabellenzellen fest. Die Attribute werden weiter unten genauer erklärt.

Eine Tabelle kann zudem hinsichtlich der Aufteilung der Zeilen in Kopfzellen und in "normale" Zeilen eingeteilt werden. Das kann durchaus Sinn machen, wenn man z. B. Preistabellen gestalten möchte. Die Kopfzellen haben im Unterschied zu den "normalen" Zellen das Tag <th>Überschrift</th>. Text, der innerhalb von <th> - Tags steht, wird automatisch fett formatiert.

Beispiel für den Aufbau einer Tabelle:

Diese Tabelle hat drei Zeilen und drei Spalten:

<table border="1">
<tr>
<td>Hier steht Text</td>
<td>Nix</td>
<td>Hier steht noch mehr Text</td>
</tr>
<tr>
<td>Hallo, dies ist die zweite Zeile</td>
<td>&nbsp;</td>
<td>Hallo</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Dies ist die zweite Spalte</td>
<td>&nbsp;</td>
</tr>
</table>

Das "&nbsp;" bedeutet übrigens, dass ein Leerzeichen eingefügt ist. Eine Tabellenzelle sollte nie "leer" sein. Einige Browser wie Netscape 4.xx können sonst Seiten falsch darstellen.

Eine Tabelle hat in jeder Zeile dieselbe Anzahl Spalten und in jeder Spalte dieselbe Anzahl von Zeilen. Mithilfe der Attribute colspan und rowspan ist es jedoch möglich, Spalten bzw. Zeilen zusammenzufassen. Wie das geht, wird im folgenden erklärt:

In dieser Tabelle werden Spalten zusammengefasst:

Beispiel für eine Tabelle mit colspan. Dafür steht in derselben Zeile eine Zelle weniger:

<table>
<tr>
<td colspan="2">Diese Spalte muß besonders breit sein, weil hier sehr viel Text stehen soll.</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>Hier ist die dritte Spalte</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Diese Tabelle hat insgesamt wieder drei Zeilen und drei Spalten. In der zweiten Zeile wird die erste Spalte zu einer Zeile zusamengefasst (rowspan="2"). Dafür steht dann in der nächsten (3.) Zeile eine Tabellenzelle weniger, da sie ja mit der darüberliegenden Zelle zusammengefasst wurde:

<table border="1">
<tr>
<td >
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Featuring Herr Patrick Zausel ....</font></p>
<p>&nbsp;</p>
</td>
<td ><img src="../../media/images/trans10.gif" width="10" height="10"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td rowspan="2"><img src="../../media/images/privatundfun/zausel.jpg" width="222" height="193"></td>
<td>&nbsp;</td>
<td ><img src="../../media/images/pfeil/pfeilNoben.gif" width="31" height="32"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Hast du was zu essen?</font></td>
</tr>
</table>

Beispiel anschauen

Tabellen, Zeilen und Spalten können jede Menge Attribute haben. Die gebräuchlichsten Attribute für das <table> - Tag sind:

Die grau unterlegten Attribute gelten auch für das <td> - Tag. Ein Beispiel, in dem einige Attribute eingebaut sind:

Beispiel für verschiedene Attribute einer Tabelle / Zelle:

<table border="3" width="610" height="325" bordercolor="#339933" bgcolor="#F4F4F4">
<tr>
<td width="309" >
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Dies ist die umgebende Tabelle mit der Hintergrundfarbe #F4F4F4.</font></p>
<p>&nbsp;</p>
</td>
<td width="10" ><img src="../../media/images/trans10.gif" width="10" height="10"></td>
<td width="265" background="../../media/images/raster2.gif"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">In dieser Zelle ist ein Hintergrundbild eingesetzt worden.</font></td>
</tr>
<tr>
<td rowspan="2" align="center" valign="middle" width="309">
<table width="250" border="3" cellspacing="0" cellpadding="4" bordercolor="#3333CC" bgcolor="#CBCBCB">
<tr>
<td>&nbsp;</td>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="2">DieTabelle ist zentriert und mittig ausgerichtet. Das wird in der umschließenden Tabellenzelle festgelegt. </font></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Diese Tabelle hat eine eigene Hintergrundfarbe.</font></td>
<td>&nbsp;</td>
</tr>
</table>
</td>
<td width="10">&nbsp;</td>
<td width="265" bgcolor="#FF9933" ><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Diese Zelle hat eine eigene Hintergrundfarbe</font></td>
</tr>
<tr>
<td width="10" height="131">&nbsp;</td>
<td width="265" height="131">
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Hier steht Text</font></p>
</td>
</tr>
</table>

Beim obigen Beispiel wurde ein Trick angewandt, den Profis beim Webdesign mit Tabellen immer wieder einsetzen. Sie nutzen aus, das die Tabellenzellengröße von den eingefügten Inhalten abhängt. Eine Tabellenzeile richtet ihre Höhe nach dem höchsten Inhalt ihrer Zellen. Eine Spalte ist so breit, wie der breiteste Inhalt einer ihrer Zellen. Wenn man nun sicherstellen will, daß eine Zeile oder Spalte eine bestimmte Höhe oder Breite hat, verwenden Profis ein transparentes Gif. Das ist eine Grafik, die durchsichtig ist. Sie hatte nur eine Farbe, die transparent gestellt wurde, aber sie hat eine definierte Breite und Höhe, gilt also als Inhalt. So kann man z. B. 1 Pixel hohe Zeile erzeugen, die - mit der gewünschten Hintergrundfarbe versehen, eine dünne Linie ergibt. Allerdings verlangt der Netscape-Browser einen Inhalt in Zellen, die mit einer Hintergrundfarbe versehen sein sollen, sonst stellt er die Hintergrundfarbe nicht dar. Man muß also alle Zellen zusammenfassen (colspan/rowspan) oder man muß in jede Zelle der Zeile/ Spalte eine Kopie des transparenten Gifs mit einfügen. - So einfach ist das ;.-)

Und wenn man dann noch seine Tabellen auf border="0" setzt, dann hat man das perfekte Tabellenlayout erschaffen...