Warum Layout mit Tabellen dumm ist:

Probleme definiert, Lösungen angeboten

Tabellen haben in HTML immer nur zu einem Zweck existiert: Um tabellarische Daten darzustellen. Dann kam eine Zeit, wo es für die Designer durch border="0" auf einmal möglich war, ein Raster über ihre Seiten zu legen, um daran Grafiken und Text auszurichten. Obwohl es immer noch die meistgebrauchte Methode ist, um optisch gutaussehende Websites zu erschaffen, widerspricht die Nutzung von Tabellen zu Layoutzwecken den Bemühungen, ein besseres, leichter benutzbares, flexibles und funktionelles WWW zu schaffen. Finden Sie heraus, woher die Probleme kommen, und lernen Sie Methoden für die Übergangsphase und schließlich für ein komplett tabellenfreies Layout.

Anmerkung für IE/Mac-Nutzer:

Um Sites mit nicht-lateinischen Zeichen (wie die bulgarische und chinesische Übersetzung dieser Site) richtig anzeigen zu können, müssen Sie ihren Standard-Zeichensatz auf "Universal Alphabet (UTF-8)" einstellen. Das betrifft dann keine der Sites, die Sie sonst ansehen, eröffnet Ihnen aber eine neue Welt von Sites in Sprachen, die Sie wahrscheinlich ohnehin nicht verstehen.

Holen Sie Ihren Chef

Sind Ihre Vorgesetzten hier bei Seybold, in einem anderen Seminar? Holen Sie sie. Sie sind es, die wissen müssen, wie Web Standards ihrer Firma Kosten ersparen können.

Übersicht: Was springt für mich dabei raus?

Wir werden Ihnen eine Einführung in eine Arbeitsweise geben, die

Wir werden außerdem darüber sprechen, warum Layouts mit Cascading Style Sheets (CSS) eine andere Denkweise bei der Erstellung des Inhalts und der Verwendung des Markups erfordern, als Sie es gewohnt sind.

Killer Web Sites: Verschachtelte Tabellen und Spacer GIFs

Anfangs war das Internet nur ein Medium zum Informationsaustausch für Akademiker, Forscher und das Militär. Es dauerte aber nicht lang, bis unternehmerische Visionäre erkannten, dass dieses neue Medium ideal war, um alles mögliche zu verkaufen, von Lebensmitteln und Hundefutter bis hin zu Gebrauchtwagen und Sportübertragungen.

Aber wie es mit jedem Medium in seinen Anfängen ist, war das Internet ästhetisch gesehen "hässlich" (und nicht wirklich sehr verlockend für potenzielle Kunden), bis David Siegel um 1997 seine "Bibel" veröffentlichte, in dem er einige brilliante Hilfskonstruktionen für die bis dahin existierenden Browser und W3C Spezifikationen beschrieb. (Wir reden hier von Netscape 2 und 3, Leute.)

Diese Konstruktionen waren so brilliant, dass sie noch immer die vorherrschende Methode darstellen, ein Layout für Webseiten zu erschaffen.

Das Problem beim Benutzen von Tabellen:

Rettung ist in Sicht

Moderne Browser können Web Standards viel besser darstellen und wir brauchen diese veralteten Methoden nicht mehr zu verwenden.

Anstatt Tabellen zu verschachteln und leere Zellen mit Space GIFs zu füllen, können wir viel einfacheres Markup benutzen und CSS dafür verwenden, schöne Sites zu layouten, die schneller geladen werden, einfacher zu ändern sind, und die für jedermann besser zu benutzen sind.

Die Lösung: CSS und strukturelles Markup

Dadurch, dass wir strukturelles Markup in unseren HTML-Dokumenten verwenden, und unser Layout mit Cascading Style Sheets machen, können wir den tatsächlichen Inhalt unserer Seiten davon trennen, wie sie präsentiert werden.

Das hat einige Vorteile gegenüber Tabellen...

Redesigns sind leichter und billiger

Wenn Sie Präsentations-Markup aus Ihren Seiten entfernen, wird das Ändern des gesamten Designs und des Inhalts deutlich weniger arbeitsintensiv (und viel billiger). Um das Layout der ganzen Site zu ändern, müssen Sie nur die Style Sheets ändern; Sie brauchen keine einzige der eigentlichen Seiten zu bearbeiten.

