Tutorials – Webdesign
9. Tabellen
Tabellen sind durch Zweckentfremdung ein wichtiges Gestaltungsmittel geworden: viele Leute bauen ihre Webseitenlayouts mit
Tabellen, wobei diese nicht unbedingt dafür gemacht sind. Sicherlich geht es, aber mit einem CSS-Layout fährt man doch sehr viel besser (schnellere Ladezeiten, Layout jederzeit durch wenige Handgriffe komplett veränderbar usw.).Der eigentliche Sinn einer Tabelle ist die (tabellarische) Anordnung von Daten und Informationen. Dies können Texte, Bilder, Links usw. sein.
Eine Tabelle wird von folgenden Tags umschlossen:
<table> ... </table>
Sie besteht aus mehreren Zeilen (tr 
table row = Tabellenzeile), welche in Zellen (td table data = Tabellendaten) aufgeteilt sind. In den Zellen steht dann der eigentliche Inhalt.
Eine Tabelle ist also wie folgt aufgebaut:
<table>
<tr>
<td> ...Text in Zeile 1, Spalte 1... </td>
<td> ...Text in Zeile 1, Spalte 2... </td>
</tr>
<tr>
<td> ...Text in Zeile 2, Spalte 1... </td>
<td> ...Text in Zeile 2, Spalte 2... </td>
</tr>
</table>
Damit ein Gitternetz sichtbar wird, muss dem table-Tag noch das Attribut "border" mit dem Wert 1 (je höher der Wert, umso dicker wird der Tabellenrahmen) hinzugefügt werden, dass es so aussieht:
<table border="1">
...
</table>
Bei Tabellen stehen uns zahlreiche Attribute zur Verfügung, um diese nach unseren Wünschen zu formatieren.
Folgende Möglichkeiten gibt es, die ganze Tabelle mittels <table>-Tag anzupassen:
align="left"
richtet die gesamte Tabelle innerhalb des Browserfensters aus
Werte: "left" oder "right" oder "center"
width="500"
gibt die Breite der Tabelle in Px an, Prozentangaben sind auch möglich; benötigt der Inhalt einer Tabelle mehr Platz, wird der Wert ignoriert
Werte: z.B. "400" oder "80%"
height="800"
gibt die Höhe der Tabelle in Px an, Prozentangaben sind auch möglich; benötigt der Inhalt einer Tabelle mehr Platz, wird der Wert ignoriert
Werte: z.B. "800" oder "90%"
border="1"
erzeugt einen Rahmen um die Tabelle; bei einer unsichtbaren Layout-Tabelle, sollte immer border="0" gesetzt sein
Werte: z.B. "4"
bordercolor="#000000"
6-stelliger Farbwert (siehe Kapitel 5) für den Rahmen; es ist empfehlenswerter, den Rahmen mit CSS zu stylen
Werte: z.B. "#ffffff" oder "blue"
bgcolor="#ffffff"
6-stelliger Farbwert (siehe Kapitel 5) für den Hintergrund der Tabelle, überdeckt die Hintergrundfarbe der Seite
Werte: z.B. "#444444" oder "red"
background="URL_des_Bildes"
fügt ein Hintergrundbild ein
Werte: absoluter oder relativer Pfad zum Bild
cellpadding="10"
gibt den Abstand vom Text / Bild des Zelleninhaltes zum Rand der Zelle in Px an
Werte: z.B. "50" oder "5"
cellspacing="3"
gibt die Breite der Zellränder in Px an
Werte: z.B. "10" oder "40"
Natürlich kann man auch einzelne Zeilen im <tr>-Tag anpassen:
align="left"
richtet die Inhalte einer Zeile horizontal aus
Werte: "left" oder "right" oder "center" oder "justify"
valign="top"
richtet die Inhalte einer Zeile vertikal aus
Werte: "top" oder "middle" oder "bottom"
bgcolor="#ffffff"
6-stelliger Farbwert (siehe Kapitel 5) für den Hintergrund der Zeile, überdeckt die Hintergrundfarbe der Seite
Werte: z.B. "#444444" oder "red"
Ebenso kann man auch einzelne Zellen mit <td>-Tag anpassen:
align="left"
richtet die Inhalte einer Zelle horizontal aus
Werte: "left" oder "right" oder "center" oder "justify"
valign="top"
richtet die Inhalte einer Zelle vertikal aus
Werte: "top" oder "middle" oder "bottom"
width="200"
gibt die Breite der Zelle in Px an, Prozentangaben sind auch möglich; benötigt der Inhalt einer Zelle mehr Platz, wird der Wert ignoriert
Werte: z.B. "300" oder "60%"
height="600"
gibt die Höhe der Zelle in Px an, Prozentangaben sind auch möglich; benötigt der Inhalt einer Zelle mehr Platz, wird der Wert ignoriert
Werte: z.B. "445" oder "40%"
colspan="3"
definiert, dass sich eine Zelle über die angegebene Anzahl von Spalten der Tabelle erstrecken soll
Werte: z.B. "3"
rowspan="5"
definiert, dass sich eine Zelle über die angegebene Anzahl von Zeilen der Tabelle erstrecken soll
Werte: z.B. "4"
Gerade Tabellen sind für einen HTML-Neuling immer sehr verwirrend. Da helfen WYSIWYG-Editoren meist Wunder und erleichtern die Erstellung ungemein :)
Hier ist wohl "üben üben üben" angesagt, so schwer ist es nicht.
© since 2002 by Otaku-Welt.de