*** Tabellen-Struktur ***
Mit Hilfe von Tabellen lassen sich nicht nur Daten übersichtlich aufbereiten,
man kann damit auch die ganze Webseite in verschiedene Bereiche aufteilen
und so übersichtlich strukturieren.
Angeblich läßt sich jedoch eine Webseite eleganter und einfacher mit
StyleSheets gestalten.
< table border="2"; width="100%"
bgcolor="#FAFAD2">
bordercolor="green"
~ : ~
~ : ~
< /table >
... definiert die Tabelle, in der dieser Text hier steht:
border= "#" _______ bestimmt die Breite des äußeren Randes
border= "0" _______ wäre ganz ohne Ränder.
width= "800" ______ bestimmt die Breite der Tabelle in Pixel
width="100%"_____ paßt die Breite der Größe des Fensters an.
bgcolor="..." ______ bestimmt die Farbe des Hintergrundes
bordercolor="..."___ bestimmt die Farbe des Rahmens
< col width="30%" span="1"/>
< col width="70%" span="1"/>
< /colgroup >
... oder ...
< colgroup width="25%" span="4"/>
... bestimmt die Größe der Spalten:
width= "250" ____ bestimmt die Breite der Spalte in Pixel
width= "30%" ___ paßt die Breite der Spalte der Tabellenbreite an.
span= "#"_______ bestimmt, für wieviele Spalten die Anweisung gilt.
In einem <colgroup>-Tag sollten alle Spalten definiert sein --- man kann jedoch alle Breitenangaben weglassen, dann bestimmt der Browser die Tabellen- und Spaltenbreite selbst, was allerdings u.U. längere Ladezeiten zur Folge hat.
~ : ~
< /tr >
... bestimmt Anfang und Ende einer Tabellen-Zeile (Table-Row)
~ : ~
< /th >
~ : ~
< /td >
... bestimmt Anfang und Ende einer Daten-Zelle (Table-Data)
colspan= "#" ____ Zellenbreite über mehrere Spalten - wie oberste Zeile dieser Tabelle
rowspan= "#"____ Zellenhöhe über mehrere Zeilen - wie in den nachfolgende Zeilen
... nebenstehende Parameter können in allen Tabellen-Tags eingefügt werden, wo sie Sinn machen.
| align="left" | "center" | "right" | Text-Ausrichtung |
| valign="top" | "middle" | "bottom" | Text-Ausrichtung vertikal |
| bgcolor="farbe" | Hintergrund-Farbe |
| width="#" | Breite in Pixel oder Prozent |
| hight="#" | Höhe in Pixel |
... wie in obenstehender Zeile zu sehen, kann man Tabellen durch entsprechende Tags auch schachteln.
Um so einen "leeren" Tabellen-Eintrag wie links zu erstellen benutzt man die Codierung <td>   </td>;.
... und nun zu den Feinheiten ...
~ : ~
< /thead >
... kennzeichnet Definitionen, die zum Kopf (Head) der Tabelle gehören ...
~ : ~
< /tbody>
... kennzeichnet Definitionen, die zum Tabellen-Inhalt (Body) der Tabelle gehören ...
~ : ~
< /tfoot>
... kennzeichnet Definitionen, die zu den Fußzeilen (Foot) der Tabellen Tabelle gehören ...
... beim Ausdrucken sollte der Browser die Kopf- und Fußzeilen auf jeder Seite wiederholen ....