Schauen Sie sich beispielsweise den CSS Zen Garden, oder den Style-Wechsler auf Eric Meyers Site an. Lesen Sie auch Alternative Style von Paul Sowden.

Bandbreite ist nicht kostenlos

Wenn Sie Web Standards benutzen, werden sich Ihre Dateigrößen verringern, weil Ihre Besucher nicht bei jeder Seite die Layout-Informationen mit laden müssen. Die Style Sheets, die für das Layout zuständig sind, werden vom Browser des Betrachters in den Cache gestellt, und somit nur einmal geladen.

Geringere Dateigrößen bedeuten schnellere Ladezeiten und geringere Kosten für das Hosting.

Hey, die Seiten sehen ja alle gleich aus!

Web Standards machen es außerdem extrem einfach, ein gleiches Erscheinungsbild zu wahren, das sich durch die gesamte Site zieht. Alle Seiten sind gleich formatiert, weil sie alle ein und die selbe CSS Datei für das Layout verwenden.

Das stärkt Ihre Corporate Identity und vereinfacht die Nutzbarkeit Ihrer Site.

Einmal schreiben, überall benutzen, für jedermann

Web Standards sorgen dafür, dass sich die Nutzbarkeit verbessert, vor allem für Besucher mit Behinderungen und für Nutzer, die mit Handys und PDAs das Web benutzen.

Besucher, die Vorlesebrowser benutzen (sowie auch solche mit langsamen Verbindungen) müssen sich nicht durch endlos viele Tabellenzellen kämpfen, um an den tatsächlichen Inhalt der Seiten zu gelangen.

In anderen Worten, die Trennung von Inhalt und Layout macht die Site Browser-unabhängig.

Google ist blind

Wo wir gerade von Nutzbarkeit reden, wenn Sie Ihr Markup minimieren und Meta-Tags richtig anwenden, wird das auch dazu beitragen, dass Ihr Suchmaschinen-Ranking verbessert wird.

Reduzieren Sie das Verhältnis von Code zu Inhalt, benutzen Sie Stichworte in Ihren Meta-Tags und ersetzen Sie Grafiken mit Überschriften durch echten Text, und Sie werden mit besseren Suchergebnissen belohnt.

Sie können weiterhin Tabellen benutzen, wenn Sie müssen, aber nicht zu viele

Auf die Weise bekommen Browser (und Chefs) die gezwungen sind, bis zu ihrem Tode Browser der Version 4 zu benutzen, eine akzeptierbare Vorstellung, was der Rest der Welt zu sehen bekommt.

Eine gutaussehende Tabelle

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eros et accumsan et iusto odio dignissim qui blandit
Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Epsum factorial non deposit quid pro quo hic escorol.
Olypian quantels et gomilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.
Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore.

Werfen Sie einen Blick hinter die Kulissen.

Das könnte wirklich viel einfacher gemacht werden. Raten Sie, wieviel Markup in dieser kleinen Tabelle ist! 13.7k. Sie hat 17 Zeilen und 9 Spalten. Und habe ich die ganzen Spacer GIFs erwähnt?
Es sind definitiv zu viele Tabellenzellen und Platzhalter. Und die ganzen gepunkteten Rahmenlinien werden mit dem background Attribut in Zellen gemacht, was nicht valide ist.
Eine verschachtelte Tabelle? Wozu?
Um eine Liste zu machen? Das ist ein Witz, oder?
Das alles könnte mit 8 Tabellenzellen und 4 CSS Regeln gemacht werden. Wirklich! 8 Zellen und 4 CSS Regeln, mehr ist nicht nötig.
Oh nein, noch eine Tabelle, die sich als Liste ausgibt.
Schreiben Sie Ihre Liste als Liste und lassen Sie CSS den Rest übernehmen.
Sie brauchen eine Regel für <table>, eine für <td>, eine für <ul> und eine für <li>. Das ist alles.
Das ist besser als noch 8 Tabellenzellen zu benutzen um eine Liste vorzutäuschen, die dann nichtmal barrierefrei ist.
Exzellent! Die letzte geschummelte Liste.

Der Code für die Tabellenstruktur:

table { margin: 3px; padding: 2px; border: solid 2px blue }

td { padding: 2px; border-style: solid; border-width: 1px; border-color: gray gray silver silver }

So ist es viel besser

