VI. Tabellen
Da HTML hinsichtlich der
Seitengestaltung wenig Spielräume zuläßt, eignen sich Tabellen
nicht nur zur Darstellung tabellarischer Übersichten, sondern auch, um Text und Bilder in einer bestimmten Weise anzuordnen und zuzuordnen: In jede Spalte und jede Reihe einer Tabelle lassen sich Text und/oder Bilder oder Grafiken integrieren.
Eine Tabelle wird grundsätzlich durch den Tag <table> eingeleitet und durch den Tag </table> beendet. Reihen werden durch den Tag <tr> erzeugt und Spalten durch den Tag <td>. Eine Tabelle mit zwei Reihen und drei Spalten sieht dann folgendermaßen aus:
<table>Innerhalb dieser Tabellenspalten (also bei: xxxxx) können andere HTML-Tags verwendet werden: Bilder,
<tr>
<td>xxxxxxxx<td>xxxxxxxxx<td>xxxxxxxx
<tr>
<td>xxxxxxxx<td>xxxxxxxxx<td>xxxxxxxx
</table>
tab1.htm (Einfache Tabelle)
Links, Mailto-Funktionen, Aufzählungen etc. Das macht die Arbeit mit Tabellen sehr flexibel.
Wichtig innerhalb der Syntax des "table-Tags" sind zwei Attribute: border und cellpadding, wobei "border" bestimmt, ob um eine Tabelle herum ein Rahmen erscheint und "cellpadding" den Abstand angibt, der zwischen Objekt und Rahmen der Tabelle bestehen soll:
<table border=0>z. B. sorgt dafür, daß kein Rahmen um die Tabelle erzeugt wird.
<table border=10>z. B. sorgt dafür, daß ein Rahmen mit einer Pixelbreite von 10 um die Tabelle und die einzelnen Spalten und Reihen erzeugt wird.
Ebenso sorgt
<table cellpadding=0>dafür, daß kein Abstand zu den Rändern einer Tabelle erzeugt wird, während
<table cellpadding=10>dafür sorgt, daß ein Abstand mit 10 Pixeln zum Rahmen der Tabelle erzeugt wird.
Für die Anordnung von Objekten oder Text innerhalb der Tabellen gibt es zahlreiche Attribute, die als Attribute des <td>-Tags aufgeführt werden müssen:
| <td align=right> | der Inhalt der Spalte wird rechtsbündig angeordnet |
| <td align=left> | der Inhalt der Spalte wird linksbündig angeordnet |
| <td align=center> | der Inhalt der Spalte wird zentriert angeordnet |
| <td valign=top> | der Inhalt der Spalte wird am oberen Rand der Spalte angeordnet |
| <td valign=middle> | der Inhalt der Spalte wird vertikal zentriert angeordnet |
| <td valign=bottom> | der Inhalt der Spalte wird am unteren Rand der Spalte angeordnet |
Darüber hinaus gibt es auch die Möglichkeit, die genaue Breite und Höhe einer Spalte in Pixeln zu definieren:
<td width=200 height=300>Diese Syntax definiert eine Tabellenspalte von 200 Pixeln Weite und einer Höhe von 300 Pixeln. Eine andere Syntax erlaubt es auch, über das width-Attribut die ganze Tabelle in Prozentzahlen zu untergliedern. Das folgende Beispiel geht von einer Tabelle mit vier prozentual definierten Tabellenspalten aus, wobei die erste und die letzte Spalte 10% der gesamten Tabelle ausmachen sollen und für die beiden mittleren jeweils 40% der Tabellenweite reserviert werden sollen:
<table border=0 width=100% cellpadding=10>Diese Syntax hat im Vergleich mit einer fest definierten Weite den Vorteil, daß man sich nicht um das ausrechnen der optimalen Breite Tabellenspalten kümmern muß.
<tr>
<td width=10%>
<td width=40%>
<td width=40%>
<td width=10%>
</table>
 Zum Seitenanfang
|