Mit Tabellen kann man Objekte, Grafiken oder Texte auf leichte Art und weiße in einem Layout unterbringen. Wie Sie diese Tabellen erstellen, erfahren Sie im vierten Teil.
Oben die Werbung, Links das Menü, in der Mitte der Text. So
in etwa sieht bei den meisten Webseiten das Layout aus. Die feste
Struktur wird hier von Tabellen erzwungen. Es gibt Programme, die
das Layouten leicht machen, wie z.B. Dreamweaver, der eine extra
Layoutansicht hat. Hier wollen wir ihnen jedoch einfach zeigen,
wie sie praktisch mit Tabellen umgehen.
Erstellen Sie auch hierzu eine neue HTML-Seite mit der Grundstruktur,
der Code sollte wie folgt aussehen.
<html>
<head>
<title>Der Titel</title>
</head>
<body>
<table width="300px" border="1">
<tr>
<td>Erste Spalte</td>
<td>Zweite Spalte</td>
<td>Dritte Spalte</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
In ihrem Browser sollten Sie dies hier sehen.
Eine einfache Tabelle
Eine Tabelle wird in HTML mit dem <table> Tag eingeleitet.
Man kann der Tabelle feste Größen mit den Attributen
"width" und "height" geben. Das
"height" Attribut ist eher optional, da sich die
Inhalte ja nicht nach einer festgelegten Höhe orientieren,
der Inhalt ist nunmal so groß. Eine Zeile wird in HTML mit
dem Tag <tr> eingeleitet. Diese eine Zeile hat dann
eine bestimmte Anzahl von Feldern. Diese Felder werden mit <td>
festgelegt. In ihnen kann man Texte oder Bilder ausgeben. Zeile
für Zeile ist logisch angeordnet. Man kann auch dem <td>
Tag die Attribute "width" und "height" geben.
Standardmäßig wird die gesamtbreite der Tabelle unter
den einzelnen Zellen aufgeteilt. Wie sie in diesem Code sehen, finden
Sie eine neue "Zeichenkette", das " ".
Diese Zeichenkette erzwingt ein Leerzeichen. Die Zelle richtet sich
in der Höhe nach dem eingefügte Inhalt, wäre dort
kein Leerzeichen, dann hätte die Zelle keinen Inhalt, somit
würde es die Zelle gar nicht geben. Probieren Sie es einfach
aus, entfernen Sie einmal das .
Sie können den <table> Tag noch um weitere Attribute
erweitern, cellspacing="0"
gibt an, wie weit (in Pixeln) die einzelnen Zellen voneinander
entfernt sein sollen, zudem gibt cellpadding="0"
an, wie weit der Text von dem Rand der Zelle entfernt sein soll.
Das "border" Attribut gibt die dicke des Rahmens
in Pixeln an. Desweiteren können Sie einzelne Farben definieren.
Sie können mit dem Attribut "bgcolor" die
Hintergrundfarbe der Tabelle, einer Zeile oder einer Zelle angeben.
Mit dem Attribut "color" können Sie die Farbe
des Textes angeben.
Und nun zu unserem einfachen Tabellenlayout das soll so aussehen:
Das Ergebnis (verkleinert)
Wie Sie sehen gibt es insgesamt zwei Zeilen. In der ersten Zeile
gibt es nur eine Zelle, in der zweiten Zeile gibt es zwei Zellen,
für das Menü, und für den Inhalt.
Der Code ist deshalb auch nicht weiter schwer:
<table width="750" border="1" cellpadding="0"
cellspacing="0">
<tr>
<td height="60" valign="top"> </td>
</tr>
<tr>
<td width="150" height="440" valign="top"> </td>
<td width="600" valign="top"> </td>
</tr>
</table>
Hier finden Sie ein wichtiges Attribut in den <td> Tags.
Das "valign" gibt an, woran sich der Text "orientieren"
soll. Hier ist es jeweils "top", also oben. Wenn
Sie dem Attribut den Wert "bottom" geben, dann
ist der Text unten zu finden.
Im nächsten, und letzten Teil des HTML Kurses lernen Sie, wie
sie die einzelnen Dokumente mit Links verknüpfen, und wie Sie
ein einfaches Menü gestalten.