zurück zur Einleitung Startseite
Tabellen
Inhalt
Formatierung einer Tabelle
Ausrichtung in den Zellen
Rahmen und Zwischenräume
Farbgestaltung
Allgemeines
Die Tabelle ist ein wichtiges Gestaltungsmittel im HTML. Mit ihrer Hilfe können Texte, Bilder und Schaltflächen nach Wunsch angeordnet werden. Gleichzeitig kann sie auch als optisches Element fungieren, z.B. zum Hervorheben und oder Einrahmen bestimmter Elemente in der Tabelle.
Die Formatierung einer Tabelle wird im eröffnenden Table -Tag vorgenommen.Sie bestimmt das Gesamtbild der Tabelle. Zusätzlich können die Reihen, als auch die einzelnen Zellen anders gestaltet werden. Der nachfolgende Table - Tag bezieht sich auf die Tabelle mit den Zellausrichtungen
<table width="100%" border="4" cellspacing="3" cellpadding="2" bordercolorlight="#FFCC99" bordercolordark="#CC9933" bordercolor="#CC9966">
Hier wird die Größe der Tabelle mit den Begriffen "width"
für Breite und "heigth" für Höhe festgelegt. Die Werte
können entweder in Prozent (%) oder in Pixel (px) angegeben werden. Sie
können aber auch für den einen Wert in Prozent und für den anderen
Wert in Pixel angegeben werden.
Wichtig ist zu wissen, dass die Inhalte die Größe der Tabelle beeinflußen
können, nämlich dann wenn diese die Tabellenmaße überschreiten.
Die Breite und Höhe der Reihen (Rows) und Spalten (Cols) sowie der Zellen
wird auf gleicher Weise bestimmt. Dabei sollte man auf die Schlüssigkeit
der Werte achten.
Text- und Objektausrichtung in den Zellen einer Tabelle
|
<td align="left" valign="bottom> Links unten |
Links mitte <td align="left" valign="middle"> |
Links oben <td align="left" valign="top"> |
Links Grundlinie <td align="left" valign="baseline"> |
|
<td align="center" valign="bottom"> Zentriert unten |
Zentriert mitte <td align="center" valign="middle"> |
Zentriert oben <td align="center" valign="top"> |
Zentriert Grundlinie <td align="center" valign="baseline"> |
|
<td align="right" valign="bottom"> Rechts unten |
<td align="right" valign="middle"> Rechts mitte |
Rechts oben <td align="right" valign="top"> |
Rechts Grundlinie <td align="right" valign="baseline"> |
Rahmen und Zwischenräume der Tabelle und der Zellen
Der Rahmen kann als Gestaltungsvariante einer Tabelle bzw. Zelle genutzt werden. Wird die Tabelle nur als ordnendes Intrument genutzt, setzt man die Rahmenstärke gewöhnlich auf Null um ihn unsichtbar werden zulassen.
Beispiel:
<table width="100%" border="0" cellspacing="3" cellpadding="2">
| Inhalt | |
Cellspacing= "n" gibt den Wert für den Raum zwischen
den Zellen untereinander und zur Tabelle an.
Cellpadding="n" definiert den Abstand des Inhaltes der Zellen zur
Zellinnenbegrenzung.