Tabellen als Struktur- und Seitenlayout-Hilfsmittel

Bisher hast Du in erster Linie gelernt, wie man Informationen gemäß dem Grundkonzept von HTML im WWW öffentlich zugänglich macht. Informationen in Textform wurden lediglich logisch strukturiert und ausgezeichnet. Auch die eingefügten Grafiken sind bisher nur begrenzt als stilistisches Mittel einsetzbar. Man kann aber trotz der Beschränkungen, die Konsequenz dieses Konzept sind, mit einigen "Layout-Hilfsmitteln" die Elemente besser strukturieren und auf der Website unter gestalterischen Gesichtspunkten besser anordnen.
Hier lernst Du nun die Funktionen kennen, die Tabellen in HTML-Dokumenten erfüllen können und wie man Tabellen in HTML darstellt.

Themen in diesem Abschnitt:

• Die Funktionen von HTML-Tabellen
• Das Grundgerüst einer Tabelle
• Das Tabellen-Gitternetz
• Verbinden von Zellen einer Tabelle
• Tabellen als Layout-Hilfsmittel
• Tabellen und die Verwendung von Farben
• Tabellen und die Verwendung von Hintergrundbildern
• Tabellengröße: Mögliche Breiten- und Höhenangaben
• Die Ausrichtung der Tabelle und ihrer Inhalte
• Fließtext neben Tabellen
• Der Mehrspaltensatz

Die Funktionen von HTML-Tabellen

Hauptsächlich dienen Tabellen zur strukturierten Darstellung von Daten in beliebigen Formen (zum Beispiel Text, Zahlen, Grafiken usw.). Tabellen auf Web-Seiten werden jedoch häufig auch als Seitenlayout-Hilfsmittel eingesetzt, um vor allem Text und Grafiken attraktiver auf dem Bildschirm zu verteilen. Dazu teilt die Tabelle die Website in verschiedene feststehende Bereiche, in die dann beliebig Text bzw. Grafiken plaziert werden können. Solche Tabellen zeigt der Browser in der Regel nicht an. Sie werden daher als unsichtbare Tabellen bezeichnet. Man erkennt jedoch die Verwendung von unsichtbaren Tabellen als Layout-Hilfsmittel relativ einfach daran, dass beim Verkleinern des Browser-Fensters die Objekte immer an derselben Stelle und gleich groß bleiben. In diesem Fall wurden nämlich Tabellen mit absoluter Größenangabe verwendet.
Ein Problem bei der Verwendung von Tabellen ist, dass die derzeitigen Browser den Tabelleninhalt erst dann anzeigen, wenn die Tabelle an sich vollständig geladen wurde. Ein weiteres Problem stellt die Tatsache dar, dass Tabellen als Hilfsmittel beim Seitenlayout dem Grundkonzept von HTML widersprechen. In diesem Fall wird ein Element zur inhaltlichen Strukturierung von Daten zum Layout eingesetzt. Deshalb plädiert das W3C in seinem HTML 4.0-Standard dafür, Tabellen zum Seitenlayout zu vermeiden. Ein letztes Problem von Tabellen besteht darin, dass eine solche Seite kaum mehr für nicht-visuelle Medien (zum Beispiel Sprachausgabe) zugänglich ist. Tabellen sollten daher mindestens durch eine beschreibenden Zusammenfassung ergänzt werden.

Das Grundgerüst einer Tabelle

Je nach Zielsetzung werden Tabellen mit Gitternetzlinien (für tabellarische Daten) oder ohne sichtbare Rahmenlinien (zum Beispiel für die Darstellung von Text in mehreren Spalten oder für das gezielte Anordnen von Text und Grafik auf der Web-Seite) erstellt. Eine Tabelle wird wie folgt definiert:

<TABLE [border="n"] [summary="Zusammenfassung"]>
 <TR>
  <TH>Kopfzelle: 1. Zeile 1. Spalte</TH>
  <TH>Kopfzelle: 1. Zeile 2. Spalte</TH>
  <TH>Kopfzelle: 1. Zeile 3. Spalte</TH>
 </TR>
 <TR>
  <TD>Datenzelle: 2. Zeile 1. Spalte</TD>
  <TD>Datenzelle: 2. Zeile 2. Spalte</TD>
  <TD>Datenzelle: 2. Zeile 3. Spalte</TD>
 </TR>
 <TR>
  <TD>Datenzelle: 3. Zeile 1. Spalte</TD>
  <TD>Datenzelle: 3. Zeile 2. Spalte</TD>
  <TD>Datenzelle: 3. Zeile 3. Spalte</TD>
 </TR>
