dciwam.de / faq / html / hoehe-tabelle-setzen

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.

Martin Glodde • http://www.chemie.uni-bremen.de/stohrer/member/glodde/

Zum Seitenanfang

URL: http://dciwam.de | Letzte Änderung: 20.05.2009 | G. Schneider | Kontakt