Tabellen- vs. CSS-Layout

0 | 8003 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Tabellen- vs. CSS-Layout" mit Ihrem Wissen!

Anzeige Hier werben

Das Tabellenlayout

In den frühen 90er Jahren war es zum Teil sehr schwer, ein Design wie vom Kunden gewünscht umzusetzen: Graphische Elemente ließen sich nicht gut positionieren, zudem tobte der Browserkrieg zwischen dem Netscape Navigator und dem Aufsteiger Internet Explorer.

Da entdeckte ein frustrierter Webdesigner die Tabelle neu. Ihre border Eigenschaft machte es möglich, unsichtbare Tabellen zu schaffen. Über colspan und rowspan ließen sich Zellen verschmelzen. Endlich war alles einfach: Elemente ließen sich nebeneinander anordnen, die Darstellung war in jedem Browser nahezu gleich.

Dieser Trend hat sich - verständlicher Weise - durchgesetzt und erfreut sich bis heute an einem großen Zulauf.

Tabellen wurden fortan von Büchern und allerlei Lehrern zum Designen empfohlen. WYSIWYG Editoren bieten heute die Möglichkeit, Tabellen in die Seite zu malen, Photoshop exportiert sogar direkt HTML Tabellen.

Die Schattenseite

Leider haben tabellengestützte Layouts auf sehr viele Nachteile, die nach unserer Meinung mehr Aufmerksamkeit verdienen.

Aufgeblähter Quellcode

Um relativ simple Vorgaben mit Tabellen zu erledigen, sind oft eine Vielzahl von Befehlen zu notieren, zum Beispiel um Bilder auf einer Webseite zu positionieren. Dadurch werden nicht nur Zeitaufwand und die HTML-Dokumente unnötig groß, auch die damit verbundene Datenmenge, die der Besucher runterladen muss, nimmt zu.

Längere Ladezeiten und Traffic

Unter Serverlast werden Seiten erst spät dargestellt, da Tabellen erst gerendert werden, wenn sie vollständig geladen sind. Große HTML-Dateien bewirken nicht nur längere Ladezeiten, sondern verursachen auch deutlich mehr Traffic und somit einen möglichen finanziellen Nachteil.

Tabellen: Barrieren für behinderte Menschen

So genannte Screenreader, die Webinhalte vorwiegend über eine Braillezeile ausgeben, wissen mit Tabellen nichts anzufangen. Sehbehinderten Mitmenschen, die auf diese Sehhilfen angewiesen sind, wird das Leben erschwert.

Nicht zukunftssicher

Tabellendesigns sind nicht zukunftssicher. Schon jetzt ist es unmöglich sich auf einigen populären Ausgabemedien wie PDAs oder Handys eine HTML-Seite anzuschauen, deren Design auf Tabellen gestützt ist.

Zweckentfremdung

Werden Tabellen als Layoutraster verwendet, so werden sie ihrem eigentlichen Zweck tabellarische Daten darzustellen entfremdet, daher ist solch eine Nutzung von Tabellen nicht im Sinne von HTML - dessen Konzept ist es eigentlich, Texte logisch auszuzeichnen. Das bedeutet: Kein Design in die HTML Seite einbauen, das nicht dorthin gehört und Elemente ihrer Bedeutung entsprechend einsetzten.

Eine Lösung

Das hier ein Problem steckte, erkannte die w3c schnell: "Logische Auszeichnung" ließ sich nicht erreichen, solange keine Möglichkeit zur Festlegung der Darstellungsform existierte. So präsentierte sie im Dezember 1996 ein Konzept namens Cascading Style Sheets. Es sollte fortan die Möglichkeit bieten, die Darstellung von Dokumenten zu kontrollieren. Die Stärke von CSS liegt in dem ersten Wort der Abkürzung: Cascading, zu Deutsch kaskadierend oder einfach abgestuft. Der User hat die Möglichkeit, die Designvorstellungen des Webdesigners zu überschreiben. Hat er zum Beispiel eine Sehschwäche, kann er durch eine eigene Browser CSS Datei alle Schriftgrößen erhöhen.

Weitere Vorteile

Doch nicht nur für diese Zielgruppe bietet CSS Vorteile. Weitere Vorteile sind:

  • Die viel gelobte Suchmaschinenoptimierung ist mit logischem Code deutlich einfacher, allein schon durch einen korrekten Umriss (Also einer Liste der verwendeten Überschriften).
  • Eine Änderung des Designs einer Seite ist nur durch eine Änderung der CSS Datei möglich. Nichts an den HTML Dateien muss geändert werden. Eine Datei ändert das gesamte Design.
  • Designer und Programmierer können in Projekten unabhängig voneinander arbeiten.
  • Die ausgegebenen Seiten sind deutlich kleiner.