</TABLE>

Der Tabellen-Bereich wird vom einleitenden Tag <TABLE> (table = Tabelle) und vom abschließenden Tag </TABLE> umschlossen. Durch das Attribut border (border = Rand) kann die Anzeige von Gitternetzlinien für die gesamte Tabelle beeinflußt werden. Bei sogenannten blinden Tabellen läßt man dieses Attribut und somit die Rahmenlinien weg. Das Attribut summary wird in den Fällen verwendet, in denen der Tabelle zusätzlich eine zusammenfassende Beschreibung zugeordnet werden soll. Diese Beschreibung kann von einer Sprachausgabe interpretiert und vorgelesen werden.
Um die Tabelle auszufüllen, werden in einem nächsten Schritt Zeilen und Spalten definiert. Im Normalfall besteht eine Tabelle aus mehreren Zeilen. Sie muß jedoch mindestens eine Zeile besitzen. Die Spalten einer Tabelle ergeben sich aus den Zellen pro Zeile. Jede Zeile muß mindestens eine Zelle enthalten. Normalerweise besteht sie aus mehreren Zellen.
Das Tag <TR> (tr = table row = Tabellenzeile) steht für den Beginn einer Tabellenzeile. Danach werden die Spalten (Zellen) der betreffenden Zeile definiert. Für eine Tabelle kann zwischen Kopfzellen <TH> (th = table header = Tabellenkopf) und den normalen Datenzellen <TD> (td = table data = Tabellendaten) gewählt werden. Der Inhalt einer Zelle folgt jeweils nach dem Tag. Dabei ist er relativ frei wählbar, das heißt, dass sich in einer Tabellenzelle außer normalem Text auch Verweise oder Grafiken befinden können. Es ist sogar möglich, innerhalb einer einzelnen Zelle eine weitere Tabelle zu definieren.
Wie schon erwähnt können in der ersten Tabellenzeile sogenannte Kopfzellen <TH> definiert werden. Diese formatiert der Web-Browser anders als die "normalen" Tabellenzellen. In der Regel werden Kopfzellen fett und zentriert dargestellt.
Die Anzahl der Zellen sollte in jeder Tabellenzeile gleich sein, damit die dargestellte Tabelle durchweg dieselbe Anzahl von Spalten besitzt. Zellen können auch leer, das heißt ohne Inhalt bleiben. In diesem Fall wird zwischen die beiden TD-Tags einfach nichts oder ein nicht sichtbarer (interner) Kommentar notiert. Viele Browser zeigen die entsprechende Zelle dann allerdings als nicht vorhanden an. Dies kann man umgehen, indem man zwischen die beiden TD-Tags ein geschütztes Leerzeichen setzt.
Achtung: Die abschließenden Tags </TH>, </TD> und </TR> sind im Gegensatz zu früheren HTML-Standards nicht mehr erforderlich und in HTML 4.0 deshalb nicht mehr vorgesehen.

Das Tabellen-Gitternetz

Im Abschnitt zum Grundgerüst einer Tabelle wurde bereits das Attribut border eingeführt. Damit kann man die Dicke des Außenrahmens in Pixeln festlegen.

<TABLE border[="n"]>
...
</TABLE>

Border bewirkt also die Rahmung einer Tabelle insgesamt. Wird kein Wert spezifiziert, so nimmt der Rahmen standardmäßig eine Breite von 2 Pixeln an. Durch border=n kann jedoch diese Breite individuell festgelegt werden.
Der HTML 4.0-Standard plädiert mittlerweile allerdings dafür, das Attribut border nicht mehr in diesem generellen Kontext zu verwenden, sondern an dessen Stelle zwischen frame (für den äußeren Tabellenrand), border (Dicke des äußeren Rahmens in Pixel) und rules (für die Zwischenlinien) zu differenzieren. Folgende Optionen existieren für die geannten Attribute:

<TABLE frame=void|above|below|hsides|vsides|lhs|rhs|box|border
border="n"
rules=none|groups|rows|cols|all>
...
</TABLE>

Hier findet man ein Dokument mit Erläuterungen zu diesen Optionen.

Achtung: Durch den Netscape Navigator werden die Attrubute frame und rules bisher nicht interpretiert. Bei Verwendung dieses Browsers ist die Definition von Tabellenlinien nur mit dem border-Attribut möglich.

