Tabellenloses Layout – Pflicht, Kür oder Modeerscheinung?

• Vorteile des Tabellenlayouts
• Nachteile des Tabellenlayouts
• Layouttabellen – Missbrauch oder Bestimmung?
• Fazit

Meine gelegentlichen Besuche auf den Seiten der Webkrauts und anderer Verfechter des tabellenlosen Layouts von Internet-Seiten und deren Reaktionen auf meine gelegentlichen Kommentare ihrer Artikel zum Thema haben mich nun veranlasst, meinerseits einen Artikel zu verfassen, der ganz speziell auf dieses Thema eingeht.

Eines vorweg: ich habe nicht das geringste gegen tabellenloses CSS-Layout. Das ist ganz sicher eine sehr moderne Art, sich im Rahmen der gültigen Webstandards zu bewegen. Aber eben bei weitem nicht die einzig richtige, CSS-Layout hat Vor- und Nachteile, wie alles im Leben. Für sehr bedenklich halte ich die Art und Weise, wie die sogenannten "Standardistas" mit anderen Auffassungen zum Thema umgehen.

Auch ich bin ein Verfechter der Einhaltung der Webstandards, wie sonst soll das Internet weltweit funktionieren? Wer sich bedingungslos zu den Empfehlungen des W3C, den anerkannten Webstandards, bekennt, der muss auch Frames und Tabellen akzeptieren, denn die gehören auch zum Standard. Was valide ist und was nicht, sagt uns der W3C-Validator, und nicht eine kleine Gruppe von Standardistas, die die Wahrheit für sich in Anspruch nimmt.

Es gibt zur Zeit 2 verbreitete Methoden, semantisch korrekt mit (X)HTML ausgezeichneten Inhalt übersichtlich auf den Bildschirm zu bringen, eine seit Jahren bewährte, nämlich der Einsatz von teilweise unsichtbaren Tabellen, und eine etwas jüngere, nämlich das CSS-Layout. Wobei das altbewährte zuverlässig in allen mir bekannten Browsern funktioniert, und das neue an vielen Stellen noch Schwachpunkte offenbart.

Ein weit verbreitetes Problem ist das "Abrutschen" von Navigation oder Inhalt nach unten, weil beides nebeneinander keinen Platz hat. Das tritt beim Internet Explorer bis IE6 auf, der ja bekanntlich ein Box-Modell-Problem hat. Dieses Problem habe ich bei sehr vielen Seiten im CSS-Layout bemerkt, so dass man hier nicht von einzelnen Ausrutschern sprechen kann. Dem CSS-Layout gehört ganz sicher die Zukunft, ich gehe aber nicht davon aus, dass das Tabellenlayout in absehbarer Zeit sterben wird, da es doch einige unbestreitbare Vorteile hat.

nach oben 

Vorteile des Tabellenlayouts

Wenn Sie mehr über tabellenloses CSS-Layout und seine Vorteile wissen möchten, besuchen Sie bitte die Webkrauts, ich breche hier eine Lanze für das gute alte Tabellenlayout.

Tabellenloses CSS-Layout bei abgeschaltetem Stylesheet

Ein grosser Vorteil des Tabellenlayouts besteht darin, dass auch bei abgeschaltetem CSS oder Stylesheet alles noch da ist, wo es hingehört. Das ist gar nicht so abwegig, es gibt sehr viele Menschen mit Farbschwäche, die bekannteste ist die rot-grün-Schwäche. Ich meine hier verminderte Farbwahrnehmung, nix politisches .