viel besser Raten Sie, wieviel Markup in dieser kleinen Tabelle ist! 2.1k. Sie hat 4 Zeilen und 2 Spalten. Und keine Spacer GIFs.
genau richtig Und all diese gepunkteten Rahmenlinien sind mit CSS erstellt und valide.
  • Dies ist jetzt ein Listenelement
  • Genau so wie es sein soll
Das alles ist mit nur 8 Tabellenzellen und 4 CSS Regeln gemacht. Wirklich! 8 Zellen und 4 CSS Regeln, mehr ist nicht nötig.
  • Hurra für diese Liste
  • Schreiben Sie Ihre Liste als Liste und lassen Sie CSS den Rest übernehmen.
Sie brauchen eine Regel für <table>, eine für <td>, eine für <ul> und eine für <li>. Das ist alles.
  • Ich liebe Listen
  • Exzellent! Keine vorgetäuschten Listen mehr.

Und hier ist der CSS Code, den Sie brauchen, um das überflüssige Markup loszuwerden:

table { border-bottom: 1px dotted fuchsia; border-left: 1px dotted fuchsia }

td { padding: 11px 20px 20px 11px; border-top: 1px dotted fuchsia; border-right: 1px dotted fuchsia }

ul { margin-top: 10px; margin-bottom: 10px; margin-left: 0; padding-left: 1em }

li { margin-bottom: 10px }

Neugestaltung der Übergangsdesigns

Benutzen Sie margin und padding anstelle von Extra-Zellen und Spacer GIFs.

Benutzen Sie link und @import um Ihre Stylesheets einzubinden. Ersteres für ältere Browser, letzteres für moderne Browser.

<link href="basic.css" rel="stylesheet" type="text/css">

<style type="text/css" media="screen"><!--
@import url(modern.css) screen;
--></style>

Beispiele:

Aber moment, es gibt noch mehr:

Für mehr Informationen zu Übergangsdesigns, lesen Sie das erste Kapitel von Eric Meyer on CSS und das meiste von Jeffrey Zeldmans Designing with Web Standards.

CSS Layouts: Hier ist die Zukunft

Die Browser, die die große Mehrheit der Besucher heute benutzt, können gut mit CSS umgehen. Sie haben alle ihre Problemchen, aber sobald Sie sich an sie gewöhnt haben, können Sie sie umgehen.

CSS Stylesheets schreiben ist einfach. Selbst für jemanden wie mich, der der Meinung ist, dass JavaScript aussieht wie eine Aneinanderreihung von Flüchen.