Weiterhin ist eine Bestimmung der Dicke der Gitternetzlinien zwischen den Zeilen und Spalten einer Tabelle in Pixeln mit dem Attribut CELLSPACING möglich. Damit die Tabelle überhaupt Gitternetzlinien enthält, muß mit border die Außenrahmendicke angegeben werden. Durch CELLSPACING=[Pixel] wird dann die Dicke der Gitternetzlinien innerhalb der Tabelle festgelegt (CELLSPACING = Zellenbemaßung).

Eine letzte Möglichkeit, die an dieser Stelle erwähnt werden soll, ist die Definition des Abstandes der Zellendaten zum Zellenrand. Auch der Randabstand wird in Pixeln bestimmt. Das dafür notwendige Attribut CELLPADDING (CELLPADDING = Zelleninhaltbemaßung) ist sowohl für Tabellen mit Gitternetzlinien als auch für blinde Tabellen gültig.

Verbinden von Zellen einer Tabelle

Zum Verbinden von Tabellenzellen (einschließlich Kopfzellen) werden die Attribute colspan (column span = Spalten spannen) und rowspan (row span = Zeilen spannen) verwendet. Werden mehrere Zellen innerhalb einer Zeile verbunden, so erstreckt sich die Spalte in dieser Zeile über mehrere Spalten hinweg. verbindet man hingegen mehrere Zellen in einer Spalte, so erstreckt sich eine Zeile in dieser Spalte über mehrere Zeilen hinweg. Beide Attribute kann man auch kombiniert verwenden. das HTML-Markup sieht folgendermaßen aus:

n gibt also die Anzahl der Tabellenspalten bzw. -zeilen an, über die sich die neue Zelle erstrecken soll. Diese Angaben werden allerdings nur dann wirksam, wenn die Tabelle mindestens soviel Spalten bzw. Zeilen besitzt wie angegeben. Die Summen der Zellen pro Tabellenzeile bzw. Tabellenspalte müssen jeweils gleich sein. Wenn zum Beispiel in einer Tabellenzeile eine Zelle über drei Spalten hinweg "gespannt" werden soll, dann müssen in anderen Zeilen dieser Tabelle anstelle dieser einen Zelle mindestens drei eigene Zellen definiert werden.

Tabellen als Layout-Hilfsmittel

Wie schon erwähnt werden Tabellen sehr häufig als Hilfsmittel beim Seitenlayout eingesetzt. Im folgenden Abschnitt lernst Du, welche Möglichkeiten Tabellen in dieser Richtung bieten. Schau Dir einfach einmal das Beispiel an. Am Ende dieses Kapitels kannst Du versuchen, ob Du es mit dem Gelernten selbst reproduzieren kannst.

Tabellen und die Verwendung von Farbe

Normalerweise besitzen Tabellen keine individuelle Hintergrundfarbe, sondern richten sich nach den Dokumentvorgaben. Es ist allerdings möglich, eigene Hintergrundfarben für die gesamte Tabelle, ganze Tabellenzeilen oder einzelne Zellen (<TD> oder <TH>) auszuwählen. Das HTML-Markup sieht wie folgt aus:

Tabellen und die Verwendung von Hintergrundbildern

Für Tabellen kann man eigene Hintergrundbilder/-muster (Wallpaper) festlegen. Das Vorgehen gleicht dem für das gesamte Dokument. Ähnlich wie bei den Hintergrundfarben ist es möglich, Hintergrundbilder für die gesamte Tabelle oder für einzelne Zellen (<TD> oder <TH>) zu definieren:

Tabellengröße: Mögliche Breiten- und Höhenangaben

Man kann die Tabelle in Gesamtbreite und Gesamthöhe auf ein bestimmtes Maß bringen. Die Breite einer Tabelle wird mit dem Attribut width definiert:

