Unsichtbare Tabellen zur Seitengestaltung?

Dass man die Tabellen nicht dazu verwenden soll, um das Layout einer Seite zu gestalten, lernt man inzwischen ja im Kurs “Homepages erstellen für Senioren” – am ersten Nachmittag. Ich behaupte: Teilweise geht es nicht ohne Tabellen-Missbrauch.

Den <table>-Tag, seine Kids <thead>, <tbody> und die Enkel <tr>, <td>sollen nur eingesetzt werden, um tabellarische Daten darzustellen. Börsenkurse, Fussballresultate, Listen von Events. Semantisch korrekt heisst das Stichwort. Die Tags sinngemäss angewendet.

Geht’s wirklich ganz ohne Layout-Tabellen? “Natürlich”, höre ich mich sagen. Vor einem halben Jahr.

Meine Meinung habe ich inzwischen geändert und behaupte – etwas wagemutig vielleicht: In bestimmten Fällen kommt man nicht um unsichtbare Tabellen herum.

Das Exempel

“Silvan, momentan ist das Layout des Chats starr. Das geht so nicht. Der Chat muss sich an die Fenstergrösse anpassen. Wenn jemand das Browserfenster maximiert, dürfen rechts und unten keine ungenutzten Fläche vorhanden sein. Kannst Du das CSS entsprechend anpassen?”

Chat V2007

Im alten Chat (Version 2003) haben wir dieses “fluid Layout” mit einer wilden Schlacht aus Frames, Tabellen, IFrames erreicht. *tschudder*

Chat V2003

Im neuen Chat wollten wir das Design komplett vom Inhalt trennen und haben deshalb DIVs und ULs gestapelt. Das gibt den CSS-Zen-Garden-Effekt, wenn man das Stylesheet deaktiviert, das den Level 4-CSS-Anwender strahlen lässt.

Nur das fluid Layout haben wir nicht hingekriegt ohne unsichtbare Tables.

Mit unsichtbaren Tabellen? Kein Problem: Hier ist das Beispiel.
Wer kann mir zeigen, wie wir das gleiche “fliessende” Layout auf “elegante” Art erreichen kann?

HTML-Missbrauch?

Meine Theorie, warum es hier nicht semantisch korrekt geht: Wir benutzen eine Dokumentenbeschreibungssprache wie HTML für eine interaktive Applikation. (“Dokument” kommt von “Urkunde” und unser Chat ist weit von einer Urkunde entfernt, bei dem Stuss, der da geschrieben wird 🙂 ). Streng genommen vergewaltigen wir HTML. Und da wir hier HTML zweckentfremden, bietet CSS auch nicht die Werkzeuge, um unsere Designanforderungen zu erfüllen. – Ausser man führt die Regel-Verletzungen etwas weiter und wendet Tabellen für den Seitenaufbau an.

Würde es nach dieser Sichtweise gehen, hätten wir für diese Anwendung Flash anwenden sollen. Und nicht HTML/AJAX. Schaut man dies aber so an, hätte auch map.search.ch oder GMail kein Recht, HTML zu verwenden.

Die Lösungsvorschläge

Einen ersten Vorschlag habe ich erhalten. Doch hier hat die Fusszeile keine fixe Höhe. Und dies erfüllt die Aufgabenstellung nicht.

Der zweite Vorschlag erfüllt die Anforderungen nicht, da das obere DIV hinter den unteren verschwindet. Wird das obere DIV mit Chat-Mitteilungen gefüllt, werden die hinter dem unteren DIV verstecht sein.