if(links[x].length > 0);{
for (y=0; y<links[x].length; y++) {

Jede CSS Regel hat einen Selektor und eine Deklaration. Die Deklaration besteht aus einer Eigenschaft und einem Wert. Eigenschaften, die sich anhören wie mehrere Wörter, werden mit Bindestrich geschrieben.

body {margin:0; padding:0}

.related {float:right; width: 15em; margin-left:1em; margin-bottom: 1em; color:blue}

#footer {color: gray; font-size: 0.6em; line-height: 1.2em; background-color: white; margin: 0}

Semantisches Markup: Schreibe, was Du meinst, und meine, was Du schreibst.

Während das eigentliche Schreiben von CSS einfach ist, benötigt das Entwerfen von Layouts mit CSS eine leicht andere Denkweise als die, mit denen die meisten von uns vertraut sind.

Anstelle zu denken, dass "das hierhin muss, und das dort positioniert wird", müssen wir die eigentlichen Inhalte in unserer Seite und die Struktur dieser Informationen bedenken.

Der wichtigsten Überschrift geben wir ein <h1>-Tag; untergeordnete Überschriften bekommen <h2>-Tags, usw.; Absätze werden als Paragraph markiert.

Das ist als "strukturelles" oder "semantisches" Markup bekannt.

Anstatt dass Sie Ihren Inhalt in Tabellen und Zellen stellen, verpacken Sie ihn in div Elemente. Geben Sie Ihren div Elementen eine ID oder eine Klasse, die den Inhalt oder die Funktion des Bereichs beschreibt und nicht sein Aussehen.

Vermeiden Sie <b>ed und <br>eakfast Markup

Denken Sie daran, warum Sie wollen, dass etwas in einer bestimmten Form erscheint; was bedeutet es? Ihr Markup kann und soll die Bedeutung vermitteln, selbst für jemanden, der Ihre Site nicht sehen kann. Semantisches Markup macht Ihre Seiten zugänglicher, Suchmaschinen eingeschlossen.

Wenn Sie etwas kursiv schreiben, tun Sie das, weil sie es betonen wollen (<em>), oder weil es der Titel eines Buches ist (<cite>)?

Wenn etwas fett ist, sollte es möglicherweise mit <strong> geschrieben werden.

Wenn Sie einen Zeilenumbruch nach etwas wollen, stehen die Chancen gut, dass es eine Überschrift darstellen soll. Wenn es keine Überschrift ist, ist es vielleicht Teil einer Klasse die durch die gesamte Site vorkommt? Wenn das der Fall ist, benutzen Sie CSS anstelle von <br>.

.foo {display:block}

Für mehr zu diesem Thema, lesen Sie Bed and BReakfast markup (B&BR) von Tantek Çelik.

Dinge, die mit Tabellen besser klappen als mit CSS

Es gibt gewisse Dinge, die CSS nicht so gut kann, wie Layout mit Tabellen.

Sagen wir beispielsweise, Sie haben ein schwarzes Navigationsmenü auf der Seite, das sich nach unten genauso weit erstrecken soll, wie der Inhalt. Mit einem Tabellenlayout ist das einfach: Geben Sie dem <td> einen schwarzen Hintergrund.

Wir können das auch mit CSS machen, aber es erfordert eine andere Denkweise.

Wenn wir unserem Navigations-div einen schwarzen Hintergrund geben, wird der Hintergrund sich nur soweit erstrecken, wie die Navigation hoch ist. Auf den meisten Seiten ist der Inhalt aber länger als die Navigation, deswegen ist das keine gute Idee.

Stattdessen könnten wir ein schwarzes GIF in unser Inhalts-div setzen, und diesem div genug padding auf der linken Seite geben, aber wenn unsere Navigation länger ist als der Inhalt, würde das auch nicht funktionieren.

Ein anderer Weg zur Lösung ist, das schwarze GIF als Hintergrundbild zum <body> einzufügen, was ganz gut klappt, solange Sie nicht ein anderes Hintergrundbild für Ihren <body> benutzen wollen.

Oder, wir könnten ein div um unseren Inhalt stellen und das Bild in diesen div als Hintergrund stellen. Nur leider sorgt das für viel nicht semantischen Kram in unserem Markup.

Und, natürlich werden Hintergrundbilder nichts bringen, wenn sich die Breite Ihrer Seite der Browserbreite anpassen soll.

Wie gesagt, es gibt Dinge, die mit Tabellen leichter funktionieren, als mit CSS. Am Ende müssen Sie sich selbst fragen, ob der ganze überschüssige Code, der bei Tabellenlayout zwangsläufig dabei ist, die Sache wert ist.

Der Umstieg von Tabellen-Hacks auf Web Standards

Als erstes brauchen Sie eine Migrations-Strategie. Werden Sie die gesamte Site auf einmal umsetzen, oder werden Sie es Abschnitt für Abschnitt tun?

Suchen Sie als erstes die Seiten heraus, die von der Migration am meisten profitieren. Startseiten, neue Produktankündigungen und ähnliche Seiten sind die klassischen Seiten, mit denen man anfängt.

Bestimmen Sie, welche Inhalte/Informationen in Ihrer Site als Ganze existieren

Komplette Neugestaltung Ihrer Seiten

Sobald Sie einen Überblick über die Inhalte auf Ihrer Site haben, wird es Zeit, eine logische Aufteilung für Ihre existierenden Seiten zu finden.

Untersuchen Sie Ihre Tabellenstruktur auf verschachtelte Tabellen und leere Platzhalter- und Rahmen-Zellen. (Wir wollen diese durch div-Tags oder eine deutlich einfachere Tabellenstruktur ersetzen.)

Schauen Sie Ihr Markup an

Sobald Sie die Struktur Ihrer Seiten analysiert haben, ist es Zeit, einen Blick unter die Oberfläche zu werfen und den HTML-Code nach Dingen abzusuchen, die eigentlich ins Layout gehören, um diese durch strukturelles Markup zu ersetzen.

Ersetzen Sie Layout-Tags durch strukturelles Markup

Sie können Suchen&Ersetzen (und Reguläre Ausdrücke benutzen, aber der einfachste Weg, das Ersetzen durchzuführen, ist wahrscheinlich, die alte Seite in einem Browser anzusehen und den Text von dort in Ihren HTML-Editor zu kopieren.

Denken Sie an die Struktur Ihres Dokuments! Bloß <b>-Tags durch <strong>-Tags zu ersetzen, ist nicht genug.

Was ist die wichtigste Überschrift? Markieren Sie diese mit einem <h1>-Tag. Benutzen Sie <h2>-Tags usw. für die untergeordneten Überschriften. Für Absätze verwenden Sie <p>-Tags. Aus Navigationsmenüs machen Sie ungeordnete Listen.

Suchen Sie sich einen DOCTYPE aus und benutzen Sie ihn. (Wir empfehlen XHTML Transitional, es sei denn, Sie sind Hardcore HTML-Coder, in diesem Fall benutzen Sie XHTML Strict.)

Teilen Sie Ihre Seite in logische divs auf

Stecken Sie Ihre Hauptnavigation in ein div mit einer id mit Namen "hauptnav"; für Ihre Unternavigation verwenden Sie ein div mit einer id oder class mit Namen "unternav", Die Fußzeile kriegt ein <div id="fusszeile">, und der Inhalt kommt in ein <div id="inhalt">.

Es sieht bisher nach nichts aus, aber sobald Sie anfangen, CSS Regeln zu erstellen, wird es ganz anders aussehen.

Es ist Zeit, das Stylesheet zu schreiben

Zunächst geben Sie jedem div einen Rahmen (border), beispielsweise div {border: 1px dotted gray; padding: .5em} Das wird Ihnen helfen, zu sehen, wo diese beginnen und enden, und ob Sie irgendwelche Bereiche verschachtelt haben oder nicht.

Schreiben Sie zuerst Ihr CSS für Element-Selektoren (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, usw.)

Nutzen Sie sinngemäße oder Nachfahrenselektoren so oft wie möglich. Das wird Ihr Markup sehr viel sauberer halten. Beispiel: #unternav li {border: 1px solid black; padding: .5em; display: inline} betrifft nur Listenelemente, die innerhalb ihres div namens "unternav" stehen.

Testen Sie Ihre Seiten in so vielen Browsern wie möglich, und lassen Sie Ihre Freunde die Seiten in ihren Browsern testen.

Beispielseiten, deren Layout mit CSS gemacht wurde

Lesen Sie alles über CSS

Es ist ganz klar, dass wir nicht alles, was Sie über CSS wissen müssen in eine Stunde packen können, aber diese Bücher hier können Ihnen helfen, Web Standards zu nutzen, um Ihre Seiten schlanker, sauberer und schneller zu machen.

Papier? Wir brauchen kein doofes Papier: Online Ressourcen

CSS-Discuss

zeldman.com The Daily Report: Verständlich, mit Denkanstößen, und gut geschriebener Inhalt und Links die regelmäßig auf neustem Stand gehalten werden.

A List Apart Für Leute, die Websites gestalten

The Web Standards project Hoch leben diese Leute.

CSS: A guide for the unglued Eine großartige Seite mit Links

CSS Layout Techniques: for Fun and Profit Layouts, die Sie für Ihre Projekte benutzen können, von Eric Costello. Dazu Quellen und Tutorials.

Real World Style CSS Layouts, Tipps, Tricks, und Techniken, von Mark Newhouse.

DevEdge Netscape Sidebar Tabs Unglaublich praktische Links zu den W3C Spezifikationen für CSS, HTML und das DOM.

New York Public Library Style Guide Eine sehr praktische Quelle zum Lernen der Grundlagen von XHTML and CSS.

The Business Benefits of Web Standards Gute Nachrichten für moderne Chefs. Web Standards präsentiert in einer Form, die auch ein Betriebswirt zu schätzen weiß.

SelfHTML - HTML-Dateien selbst erstellen DIE deutsche Quelle für HTML, CSS und JavaScript schlechthin.

Danke. Irgendwelche Fragen?

; Scott Design, Inc.

; Adobe Systems Incorporated

Martin 'Efchen' Friedrich
(German Version, Deutsche Version)

Kritik?! Don't blame us!

Ich habe mein Bestes gegeben, den Vortrag zu übersetzen. Aber vielleicht wollen Sie doch lieber die englische Originalversion lesen.

Even though I did my best translating this text, you still might want to read the original English version.

Andere Übersetzungen

Creative Commons LicenseThis work is licensed under a Creative Commons License.