Durch das Attribut width (width = Breite) im einleitenden TABLE-Tag zeigt der Browser die Tabelle so breit an, wie angegeben wurde. Man kann entweder eine Zahl (die als Pixelangabe interpretiert wird) oder einen Prozentwert angeben. Bei Angabe der Zahl "500" wird die Tabelle 500 Pixel breit dargestellt. Durch die Angabe des Wertes "80%" erreicht man, dass die Tabelle maximal 80% des Anzeigefensters einnimmt. Bei Tabellen in Tabellen wird die Tabelle relativ zur umgebenden Tabelle dargestellt.
Die Tabellenhöhe kann auf gleiche Weise erzwungen werden. Das Attribut height (height = Höhe) wird zwar im HTML 4.0-Standard nicht erwähnt. Tabellenfähige Browser interpretieren dieses Attribut trotzdem.
Achtung: Eine Tabelle ist immer mindestens so groß wie ihr Inhalt. Eine Spalte ist zum Beispiel immer so breit wie ihr längstes Wort. Absolute Breiten- und Höhenangaben werden daher erst wirksam, wenn der Tabelleninhalt kleiner ist, so dass ein leerer Raum entsteht. Wenn der Tabelleninhalt größer ist, dann dimensioniert der WWW-Browser die Tabelle so, dass ihr gesamter Inhalt angezeigt wird. Wird zum Beispiel eine absolute Größenangabe gemacht und ein größeres Bild eingefügt, dann streckt er die Tabelle.

Weiterhin ist es möglich, die Breite von einzelnen Spalten und die Höhe von einzelnen Zeilen zu erzwingen. In diesem Fall werden ebenfalls die Attribute width und height verwendet. Man notiert sie dann im einleitenden Tag einer Kopf- oder Datenzelle (<TH> oder <TD>). Auch hier sind wieder absolute sowie relative Angaben erlaubt. Mit dem Attribut width wird eine bestimmte Spaltenbreite erzwungen. Die Angabe ist spaltenweit gültig. Sie muß daher nur einmal, am sinnvollsten in der ersten Zeile der Tabelle, notiert werden. Das Attribut height im einleitenden Tag einer Kopf- oder Datenzelle erzwingt die Höhe einer gesamten Tabellenzeile. Auch diese Angabe muß daher nur einmal, am sinnvollsten in der ersten Zelle einer Zeile, notiert werden. Auch hier muß wiederum beachtet werden, dass absolute Angaben erst wirksam werden, wenn der Inhalt in jeder Zelle einer Spalte bzw. Zeile kleiner ist als die absolute Größenangabe. Erzwungene Zeilenhöhen und erzwungene Spaltenbreiten sind auch miteinander kombinierbar.
Eine ausführlichere Darstellung dieser Optionen findet man zum Beispiel in dem entsprechenden Kapitel von Selfhtml.

Die Ausrichtung der Tabelle und ihrer Inhalte

Die gesamte Tabelle wird mit dem Attribut align ausgerichtet. Das HTML-Markup sieht folgendermaßen aus:

Tabellen können also, ähnlich wie Textkörper links, zentriert oder rechts ausgerichtet werden.

Der Inhalt von Kopfzellen (<th>) wird in horizontaler Richtung standardmäßig zentriert gesetzt der von Datenzellen (<td>) linksbündig. Der Zellinhalt kann jedoch auch anders ausgerichtet werden.

Die Ausrichtung des Inhalts als Blocksatz (justify) wird jedoch von älteren Browsern nicht unterstützt.
Um den Inhalt aller Zellen einer Zeile gleich auszurichten, kann das Attribut align (align = Ausrichtung) auch im einleitenden Tag der Zeile (<TR>) plaziert werden.

Gibt es keine absolute Höhenangabe für eine Tabellenzeile, dann bestimmt die Zelle mit dem meisten Inhalt die Höhe der Zeile. Die Inhalte der restlichen Zellen der entsprechenden Zeile werden dann jeweils mittig gesetzt. Es ist jedoch auch möglich, Zelleninhalte oben- und untenbündig auszurichten. Die vertikale Ausrichtung des Zelleninhalts geschieht mit dem Attribut valign (valign = vertical align = vertikale Ausrichtung):

Auch in diesem Fall kann man alle Zellen einer Zeile gleich ausrichten, indem man die Angaben zur Ausrichtung im einleitenden Tag der Zeile (<TR>) notiert. Horizontale und vertikale Ausrichtungen der Zelleninhalte können übrigens beliebig miteinander kombiniert werden.

Fließtext neben Tabellen

Es gibt Tabellen, die nicht die gesamte Breite des Browser-Fensters beanspruchen. In einem solchen Fall ist es möglich, Text links oder rechts neben die Tabelle zu setzen:

