Höhe einer Tabelle setzen
CSS bietet hierfür height
an, valide sind z. B. folgende Möglichkeiten:
(1) table { height: 400px; ... }
oder
(2) table { height: 50%; ... }
Nicht valide, da nicht im Umfang von HTML4 enthalten (noch nicht mal als "deprecated" - d.h. mißbilligt, aber noch geduldet) ist dagegen:
(3) <table height="50%" ... >
Alle modernen Browser (IE 4+, Netscape6, Mozilla0.x, Opera5.x) stellen nach (1) und (2) definierte Tabellen korrekt dar, während Netscape4 diese Definition grundsätzlich ignoriert.
Zusätzlich ist bei Mozilla0.x / Netscape6 zu beachten, daß man im Falle der Angabe nach (2) ein scheinbar falsches Verhalten dieser Browser beobachtet, d.h. die Tabelle wird scheinbar nicht auf 50% Größe gesetzt. Der Mac IE5, IE4.5 und Win-IE6b im standard-compliant-Modus verhalten sich genauso.
Dieses Verhalten ist jedoch kein Bug von Mozilla, sondern die korrekte Auslegung der modernen W3C-Standards. Nach diesen bezieht sich eine Prozentangabe stets auf die Größe des übergeordneten (Eltern) -Elements.
In diesem Falle ist <table>
ein Kind von <body>
,
d.h. <body>
ist das übergeordnete (Eltern)-Element zu <table>
.
Die Maße von <body>
sind jedoch standardmäßig auf auto
gesetzt, d.h. der Browser setzt die Größe von <body>
automatisch
nach dessen Inhalt, während sich
(4) <table style="height:100%;" ... >
auf diese automatisch gesetzte Größe bezieht. Ohne Größenangabe
von <body>
belegt eine so definierte <table>
nicht
das gesamte Browserfenster.
Mehr zu diesem Thema siehe: http://bugzilla.mozilla.org/show_bug.cgi?id=69479
Abhilfe schaffen folgende zusätzliche CSS-Definitionen:
(5) body { position: absolute; top: 0; bottom: 0; left:0; right:0; ... }
oder
(6) body { height: 100%; ... }
und zusätzlich html { height:
100%; ... }
Variante (6) ist die unproblematischere der beiden.
Variante (5) bewirkt zwar unter Mozilla / Netscape6 das korrekte Verhalten bezüglich Tabellenhöhe, jedoch zieht so etwas andere, unerwünschte Effekte nach sich. Außerdem führt Variante (5) mit dem Mac-IE sowie Win-IE6b nicht zum gewünschten Ergebnis. Im übrigen erzeugt Variante (5) unter Netscape4 aus body einen Layer.
Zur Beachtung:
Auf diese Weise ist es durch Setzen von 100% Tabellenhöhe auch möglich, die gesamte
zur Verfügung stehende Höhe einer Seite mit einer Tabelle zu belegen. Man sollte
sich aber gut überlegen, welchen Nutzen dies für den Besucher der Seite bringt,
und genau prüfen, ob man so nicht nur einen optischen Effekt erreichen möchte,
der die Benutzbarkeit der Seite unnötig einschränkt.
Abschließend noch ein paar Bemerkungen zu Möglichkeit (3) <table height="50%" ... >
.
Auf diese Möglichkeit sollte heutzutage trotz Netscape4 verzichtet werden - wer unbedingt noch auf Netscape4 Rücksicht nehmen will, sollte versuchen, das Problem auf andere Weise zu lösen.
Da <table height="50%" ... >
nicht valides (X)HTML ist, wird diese
Angabe von Browsern, die die <!DOCTYPE>
-Angabe auswerten, nicht mehr
unterstützt. Netscape6 / Mozilla0.x stellen also nur dann eine so definierte Tabelle
seitenfüllend aus, wenn sie das (Fehl-) Verhalten alter Browserversionen simulieren
(sog. "Quirks-Modus"). Dies ist dann der Fall, wenn entweder kein <!DOCTYPE>
angegeben
ist, oder <!DOCTYPE>
HTML4.0x ist und die URI-Angabe
zu diesem <!DOCTYPE>
fehlt.
Ab <!DOCTYPE>
XHTML1.0 wird das height-Attribut bei table
von
Mozilla und Netscape6 grundsätzlich ignoriert.