Mit Tabellen können Sie Texte und Elemente auf der Webseite positionieren. Tabellen können natürlich auch für die Gestaltung des Layouts benutzt werden. Wenn Sie allerdings das Kapitel tabellenloses Webdesign gelesen haben, werden Sie feststellen, dass wir nicht viel davon halten. Also begrenzen wir uns beim Tabellen erstellen darauf, Texte und Elemente zu positionieren.
Der Code um Tabellen zu erstellen, setzt sich aus mehreren Codeblöcken zusammen. Mit dem Befehl table wird eine Tabelle erstellt. Wir haben dann zwar eine Tabelle, aber noch keine Zeilen und Spalten. Diese müssen extra angegeben werden. Der Befehl für eine Zeile ist tr und für eine Spalte td. Ein Beispiel:
<table border="1">
<tr>
<td>Text in einer Zelle</td>
</tr>
</table>
In diesem Beispiel haben wir eine Tabelle mit dem Befehl <table> geöffnet. Hier haben wir eine Zusatzoption für die Tabelle eingefügt. Mit border="1" bestimmen wir, dass diese Tabelle einen Rahmen mit der Stärke 1 bekommt. Beachten Sie bitte, dass diese Zusatzoption innerhalb des table Befehls und mit einem Leerzeichen getrennt steht. Danach kommt mit <tr> die Anweisung für eine Zeile. Danach wird mit <td> die Spalte definiert. In dieser Zelle befindet sich nun unser Text. Wie gewohnt werden die einzelnen Befehl syntaktisch korrekt wieder geschlossen. Das Beispiel erzeugt folgendes:
Text in einer Zelle |
Wenn Sie nun mehrere Zeilen und Spalten wollen, probieren Sie diesen Code:
<table>
<tr>
<td>Zeile 1, Zelle 1 </td>
<td>Zeile 1, Zelle 2 </td>
<td>Zeile 1, Zelle 3 </td>
</tr>
<tr>
<td>Zeile 2, Zelle 1 </td>
<td>Zeile 2, Zelle 2 </td>
<td>Zeile 2, Zelle 3 </td>
</tr>
</table>
In diesem Beispiel wird mit <table> die Tabelle geöffnet. In diesem Beispiel haben wir keinen Rahmen. Danach wird mit <tr> die erste Zeile. Innerhalb der ersten Zeile kommen nun 3 Spalten jeweils mit <td>, danach wird die erste Zeile mit </tr> geschlossen und die zweite Zeile mit <tr> beginnt usw. Es ist also gar nicht so schwierig, mit HTML eigene Tabellen zu erstellen. Das obige Beispiel erzeugt folgendes:
Zeile 1, Zelle 1 |
Zeile 1, Zelle 2 |
Zeile 1, Zelle 3 |
Zeile 2, Zelle 1 |
Zeile 2, Zelle 2 |
Zeile 2, Zelle 3 |
Wenn Sie verstanden haben, in welcher Reihenfolge die einzelnen Tags geöffnet und geschlossen werden, wird das Erstellen von Tabellen ein kinderspiel. Im Grunde sind es folgende Schritte:
Wenn Sie sich an dieses Schema halten, kann eigentlich nichts schiefgehen. Beachten Sie bitte, dass es eine vielzahl von Tabellen Optionen gibt, die eine umfangreiche Gestaltung von Tabellen ermöglichen.