Layouten ohne Tabellen
Warum keine Tabelle?
Obwohl Tabellen nie zum Layouten von Seiten vorgesehen waren, wurden und werden sie meistens verwendet. Die Gründe liegen auf der Hand: Unerfahrene Webdesigner können mit einem WYSIWYG-Editor sehr schnell ein Design entwickeln. Mit CSS und div-Container ist das ohne Kenntnisse der Materie etwas problematischer. Weiterhin unterstützen erst die modernen Browser der letzten 1-2 Jahre CSS soweit, dass sich ein Umstieg lohnt. Da viele Seiten im Web noch nicht überarbeitet sind, finden sich auch noch viele Seiten, die mit Tabellen layoutet wurden. Dabei ist ein Umstieg mittlerweile durchaus lohnenswert.Stichwort "Aufgeblähter Quellcode"
Betrachtet man den Quellcode von Webseiten, die mit Tabellen erstellt wurden, so findet man häufig komplexe Strukturen verschachtelter Tabellen. Das gleiche Layout, erzeugt mit CSS, kann durchaus bis zu 40% weniger Quellcode bedeuten. Jeder Modembesitzer wird dankbar sein, da es spürbare Geschwindigkeitsvorteile bringt. Auf Seite der Webseiten-Betreiber bedeuten kleinere Dateien geringeres Transfervolumen. Reduziert man die Größe einer Datei von z.B. 5kB auf 3kB und geht man von 100.000 Besucher pro Monat aus, ergibt sich ein verringertes Transfer-Volumen von 2,4 GB pro Jahr für nur eine Datei. Hochgerechnet auf eine ganze Seite kann sich eine Umstellung durch diese Kostenersparnis durchaus rechnen.Unterschiedliche Ausgabemedien
Die Zahl der unterschiedlichen Ausgabemedien steigt. Ob Bildschirm, Drucker, PDA, Handy, Beamer, Textbrowser oder Sprachausgabe, eine Webseite kann von allen Medien angezeigt, bzw. ausgedruckt werden. Und mit tabellenlosem Layout hast du die Möglichkeit, das Layout an die unterschiedlichen Ausgabemedien optimal anzupassen.Private Homepages
Die oben genannten Argumente treffen sicherlich nicht alle auf private Homepages zu. Auf der anderen Seite steht hier der Spaß am Schreiben der Webseite im Vordergrund. Also solltest du doch an diesem Thema interessiert sein und etwas tiefer einsteigen, oder?Beispiele
Die folgenden Beispiele zeigen dir unterschiedliche Layouts mit den entsprechenden Erläuterungen.Sie sind alle validiert nach XHTML 1.0 Strict und funktionieren mit den folgenden Browsern:- Internet Explorer (Win/Mac) ab der Version 5
- Netscape ab der Version 6
- Opera ab der Version 5
- Mozilla ab der Version 1
- Firefox ab der Version 0.8
Sämtliche Beispiele unterliegen dem Copyright. Sie dürfen aber zum Gestalten eigener Webseiten ohne Quellnachweisangabe kopiert und weiterverwendet werden. Außerdem ist zu beachten, dass die verschiedenen, horizontal angeordneten Container nicht gleich groß sind. Das sieht aufgrunde der Hintergrundfarbe des Elements in dem die Elemente "gebettet" sind nur so aus.