Durch das Attribut width="n%" begrenzt man die Tabelle in ihrer Breite und schafft somit Platz für den Text, der neben ihr stehen soll. Diese Begrenzung ist bei kleinen Tabellen nicht notwendig. Wenn die Tabelle aber selbst größere Inhalte hat, dann muß die Gesamtbreite der Tabelle erzwungen werden. Mit der Angabe width=50% bewrikt man beispielsweise, dass die Tabelle nur 50% der Breite des Anzeigefensters einnimmt.
align="left|right" richtet die gesamte Tabelle links bzw. rechts aus. Der folgende Text kann nun rechts bzw. links daneben gesetzt werden. Durch align="center" würde die Tabelle zentriert ausgerichtet werden. In diesem Fall können nachfolgende Elemente jedoch nicht um die Tabelle fließen. Im umfließenden "Text" dürfen alle HTML-Elemente zur Gestaltung stehen (zum Beispiel Überschriften, Listen, Grafiken oder sogar weitere Tabellen).
Wird nichts weiter angegeben, umfließt der Text die Tabelle ohne sichtbaren Abstand. Um vertikalen bzw. horizontalen Abstand zwischen Tabelle und Text zu bringen, verwendet man die Attribute vspace=[Pixel] (vspace = vertical space = vertikaler Abstand) bzw. hspace=[Pixel] (hspace = horizontal space = horinzontaler Abstand). Damit wird der Abstand des Textes oberhalb und unterhalb der Tabelle bzw. der seitliche Abstand zwischen Tabelle und dem umfließenden Text in Pixeln bestimmt. Diese Abstandsangaben sind allerdings noch kein offizieller HTML-Standard und werden bisher nur von neueren Netscape-Browsern interpretiert.
Es ist zudem möglich, den Text neben der Tabelle an einer selbst gewählten Stelle zu unterbrechen und unterhalb der Tabelle fortzusetzen. Dafür wird an der gewünschten Position im Text ein Umbruch mit der Angabe <br clear=all> erzwungen (br = break = Umbruch, clear = löschen, all = alles). Falls neben der Tabelle kein Text stehen soll, verzichtet man einfach auf die Ausrichtung der Tabelle durch align="left" bzw. align="right".
Achtung: Dasselbe Phänomen, ein Fließtext, ist auch bei eingefügten Grafiken möglich. Dafür werden dieselben Spezifikationen verwendet wie eben beschrieben. Der Unterschied besteht nur darin, dass diese innerhalb des Image-Tags notiert werden (<IMG SRC="grafikdatei" align="left|right" [hspace="n" vspace="n"]>). Auch hier heißt das "Zauberwort" align. Das bedeutet, die Grafik muß unbedingt rechts- oder linksbündig ausgerichtet werden.

Der Mehrspaltensatz

Mehrspaltige blinde Tabellen können sehr gut dazu genutzt werden, den Text im Stil einer Zeitung in mehreren Spalten darzustellen. Ein anschauliches Beispiel für die Anwendung des Mehrspaltensatzes und der Verwendung von Fließtext um ein eingefügtes Bild herum findet sich in Selfhtml. Das HTML-Markup für den Mehrspaltensatz sieht wie folgt aus:

Mit diesem Markup werden also drei Spalten definiert, die sich über das ganze Anzeigefenster erstrecken und annähernd gleich groß sind (33% + 33% + 34% = 100%). Dazu wird das Attribut width verwendet. Wie schon gesagt können innerhalb der Spalten beliebige HTML-Elemente stehen. Werden aber zum Beispiel Grafiken eingefügt, die zu breit sind, sprengen sie die erzwungenen Spaltenbreiten.
Es ist möglich, dass die Inhalte der drei Spalten unterschiedlich lang sind. Deshalb werden mit valign="top" im einleitenden Tag der Zeile alle Inhalte obenbündig ausgerichtet. Trotzdem sollten die Inhalte der Spalten in etwa gleich lang sein. Außerdem sollten die Spalten nicht mehr Inhalt enthalten, als ein Bildschirm mit einer Auflösung von 600 x 480 Pixeln anzeigen kann. Andernfalls müßte der Leser dauernd scrollen. Wenn mehr Inhalt angezeigt werden soll, fügt man einfach eine weitere Tabellenzeile ein.

Nun bist Du an der Reihe! Erinnerst Du Dich an die Aufgabe vom Beginn dieses Abschnittes? Du sollst versuchen, das folgende Layout selbst zu reproduzieren. Die notwendigen Grafikdateien findest Du hier: Bild 1, Bild 2, Bild 3 und Bild 4. Falls Du nicht weiterkommst, schau Dir als Lösungshilfe den dazugehörigen Quelltext an.