Tabellen

Eine einfache Methode eine Seite in rechteckige Bereiche einzuteilen bieten Tabellen. Dabei können die Bereiche unsichtbar sein, womit z.B. Texte neben Grafiken erstellt werden können, oder die Darstellung mehrspaltigen Textes ermöglicht wird, als auch sichtbar mit Randbegrenzung, also im Sinne einer Tabelle erfolgen. Zur Kennzeichnung dient das TABLE-Element:

<TABLE> ..... </TABLE>

Die Reihen der Tabelle werden mit dem Table-Row-Element festgelegt:

<TR> .... </TR>

Die einzelnen Felder einer Reihe - in der Gesamtheit ergeben diese die Spalten - werden mit dem Table-Data-Element definiert:

<TD> .... </TD>

Beispiel 10

Darstellung im BrowserAnzeige des Quelltextes


Beachten Sie, dass die Anzahl der Felder in jeder Reihe gleich ist, da sonst die Tabelle am Ende Lücken aufweist. Falls kein Rand gesetzt wird, sind Lücken allerdings unerheblich. Als Daten können auch Bilder etc. dienen.
Das Setzen des Rahmens (BORDER) wird durch das Attribut des TABLE-Elements festgelegt. Auch das TD-Element verfügt über einige interessante Attribute.

Tabellen können auch geschachtelt werden, d.h. dass innerhalb eines TD-Elements auch eine Tabelle eingefügt werden kann.

Außerdem sind Tabellenfelder möglich, die Spalten (Column) überspannen. Hierzu dient das Attribut COLSPAN="Spaltenzahl" im TD-Element. Ebenso kann ein Datenfeld mehrere Reihen (Row) überspannen. Dazu wird ROWSPAN="Reihenzahl" des TD-Elements verwendet.

Überspannte Felder dürfen dann in der Struktur nicht auftauchen. Damit sind der Darstellungsart von Tabellen kaum Grenzen gesetzt.

Beispiel 11

Darstellung im BrowserAnzeige des Quelltextes


Übung

  1. Erzeugen Sie folgende Tabelle:
    Daten1 Daten2 Daten3
    Daten4 Daten5 Daten6 Daten7
    Daten8 Daten9 Daten10

     
  2. Verwenden Sie eine Tabelle um einen Text seitlich von einem Bild über mehrere Zeilen zu erstellen. Richten Sie den Text wahlweise oben, unten oder in der Mitte zentriert neben dem Bild aus.
     
  3. Verteilen Sie mehrere Wörter (z.B. 9) auf einer Seite in Form eines X. Verwenden Sie hierfür eine geeignete Tabelle ohne Rand. Benutzen Sie auch die Attribute für die Größe der Tabelle, bzw. der Felder.


An den Anfang des Kapitels Zurück zu Kapitel 4 HTML-Kurs Inhalt Fortsetzung Kapitel 6