Der Opera-Browser bietet hier eine ganz einfache Möglichkeit, das Stylesheet abzuschalten, nicht in den Menüs versteckt, sondern direkt auf der Oberfläche. Der sogenannte "Benutzermodus" schaltet das Autoren-Stylesheet ab, und bietet verschiedene voreingestellte einfache Benutzer-Modi. Bei einer Seite im CSS-Layout ist dann nicht nur das Design weg, sondern das gesamte Layout. Alle Inhalte incl. der Navigation werden linear untereinander angeordnet, die Zeilen gehen vom linken bis zum rechten Bildschirmrand, auf einem WideScreen fast unlesbar. So wird mit der Zusatzfunktion des Opera, die eigentlich die Zugänglichkeit einer Seite für eine Minderheit erhöhen soll, aus einer Seite im CSS-Layout eine eher schwer zu konsumierende Seite.

Sicher, man kann das Fenster schmal ziehen, dann hat man aber nur das Problem der Zeilenlänge gelöst, nicht die vertikal lineare Anordnung der Seitenelemente. Alle gängigen Browser bieten die Möglichkeit, das Stylesheet einer Seite abzuschalten oder durch ein eigenes zu ersetzen, nicht so komfortabel wie der Opera, aber irgendwie geht es. Und somit erhöht das Tabellenlayout, entgegen vieler anderer Meinungen, bei abgeschaltetem Stylesheet die Zugänglichkeit und Benutzbarkeit einer Internetseite. Wem meine farbliche Gestaltung gefällt, der kann die Seite so nehmen, wie sie von mir gestaltet wurde. Wer mit den Farbkombinationen nicht klarkommt, oder wem die ganz einfach nicht gefallen, der kann das Stylesheet abschalten und bekommt trotzdem ein ordentliches und vernünftiges Layout geliefert.

Ein ganz klarer und nicht bestreitbarer Vorteil des Tabellenlayouts, übrigens auch bei älteren Browsern oder solchen, die mit CSS nicht klarkommen oder die CSS gar nicht kennen. nach oben

Tabellenloses CSS-Layout im Internet Explorer 5/6

Das Boxmodell von CSS bis Level 2 sieht so aus: Die Breite, die ich einer div-Box mittels width gebe, steht dem Inhalt zur Verfügung. Das padding und das border kommen da noch dazu, d. h., die Gesamtbreite einer Box ergibt sich aus width, 2 x padding und 2 x border.

Was passiert eigentlich, wenn ich einem div direkt im body horizontal 100% gebe und dazu ein padding von 20px? Habe es gerade nochmal probiert, ich bekomme einen schönen horizontalen Scrollbalken. Die Gesamtbreite der Box beträgt nämlich 100% + 40 Pixel! Hier wird der Fehler dieses Boxmodells besonders deutlich.

Jahrelang wurde dem IE5/6 vorgeworfen, er hätte ein Boxmodell-Problem, weil er, abweichend von der fehlerhaften Vorgabe des CSS-Standards, ein eigenes, korrektes Boxmodell enworfen hat. Mit width wird die Gesamtbreite der Box definiert, padding liegt innen und margin aussen, wie es sich gehört. Nur so lässt sich die Gesamtbreite einer Box zuverlässig definieren, egal ob relativ, absolut oder gemischt. Die Folge der vom Standard abweichenden Anzeige im IE5/6 waren sogenannte CSS-Hacks, das sind spezielle Programmierungen für bestimmte Browser. Es gibt dutzende CSS-Hacks für die verschiedensten Browser, ganz besonders viele jedoch für den Internet Explorer.

Die sogenannten "box-model-hacks" für den IE5/6 sorgten dafür, dass dieser Browser die Boxen genauso anzeigte, wie es das falsche Boxmodell von CSS vorgibt. Der Vollständigkeit halber muss ich hier noch erwähnen, dass der IE6 im standardkonformen Modus, also bei ordnungsgemässer DTD, auch das falsche CSS-Boxmodell anzeigt. Den IE6 kann ich also durch ordnungsgemässe Angabe einer DTD dazu bewegen, sich genauso "standardkonform falsch" zu verhalten, wie die anderen Browser.

