HTML Tabellen - Ein Mittel zur Layoutgestaltung

Grundaufbau Tabellen
Tabellenkörper
Tabellenzeile
Datenzelle
Kopfzelle
Tabellenüberschrift



Grundaufbau Tabellen

Tabellen werden von dem <table>-Tag umschlossen.

Innerhalb dieses <table>-Bereichs wird jede einzelne Zeile mit <tr></tr> definiert.

Innerhalb der so definierten Zeile werden die einzelen Tabellenzellen festgelegt.

Die Anzahl der Tabellenzellen in der ersten Zeile, legt die Anzahl der Spalten in jeder Zeile der gesamten Tabelle fest.

<table>

<tr>
<td>1.Zeile/1.Spalte</td>
<td>1.Zeile/2.Spalte</td>
</tr>

<tr>
<td>2.Zeile/1.Spalte</td>
<td>2.Zeile/2.Spalte</td>
</tr>

</table>
Tabellenkörper

Legt den gesamten Bereich der Tabelle fest.
<table>
Definition der Zeilen
Definition der Zellen
</table>
align="center|right|left"
border="pixel"
width="x%|pixel"
height=" x%|pixel"
cellpadding="pixel"
cellspacing="pixel"
bgcolor="#xxxxxx|farbname"
background="relativer Pfad zur Datei"

Tabellenzeile

Definition einer Zeile der Tabelle.
<tr>
Definition der Zellen
</tr>
align="center|right|left"
valign="top|middle|bottom"
bgcolor="#xxxxxx|farbname"

Datenzelle

Hier wird der eigentliche Inhalt der Tabelle (Text, Grafik, Tabelle) eingefügt.

Attribut-Angaben zur Breite (width) der Datenzelle in der ersten Zeile der Tabelle legen die Breite der gesamten Spalte der Tabelle fest.

<td>
Zelleninhalt
</td>
align="center|right|left"
valign="top|middle|bottom"
width="x%|pixel"
height="x%|pixel"
bgcolor="#xxxxxx|farbname"
background="relative Pfadangabe zur Datei"
colspan="numerische Angabe"
rowspan="numerische Angabe"

Kopfzelle

Datenzelle für Tabellen-Kopfzellen.
Umschlossener Text wird fett und zentriert dargestellt.

<th>
Zelleninhalt
</th>
Attribute wie Datenzelle
Tabellenüberschrift

<caption>
Tabellenüberschrift
</caption>

align="top|bottom|left|right"