Sporadische Unterstützung

Leider ging die Einbeziehung von CSS in das alltägliche Leben nicht gerade schnell von Statten: Zwar implementierten die meisten Webbrowser schnell ein sporadisches CSS, dennoch hielten die meisten Webdesigner an ihren Tabellen fest. Starrsinnig beharrten sie auf dem Gelernten (Das steht aber in meinem Buch) und weigerten sich, etwas neues zu erlernen. Dass Browser wie der Internet Explorer CSS noch nicht vollständig unterstützen, verdanken wir unter anderem solchen Menschen. Da viele Webmaster sich weigern, einen Standard anzunehmen, ist es auch unnötig, ihn in einen Browser einzubauen. Solange es keine Bewegung von Seiten der User gibt, wird kein großer Konzern die Notwendigkeit für diesen Standard sehen.

Das Paradoxe daran ist, dass viele eben dieser Browserhersteller selbst in der w3c vertreten sind - und damit mit über diesen Standard entschieden haben.

Mittlerweile haben immerhin zwei der drei bedeutenden Browser eine gute CSS Unterstützung: Mozilla und Opera. Microsoft dagegen hält an der oben genannten Politik fest.

Das Problem

Leider kostet auch Webentwicklung, wie so vieles, vor allem Geld. Firmen sehen keinen Sinn darin, viel Geld für eine Technologie auszugeben, die in ihren Augen "nicht nötig ist". Für sie zählt vor allem das visuelle Ergebnis, die technische Umsetzung "unter der Motorhaube" interessiert mangels Fachwissen nicht.

Jedoch sollte es möglich sein, kleine bis mittelständige Firmen von den Vorzügen von CSS zu überzeugen. Für Privatmenschen ist es erst recht möglich, ihre Seiten umzustellen. So könnte man auch die letzten Browserhersteller überzeugen, CSS korrekt zu implementieren.

Ist dies erst einmal geschehen, sollte die Entwicklung per CSS leichter werden, da man nicht mehr einzelne Browser berücksichtigen muss. Damit wird sie auch günstiger - und dieses Problem hat sich erledigt.

Der nächste Schritt

...muss also zwangsläufig von uns Webentwicklern kommen. Es ist mit CSS gut möglich, Designs zu erstellen, das sieht man an dieser Seite und an Seiten wie Zengarden oder unserem CSS Contest.

Es mag anfangs umständlich erscheinen, CSS zu verwenden, jedoch zahlt es sich aus. Beherrscht man es erst einmal mit allen Kniffen (Die man bei den Tabellen ja auch erst einmal erlernen musste), lassen sich Seiten effizienter und schneller erstellen.

Auch müssen die erwähnten Lehrer und Buchautoren aufhören, die veralteten Techniken zu propagieren. Als Schüler kann man zum Beispiel vorschlagen, ein Referat über Semantik in HTML zu halten.

Hier noch mal Pro und Contra im Überblick

Pro Tabellen
  • Bekannt, kann jeder
  • Leicht per WYSIWYG erstellbar
  • Ausgabe von Slicing Programmen
  • Abwärtskompatibel
  • Komplexe Designs lassen sich leichter umsetzen (In wysiwyg Editoren)
Pro CSS
  • Kein aufgeblähter Quellcode
  • Schnelle Ladezeiten
  • Trennung von Inhalt und Präsentation möglich
  • Traffic
  • Kaskadierend
  • Übersichtlicher, logischer Code
  • Einfache Änderung des Layouts möglich
  • Textbrowser, Sumas
  • Screenreader
  • Verschiedene Layouts für Drucker, Bildschirm, etc.
  • Benutzerstylesheets für behinderte Menschen
  • Siehe auch unser Schwesterprojekt
  • Eine barrierefreie Website spart Geld:
    • durch weniger Serverlast
    • geringerer Zeitaufwand
    • durch Zukunftsfähigkeit
  • Eine barrierefreie Website bringt Geld
    • Bekanntheit durch höheres Google-Ranking
    • durch mehr und vor allem zufriedenere Besucher, die mehr klicken, mehr kaufen, öfter wieder kommen

Über den Autor / Artikel

Dieser Artikel ist Teil des Webstandards-Projekt, welches vor der neuen Webmasterpro-Version durch eine Gruppe von Webentwicklern geschaffen wurde und sich für Webstandards stark macht.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 3 Personen an der Seite "Tabellen- vs. CSS-Layout" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Tabellen- vs. CSS-Layout" hier bearbeiten.

Mitarbeiter