Nun kommt der IE7 ins Spiel: Der IE7 hält sich an den CSS-Standard, was zur Folge hat, dass die IE-CSS-Hacks plötzlich zum Ärgernis werden, weil sie auf einmal im IE7 zu Darstellungsfehlern führen. Entfernt man diese Hacks aus dem CSS, um eine ordentliche Anzeige im IE7 zu erreichen, gibt es natürlich wieder die Probleme mit den älteren Versionen des IE, wegen denen ja die Hacks erfunden wurden. Da wir nun aber noch ein paar Jahre mit den verschiedenen Versionen des IE werden leben müssen, ergeben sich hier gravierende Probleme.

Wenn Sie mehr über das Boxmodell-Problem wissen möchten, lesen Sie hier weiter:

CSS-Layout und das Boxmodell, Ärger vorprogrammiert

CSS ist also ein Standard, dessen Boxmodell fehlerbehaftet ist und der durch die unterschiedlichen Anzeigen in den verschiedenen Browsern auch nicht sicherer wird. Und so einem Standard soll ich das Layout meiner Internetseiten anvertrauen? Zur Zeit formatiere ich alles, was sicher geht, mit CSS, aber das Layout macht eine einfache, unverschachtelte Tabelle. 6 x padding und 6 x border, so viel Toleranz will ich meinen Seiten, z. B. bei einem klassischen 3-Spalten-Layout, einfach nicht geben.

Auch der Einsatz von div-Verschachtelungstechniken ist für mich an dieser Stelle keine Alternative. Warum soll ich ein Problem mit verschachtelten div lösen, mit ewig langen, komplizierten style-Anweisungen und vielleich auch noch unter Einsatz von CSS-Hacks, wenn ich das gleiche mit einer einfachen, unverschachtelten Tabelle einfacher, sicherer und browserkompatibel erreichen kann? Da wollen wir doch mal sehen, welcher Code "leichter" ist!

Irgendwo gelesen und für gut befunden: "Der beste und effektivste CSS-Hack ist eine Tabelle" … und der ist sogar IE7-kompatibel. Für die nächsten Jahre, d. h. solange der IE 5/6 noch weit verbreitet ist, wird also das gute alte Tabellenlayout die ausgereiftere und sicherere Methode sein, eine Internetseite für den Bildschirm "in Form zu bringen".

nach oben 

Nachteile des Tabellenlayouts

Der einzige wirkliche Nachteil des Tabellenlayouts ist nach meiner Meinung, dass ich mittels der ausgelagerten CSS-Datei nur das Design (Farben, Hintergründe usw.), nicht aber das Layout (die Anordnung der Elemente) der gesamten WebSite von einer zentralen Stelle aus ändern kann. Dazu müsste ich mich wie in alten Zeiten durch alle Dateien arbeiten. Aber wer will schon auf einmal die Navigation rechts oder unten haben.

Der Besucher will auf der Suche nach Information die gewohnte Funktionalität einer Internetseite wiederfinden, das heisst, die Navigation ist oben oder links, so werden Seiten für gewöhnlich erstellt, und so bleiben sie auch.

Und wer im Zusammenhang mit Tabellenlayout von "aufgeblasenem HTML-Code" spricht, vergisst wohl, dass eine aufgeblasene Stylesheet-Datei auch übetragen und geladen werden muss. In Zeiten, in denen gigabyteschwere Video- und Audiodateien durchs Netz gejagt werden, ist dieser Aspekt aber wohl eher von untergeordneter Bedeutung.

Natürlich kann man mit CSS-Layout viel mehr machen. CSS-Layout ist ein hervorragendes Mittel für "Die besondere WebSite". Das Tabellenlayout hat seine Grenzen. Wer aber eine Internetseite im Standardformat (siehe ein paar Zeilen weiter) mit CSS layoutet, der kauft sich ein Flugzeug, um damit auf der Landstraße ins Nachbardorf zu fahren. Und muss sich natürlich mit den Problemen herumschlagen, die ihm die weit ausladenden Flügel bereiten, beim CSS-Layout sind das Browser-Bugs und box-model-hacks.

