Tabellen-Layout

Tabellen werden nicht nur zur tabellarischen Darstellung von Daten genutzt, sondern auch zur Strukturierung einer Webseite (Seitenlayout). Dabei werden aus optischen Gründen in der Regel Tabellen ohne Rahmen - sogenannte blinde Tabellen - verwendet. Durch Verschachtelung mehrerer Tabellen lassen sich auch aufwendige Layouts realisieren.

Ein Problem in Zusammenhang mit Tabellen stellen Breiten- und Höhenangaben dar, die nicht von jedem Browser wie gewünscht interpretiert werden. Grundsätzlich werden Breitenangaben durch das Attribut width, Höhenangaben durch das Attribut height notiert. Als Werte sind sowohl absolute Zahlenangaben (Pixelwerte) als auch prozentuale Angaben (%) erlaubt. Für welches Element darf man nun welches Attribut verwenden?

Breiten- und Höhenangaben

In der "strengen" Fassung von HTML ist nur eine Breitenangabe für die ganze Tabelle erlaubt und sonst gar nichts! Also zum Beispiel

<table width="100%">

Die meisten Browser interpretieren darüber hinaus die folgenden Angaben korrekt:

Tabellenhöhe mit height im table-Element festlegen: <table height="300" ...
Zellenbreite mit width im td- bzw- th-Element festlegen: <td width="20%" ...
Zellenhöhe mit height im td- bzw- th-Element festlegen: <td height="120" ...

Das tr-Element sollte man weder mit width (das macht auch keinen Sinn!) noch mit height formatieren!

Zu beachten:
Die Breiten- und Höhenangaben werden nur umgesetzt, wenn der Tabellen- bzw- Zelleninhalt in den zugewiesenen Raum "hineinpasst". Ist der Inhalt größer, so werden die Angaben außer Kraft gesetzt und die Tabelle bzw. Zelle wird so dimensioniert, dass der gesamte Inhalt sichtbar ist.

Da die Angabe zu width in einer Tabellenzelle spaltenweit gilt, braucht man sie nur einmal pro Spalte zu notieren. Am sinnvollsten ist es, die Angabe in der ersten Zeile der Tabelle zu notieren. Ebenso ist es mit der Angabe zu height in einer Tabellenzelle. Da diese Angabe für die ganze zugehörige Tabellenzeile gilt, ist es am sinnvollsten, sie in der ersten Zelle der Zeile zu notieren. Durch die Angabe von <td width="50%" height="100"> in der 1. Zeile, 1. Spalte einer Tabelle wird somit die Breite der ersten Spalte und die Höhe der ersten Zeile bereits festgelegt.

Innerhalb von Breiten- bzw. Höhenangaben sollte man Pixel- und Prozentwerte nicht miteinander mischen. Also entweder alle Breitenangaben in Pixeln oder aber in Prozent. Gleiches gilt für die Höhenangaben.

Farben und Hintergrundbilder

Einer Tabelle oder auch einer Tabellenzelle lassen sich mit Hilfe des Attributs bgcolor eine Hintergrundfarbe und mit Hilfe des Attributs background ein Hintergrundbild zuweisen.

Aufgabe

Gegeben ist folgendes Beispiel für ein Tabellenlayout:

Bauen Sie dieses Layout (so gut es geht) nach. Alle Grafiken und Texte, die auf der abgebildeten Seite zu sehen sind, können Sie hier als zip-Archiv herunterladen. Laden Sie Ihre Lösung in Ihren Webordner hoch und verlinken Sie Ihr Inhaltverzeichnis mit der neuen Seite.

» drucken: pdf | html