nach oben 

Layouttabellen – Missbrauch oder Bestimmung?

Die Meinung, dass der Einsatz von Tabellen zu Layout-Zwecken "Missbrauch" ist, kann ich leider nicht teilen. Tabellen sind genau dazu da, eine Fläche in Bereiche zu unterteilen und somit Informationen übersichtlich und leicht erfassbar darzustellen, und das schon lange vor dem Computerzeitalter. Viele Internetseiten haben diese oder eine ähnliche Sruktur:

• Kopf (in der Regel kurze und prägnante Selbstdarstellung, grafisch gestaltet mit Logo usw.)
• Inhalte (normalerweise bestehend aus Navigation links, Inhalt in der Mitte und evtl. Anmerkungen, Werbung usw. rechts, eben das klassische Mehrspaltenlayout)
• Fuss mit verschiedenen Angaben, z. B. zum copyright, Links zur Kontaktseite und zum Impressum, ein wenig SEO usw.

Eine klassische Aufgabe für eine Tabelle! Ein solches Layout schreit förmlich nach einer Tabelle! Der kreative Umgang mit den Möglichkeiten, die die Webstandards bieten, bringt das Web weiter, nicht die Einschränkung auf das, was gerade modern ist. Und der Einsatz von Tabellen zu Layoutzwecken ist gerade dann kreativ, wenn man davon ausgeht, dass die Tabelle im Zusammenhang mit HTML eigentlich nicht dafür vorgesehen ist! Mit "kreativ" meine ich natürlich nicht mich, sondern die Leute, die das damals neue Instrument "Tabelle" mitte der 90er Jahre als Layout-Instrument entdeckt haben. Und das haben die getan, noch bevor das W3C die Tabelle in die HTML3 – Spezifikation aufgenommen hat.

Damals haben die Browserhersteller für die Weiterentwicklung von HTML gesorgt, und das frisch gegründete W3C konnte gar nicht anders, als die geschaffenen Tatsachen grösstenteils zum Standard zu erheben. Bis hin zur HTML-Spezifikation 3.2 werden Tabellen ausdrücklich als Layout-Instrument empfohlen! Erst HTML4 distanziert sich vorsichtig davon und empfiehlt für das Layout CSS. Das sehe ich aber eher im Zusammenhang mit dem allgemeinen Trend, gar nicht so speziell auf das Tabellenlayout bezogen. Dieser Satz könnte bei vielen Elementen stehen, die früher im Rahmen von HTML formatiert wurden.

Der Hinweis darauf, dass es bei nichtvisuellen Ausgabemedien Probleme mit Tabellen geben könnte, ist eben auch schon ein paar Jahre alt, ich habe keine eigenen Erfahrungen damit, aber viele Artikel und Blogbeiträge gelesen, die glaubhaft machen, dass diese Probleme nicht mehr relevant sind und eine einfache Layouttabelle die Zugänglichkeit einer Internetseite für nichtvisuelle Ausgabemedien nicht behindert.

Bewährtes wird auch nicht dadurch schlechter, dass es inzwischen modernere Techniken gibt. Deshalb nenne ich die Anwendung bewährter Techniken auch nicht "rückständig und altbacken", sondern "konservatives WebDesign", das klingt doch irgendwie positiver, zumindest kann man selbst entscheiden, ob man diesen Begriff positiv oder negativ empfindet.

Auch im Sinne der Semantik bringt die Tabelle keine Nachteile. Ob mehrfach verschachtelte Tabellen oder ebensolche <div> – Konstruktionen, das ist vom Standpunkt der Semantik aus egal. In beiden Techniken sollte man eine zu tiefe Verschachtelung vermeiden. Der Regelfall "Navigation links, Inhalte Mitte, sonstiges rechts" hat auch beim Tabellenlayout eine sinnvolle und korrekte Abfolge der Inhalte im Sinne der Semantik zur Folge.

Es gibt also keinen vernünftigen Grund, Tabellen als Layoutmittel zu verteufeln, gerade in Zeiten des IE6, der uns wohl noch lange auf unserem Weg begleiten wird.

nach oben 

Fazit

Es ist schwer abzuschätzen, in welchem Umfang sich das tabellenlose Layout durchsetzen wird. Das hängt sicher auch damit zusammen, wie schnell die IE5/6 aus unseren Statistiken verschwinden.

Die oben geschilderten Vorteile des Tabellenlayouts werden aber viele dazu bewegen, dabei zu bleiben, auch wenn irgendwann einmal alle Browser CSS-Layout zuverlässig und korrekt anzeigen. Ganz sicher kann beides friedlich nebeneinander existieren, ohne dass die Verfechter des einen über die Verfechter des anderen herfallen und sich gegenseitig beschimpfen.

Dass das eine modern ist, heisst nicht zwangsläufig, dass das andere "rückständig" sein muss, nur weil es schon ein paar Jahre länger in Anwendung ist. Ich persönlich bleibe vorerst beim Tabellenlayout, behalte mir aber vor, meine Meinung und meinen Stil zu ändern, wenn sich die Rahmenbedingungen ändern.

nach oben

Samstag, 3. März 2007, 08:06 Uhr

nach oben

zum Kommentar-Eingabeformular (Kommentare überspringen) »

3 Kommentare zu “Tabellenloses Layout – Pflicht, Kür oder Modeerscheinung?”

1. Juergen Kneller
   Am 18. Mai 2007 um 13:21 Uhr

   Ich kämpfe in ein paar kleineren Projekten seit ca. 2 Jahren mit den kleinen “Nervigkeiten” von CSS und komme immer wieder in Versuchung, die gute alte sichere Tabelle als Layoutbasis zu nehmen.
   Dein Artikel hat mich bestärkt, dass man sich noch trauen kann, Tabellen einzusetzen.
   Danke dafür

2. GE
   Am 19. Mai 2007 um 16:32 Uhr

   Hallo Juergen, genau deshalb mache ich meine Seiten. Es gibt schon genug Internetseiten, auf denen Frames, Tabellen & Co. verdammt werden, da will ich ein kleines Gegengewicht bieten.

   An bestimmten Stellen ist eben eine einfache Layouttabelle die bessere Wahl als verschachtelte div oder CSS-Hacks, um eine sichere und weitgehend gleiche Anzeige in den verschiedenen Browsern und Browser-Generationen zu erreichen.

   Es ist die Aufgabe der Entwickler von Sprachausgabe-Geräten und Handybrowsern, mit dem zurechtzukommen, was die aktuellen Standards erlauben. Das Urmedium des Internet ist nun mal der Computer mit Bildschirm, dafür werden die meisten Internet-Seiten gemacht. Man kann vom Knochen nicht erwarten, dass er dem Hund hinterherläuft .

3. Klaus
   Am 29. Dezember 2007 um 00:19 Uhr

   Schließe mich dem gern an! Vielen Dank für Deine Seite! Es ist mehr als frustrierend, wenn man nächtelang oder gar tagelang an einer dusseligen Box bastelt, die browserübergreifend dargestellt wird und dem sinnfreien Kreativitätsdrang der Programmierer entgegen lächelt ….. Tabellen sind mindestens so lange ein probates Design Mittel, bis sich die Rahmenbedingungen für ein reines CSS Layout geändert haben!

   Neuerungen und Entwicklungen sind bei mir herzlich willkommen, aber nicht wenn sie bedeuten, dass man für eine simple Darstellung das 3 oder 4-fache an Entwicklungszeit benötigt.

   Thumbs Up! Ich hoffe, dass viele diese Seite finden werden!

Schreibe einen Kommentar

Kommentare erscheinen erst nach manueller Freischaltung.

nach oben