PW-toXic
Lieutenant
- Registriert
- Jan. 2005
- Beiträge
- 966
Seit einigen Jahren kann man in fast allen Threads von Webdesign Neulingen immer wieder was Unwort "Table Layout" finden. Es wird den Leuten strengstens verboten unsichtbare Tabellen für das Layout zu verwenden, da diese nicht dafür konzipiert worden sind.
Die Organisation, die den Standard für die Web Sprachen wie (X)HTML und CSS definiert sieht das ähnlich:
Immerhin zieht w3.org in betracht, dass man Tables möglicherweise für das Layout benutzen muss:
1 Was ist "Table Layout"?
Sobald man ein Design für eine Webseite erstellt hat, muss man dieses in HTML umsetzen. Da die meisten Designer sehr in rechteckigen Bereichen denken, die nebeneinander liegen, und stark ineinander verschachtelt sind, haben sie in der Vergangenheit meistens auf in sich verschachtelte unsichtbare Tabellen zurückgegriffen, da man mit diesen das erstellte Design am einfachsten umsetzen kann. Ein sehr gutes Beispiel für diese Bauweise sieht man hier:
http://www1.opel.de/aktuell/news
2 Was ist die alternative Lösung?
Seitdem die Cascading Style Sheets (CSS) das Internet erobert haben, steigen nun mehr und mehr Webdesigner auf eine HTML bauweise mit möglichst wenig Elementen um, und schreiben die nötigen Layout Informationen in eine externe CSS Datei. Dies hat unter anderem zwei westenliche Vorteile:
1) Der Code für die Webseite wird deutlich kürzer
2) Der Code ist deutlich besser lesbar und somit wird die Wartbarkeit erhöht.
Mittlerweile hat sich eine große Hassgemeinschaft im Internet gebildet, die strikt die Benutzung von Tabellen für Layout Zwecke verbieten möchte. Es gibt zu Hauf Webseiten, die propagieren, wie man Webseiten aus technischer Sicht zu Gestalten hat, und erklärt den Leuten auf eine deutliche und einfache Weise, wie man sein gewünschtes Layout mit Hilfe der CSS Technik umsetzen kann. Da noch viele Leute entweder aus alter Gewohntheit oder des eigenes Verständis halber auf Tabellen fixiert sind, wird dort auch explizit erlkärt, wie man auf ein Layout rein auf CSS basierend umsetzen kann.
Ich nenne dies eine Hassgemeinschaft, weil diese Leute jede Webseite hassen, die auch nur eine einzige Tabelle für Layout Zwecke benutzt, und dem jeweiligen Webdesigner dazu zwingen möchte, gefälligst CSS zu lernen. Dafür geben diese Leute immer wieder die gleichen Gründe. Hier eine Auswahl:
1) Bei Tabellen für Layout Zwecke wir die Semantik verletzt
2) Tabellen benötigen deutlich mehr Code, und verursachen somit mehr Traffic
3) Die Wartbarkeit des Codes ist deutlich schlechter
4) Die Entwicklungszeit von Layouts mit Tabellen ist erheblich höher
5) Suchmaschinen unfreundlich
6) Längere Ladezeiten für den Benutzer
7) Vermischung von Inhalt und Präsentation
8) Barrierefreiheit: Tabellen können nicht richtig mit alternativen Anzeigegeräten angezeigt werden
9) Tabellen sind nicht zum Layouten da, sondern nur für Daten. (Im allgemein weltlich-menschlichen Sinne)
http://phrogz.net/CSS/WhyTablesAreBadForLayout.html
http://webdesign.about.com/od/layout/a/aa111102a.htm
http://www.workingwith.me.uk/table_free/seven_reasons_to_go_table_free
Das stimmt im Groben und Ganzen. Daher sehen die meisten Webdesigner den Vorteil, und haben bereits ihre Layout Gewohnheiten umgestellt, und setzen ihre präsentations spezifischen Eigenschaften mit CSS um. Jedoch sind mittlerweile sehr viele so stark von der Einfachheit von CSS begeistert, dass sie jeglichen Gebrauch von Tabellen für Layout Zwecke misbilligen, und mit der Holzhammer Methode alles mit dem HTML Element div und den CSS Eigenschaften umsetzen.
Daher rufe ich auf:
3 Die Tabelle hat weiterhin ihr Existenzrecht bei Layouts
Aber bevor ich hier genau erkläre warum und wieso, möchte ich vorher ganz klar festhalten:
Ein reines Table Layout wie z.B. die Opel Seite ist Müll, da die sinnvolle Nutzung der HTML Elemente wie Paragraphen, Listen, Headings usw. in Verbindung mit stylesheets in jeder Hinsicht die bessere Lösung sind, solange das was man umsetzen möchte mit dieser Technik auf direktem Wege möglich ist!
Nicht nur die Wartbarkeit des Codes wird dadurch erheblich verbessert, sondern man ist auch deutlich schneller mit der Erstellung des HTML/CSS Quellcodes fertig!
3.1 Warum verteidige ich die Tabelle?
Es gibt sicher mehrere Gründe, die an bestimmten Stellen für die Tabelle sprechen, aber ich beschränke mich auf ein einziges Beispiel, da dieses Beispiel vollkommen ausreicht um die Existenzberechtigung von Tabellen aufrecht zu erhalten. Das Grundproblem ist einfach: Die Mittel von CSS sind stark begrenzt. Sie reichen zwar für die meisten Sachen aus, jedoch nicht immer. Mit CSS hat man wenig Möglichkeiten sich auf andere Elemente zu beziehen, wenn man das Stylesheet für ein Element definiert. So kommt es, dass die Eigenschaften der Tabelle mit CSS nicht vollständig umsetzbar sind. Wenn man diese Eigenschaften aber dringend benötigt (Der Designer gibt das Layout vor!), dann sollte man nicht, wie es derzeit oft der gemacht wird, durch Tricks mit CSS/Javascript/Hacks diese Eigenschaften zu simulieren.
Eine direkte Umsetzung mit reinem CSS für die Anforderung, dass sich zwei oder mehr Elemente direkt von der Eigenschaft Höhe beinflussen, ist nicht möglich!
Hierfür ist in CSS nichts vorgesehen. Bei Tabellen ist dies aber allein aufgrund der Idee und Struktur jedoch bereits gegeben. Befindet man sich in einem solchen Fall, ist allermeistens die Tabelle die bessere Lösung!
Drei Spalten Layout mit einer Tabelle
http://pw-toxic.de/blog/80
Bis auf die <tr> Tags ist der Aufbau extrem einfach, und spiegelt genau das wieder was man machen möchte. Wichtig ist hierbei die Eigenschaft, dass alle drei Spalten gleich hoch sind! Ich habe der einfacheit halber eine Hintergrundfarbe gewählt, aber es ist auch denkbar, dass man mit borders oder auch Grafiken arbeitet.
Wenn man das ganze nun ohne Tabellen umsetzen möchte, wird es kompliziert, aber es geht! Da es sehr viele CSS Dogmatiker gibt, haben sich einige Leute viele Gedanken gemacht, wie man diese spezielle Anforderung nur mit CSS mitteln umsetzen kann. Ich muss zugeben, dass die Lösungen teilweise richtig genial und kreativ sind, aber darum geht es hier ja nicht.
Die beste Lösung die ich finden konnte, kommt von dieser Seite:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
Ich habe den Code auf das nötigste heruntergebrochen:
Drei Spalten Layout mit DIVs
http://pw-toxic.de/index/threeColLayout
Ich denke jedem leuchtet folgendes ein:
1) Das ist mehr code
2) Der code ist absolut unverständlich. Man muss sich eingehend damit im speziellen beschäftigen, um es zu verstehn
3) Der logische Aufbau widerspricht der Intuition, da die mittlere Spalte zuerst kommt (Anm. Ja ich weiss: SEO..)
4) Man hat hier eine böse div-Suppe, die mit Semantik rein garnichtsmehr am Hut hat.
Es ist pragmatischer Sicht einfach schlecht, wenn man diesen "CSS Hack" anstelle von einer einfachen Tabelle benutzt, wenn man einfach stur ein Layout umsetzen möchte.
(Ich bezeichne das im Gegensatz zum Author als CSS Hack, da hier CSS Eigenschaften benutzt werden, die für etwas anderes gedacht sind, nur um das gewünschte Verhalten herbeizuführen (right: xx%))
Ich gehe nur ausgehend von diesem Beispiel detailliert auf die oben genannten Gründe für reine CSS basierende Layouts ein: (teilweise umformuliert)
3.2 Warum die Argumente gegen Tabellen nichtmehr wirken
3.2.1 Bei Tabellen für Layout Zwecke wir die Semantik verletzt
Hier muss ich leider etwas weiter ausholen, da die Semantik ein sehr tiefgreifender und schwieriger Begriff ist. Ich gebe selbst zu, dass ich das ganze nicht vollständig durchblicke, jedoch wage ich zu Behaupten, dass ich von diesem Thema mehr Ahnung habe, als die allermeisten CSS Dogmatiker.
Arten der Semantik
Ich unterscheide im Bereich von HTML drei Arten von Semantik (geordnet nach Wichtigkeit)
1) Bedeutung des Inhalts
2) Strukturierung / Aufbau des Dokuments
3) Layout Semantik
Bedeutung des Inhalts:
Ich denke wir sind uns alle einig, dass dies mit HTML nicht möglich ist. Der vollständigkeit halber muss ich jedoch erwähnen, dass unter anderem folgende Tags genau dieser Semantik entsprechen:
<address></address>
Jedoch ist genau dies die Semantik, die im Web interessant ist, denn somit könnte man voralem über Suchmaschinen richtige Informations Netzwerke aufbauen! Dies entspricht dem Begriff des Semantik Web
Wenn man also Semantik haben möchte, dann doch bitte auf diese Weise!
Strukturierung / Aufbau des Dokuments
Dies ist die Semantik, mit der die CSS Dogmatiker immer argumentieren - Bewusst oder unbewusst, das konnte ich noch nicht herausfinden. Es geht darum, dass der Inhalt der Webseite strukturiert wird. Hierfür sind exemplarisch folgende Elemente sehr wichtig:
- p (Paragraph)
- hx; x € {1; ...; 6} (Heading)
- list (Liste)
Diese Elemente sollten so oft wie möglich an den Stellen wo sie Sinn machen verwendet werden, da man dadurch klar erkennen kann, wofür bestimmte Teile des Inhalts da sind. Die Verwendung hat nur Vorteile!
Wenn man diese Thematik jedoch auf das Beispiel oben bezieht, dann wird es eng! Wenn man das ganze sinnvoll aufbauen würde, dann müsste man es wie folgt machen:
Die Namen der divs sollte man natürlich so verwenden, wie sie dem Aufbau der Webseite entsprechen würde. Hier kommt eine gewisse intuitiv verständliche Semantik rein, die jedoch nirgendwo exakt definiert ist -> gefährlich!
Noch besser wäre:
Das ist jedoch eine fiktive Syntax, die so nicht existiert. wünschenwert wäre es so jedoch.
Klar wird jedoch, dass die div-Suppe von oben rein garnichtsmehr mit einer strukturellen Semantik zu tun hat, da die div-verschachtelung rein dem Layout dient, und nicht der Struktur des Dokuments, welche (möglicherweise) in drei Bereich aufgeteilt werden kann: Menü, Inhalt, und Sidebar (diese könnte man ggf. noch präziser benennen).
Layout Semantik
Das was ich oben gemacht habe hat mit einer strukturellen Semantik für das Dokument selbst, welches Informationen tragen soll, nichtsmehr zu tun, sondern hat etwas mit dem Aufbau und dem Layout der Webseite etwas zu tun. Ob ich das ganze nun mit divs oder Tabellen umsetze spielt in diesem Sinne keine Rolle, denn eine ordentliche Unterstützung der Layout Semantik gibt ebenfalls in HTML nicht.
Fazit
Das Argument der Semantik zieht hier nicht. Im besten Falle kann man hier der Tabelle mehr Semantik zuweisen, da das Layout schliesslich dem intuitiven Verhalten einer Tabelle entspricht. Wer hier also mit der Semantik argumentiert, hat sie nicht verstanden.
3.2.2 Tabellen benötigen deutlich mehr Code, und verursachen somit mehr Traffic
Darauf bin ich oben bereits eingangen. Offensichtlich ist das in diesem Fall ein Argument für die Tabelle, da mit weniger Code das gewünschte umgesetzt werden kann.
3.2.3 Die Wartbarkeit des Codes ist deutlich schlechter
Auch hierzu bin ich oben bereits eingangen. Ich denke ist ist vollkommen klar, dass auch hier dieses Argument wieder für die Tabelle spricht. Sollte das nicht sofort einleuchten, dann besteht hier sicherlich die Möglichkeit zur Diskussion.. Ich denke aber das ist nicht nötig, da es offensichtlich ist.
3.2.4 Die Entwicklungszeit von Layouts mit Tabellen ist erheblich höher
Der nächste Punkt, wo der Profitierende die Seiten wechselt. Um das obige reine CSS Layout ohne Tabellen umzusetzen, benötigt man deutlich mehr Zeit, selbst wenn man die Lösung bereits kennt! Dies wird vorallem dann deutlich, wenn man noch zusätzlich wie auf dem Beispiel des Authors dieses Layouts selbst, noch paddings zu den Spalten hinzufügt.
http://matthewjamestaylor.com/blog/perfect-3-column.htm
Den Quellcode kann man sich gerne einmal ansehen. Das wird dann noch eine ganzes Stück komplizierter! Wenn man die Lösung vorher nicht kennt, dann Schätze ich für die Erstellung dieses Layouts einen Zeitaufwand von einigen Stunden, obwohl man bereits umfangreiche Erfahrungen mit CSS hat, die hierfür zwingend erforderlich sind.
3.2.5 Suchmaschinen unfreundlich (SEO)
Dies habe ich nicht so genau untersucht, da ich mich damit nicht allzusehr beschäftigt habe. Jedoch möchte ich kurz festhalten:
1) Das ist nicht mein Problem, sondern das der Suchmaschine.
Und ich bin davon überzeugt, dass google damit sehr gut umgehen kann!
2) Trotz alledem ist die Tabelle aufgrund der Definition des W3C hier schlechter als die reine CSS basierte Lösung
3) Suchmaschinenfreundlichkeit ist eine nicht-funktionale Anforderung, die erstmal bei der Entwicklung einer Webseite definiert werden muss
Man kann zwar davon ausgehen, dass dies bei den meisten Webseiten eine wichtige Rolle spielt, aber man kann in der Allgemeinheit eben nicht davon ausgehn! Letzendlich muss man auch hier das magische Dreieck erwähnen: Kosten - Qualität - Zeit
3.2.6 Längere Ladezeiten für den Benutzer
Table wins.
3.2.7 Vermischung von Inhalt und Präsentation
Table wins. Siehe Semantik oben.
Eine Tabelle ist ein Mittel um ein Layout zu erstellen! Auch wenn die CSS Dogmatiker das nicht einsehen wollen. Fakt ist jedoch, dass eine solche Tabelle in HTML nicht existiert. Die Tabelle die ich oben verwende ist für die Darstellung und Strukturierung von Inhalten gedacht. Dies ist jedoch ein Problem von HTML und nicht von mir. Durch die div-Suppe wird wie oben schon erwähnt ebenfalls die Präsentation mit dem Inhalt vermischt, nur mit dem Unterschied, dass bei der Lösung mit der Tabelle dieser Teil deutlich kleiner ist, also mit der Lösung ohne Tabelle.
3.2.8 Barrierefreiheit: Tabellen können nicht richtig mit alternativen Anzeigegeräten angezeigt werden
Dies ist ebenfalls wieder eine nicht-funktionale Anforderung, die aber im Gegensaz zur Suchmaschinen-freundlichkeit deutlich seltener von Belang ist! Man kann nicht einfach allgemein mit diesem Argument angerannt kommen, wenn dies einfach keine Rolle bei dem System das man baut spielt.
Noch schlimmer wird es, wenn das Argument daraufhin verschärft wird, dass Leute mit Behinderungen Webseiten mit Tabellen schlechter lesen können. Dies ist ein Irrglaube! Davon abgesehn macht es kein Sinn mit dem Holzhammer zu versuchen ein Bildergallerie für Bilde zugänglich zu machen. (Ich wüsste garnicht wie das überhaupt funktionieren soll, aber es gibt sicher Möglichkeiten auch das zu schaffen
)
Bitte hört mir mit diesem Argument auf - Ich kann es nichtmehr ertragen!
(Anm. Bei meiner Webseite ist mir dieser Punkt jedoch nicht unwichtig! Das gilt aber halt nur im speziellen für meine Webseite(n)..)
3.2.9 Tabellen sind nicht zum Layouten da, sondern nur für Daten. (Im allgemein weltlich-menschlichen Sinne)
Falsch. (siehe oben)
Wer hat das eigentlich definiert? Wenn jemand bei der Gestaltung mit einem tabellarischem Aufbau arbeitet, dann kann man da argumentieren wie man will. Wofür etwas gut ist, definiert derjenige, der es benutzt!.
Wichtig: Ich spreche hier nicht von der HTML Tabelle, sondern von dem allgemeinen Begriff der Tabelle. Es reicht schon, wenn ich bei der Gestaltung einer Webseite im Kopf rein als Idee für die Strukturierung eine Tabelle benutze!
4 Fazit
Da die Kombination aus HTML und CSS nicht ausreicht um die praktischen Anforderungen an die Gestaltung von Webseiten umzusetzen, muss man hier pragmatisch denken, und der Tabelle ihr Existenzrecht für Layoutzwecke einräumen. Das Problem liegt nicht bei den Designern, sondern bei der Definition des HTML Standards. Desweiteren ist man auch stark and die Beschränkungen des Browsers gebunden. (IE 6!) Natürlich ist das der Fehler von dem Browser Hersteller, aber in der Praxis hilft dir diese Tatsache nicht - du musst deine Webseite trotzdem auf diesen Browsern zum laufen bekommen, wenn die nicht-funktionale Anforderung dies vorschreibt.
Die eigentliche Problem liegt ganz woanders: Es fehlen Abstraktionsschichten beim Aufbau von Webseiten. Man bräuchte prinzipiell eigentlich folgende Schichten:
1) Inhalt der Webseite (Semantik!) --> RDF
2) Aufbau und Struktur des Layouts
3) Stylesheets
Derzeit wird strukturierter Inhalt, (Bedeutungs-)Semantik und Präsentation miteinander vermischt (DIV oder Table Lösung). Das ist nicht gut!
5 Persönliche Einstellung
Ich selbst habe schon lange keine Tabellen mehr verwendet, da ich meine Webseiten selbst designe, oder meine Designs von Desgiern bekomme, die in einem Bereich arbeiten, wo z.B. 3-spaltige Layouts nicht nötig sind, bzw die schlechtere Wahl im Sinne des Designs sind. Dennoch bin ich immer wieder frustriert, wenn ich mit ansehen muss, wie überall im Internet Neulingen und halb-profis eine falsche praktische Grundlage für die Gestaltung einer Webseite gegeben wird. Das geht mittlerweile so weit, dass Designs, die ein drei-spalten-layout benötigen als schlecht dargestellt werden. Das ist einfach eine traurige Argumentation, die es garnicht Wert ist, in die Liste der Argumente oben mit aufzunehmen. Wie etwas aussieht hat der Designer zu sagen, und nicht derjnige, der es dann umzusetzen hat.
Wie man auf meiner eigenen Webseite sehen kann, benutze ich keine Tabellen: 6 Sonstige interessante Links und Zitate zum Thema[/SIZE]
[url]http://www.flownet.com/ron/css-rant.html
Seitdem ich diesen Artikel gelesen hab, ist mein Verlangen nach dem Verfassen dieses Artikels erheblich gestiegen. Ich hatte das schon länger vor, da mir der "CSS-War" einfach suspekt ist. Existieren tut er jedoch auf alle Fälle!
http://stackoverflow.com/questions/282489/css-div-w-border-images
Hier noch ein Beispiel, wo mittels einer DIV-Suppe etwas umgesetzt wird, was aufgrund der Beschränktheit von CSS nicht besser zu machen ist. Die Semantik geht auch hier den Bach herunter!
Für mich ist das einzig wichtige Argument das folgende: Wartbarkeit und Lesbarkeit des Codes.
Die Organisation, die den Standard für die Web Sprachen wie (X)HTML und CSS definiert sieht das ähnlich:
Man beachte jedoch, dass hier das Wort "should" steht.
Immerhin zieht w3.org in betracht, dass man Tables möglicherweise für das Layout benutzen muss:
1 Was ist "Table Layout"?
Sobald man ein Design für eine Webseite erstellt hat, muss man dieses in HTML umsetzen. Da die meisten Designer sehr in rechteckigen Bereichen denken, die nebeneinander liegen, und stark ineinander verschachtelt sind, haben sie in der Vergangenheit meistens auf in sich verschachtelte unsichtbare Tabellen zurückgegriffen, da man mit diesen das erstellte Design am einfachsten umsetzen kann. Ein sehr gutes Beispiel für diese Bauweise sieht man hier:
http://www1.opel.de/aktuell/news
2 Was ist die alternative Lösung?
Seitdem die Cascading Style Sheets (CSS) das Internet erobert haben, steigen nun mehr und mehr Webdesigner auf eine HTML bauweise mit möglichst wenig Elementen um, und schreiben die nötigen Layout Informationen in eine externe CSS Datei. Dies hat unter anderem zwei westenliche Vorteile:
1) Der Code für die Webseite wird deutlich kürzer
2) Der Code ist deutlich besser lesbar und somit wird die Wartbarkeit erhöht.
Mittlerweile hat sich eine große Hassgemeinschaft im Internet gebildet, die strikt die Benutzung von Tabellen für Layout Zwecke verbieten möchte. Es gibt zu Hauf Webseiten, die propagieren, wie man Webseiten aus technischer Sicht zu Gestalten hat, und erklärt den Leuten auf eine deutliche und einfache Weise, wie man sein gewünschtes Layout mit Hilfe der CSS Technik umsetzen kann. Da noch viele Leute entweder aus alter Gewohntheit oder des eigenes Verständis halber auf Tabellen fixiert sind, wird dort auch explizit erlkärt, wie man auf ein Layout rein auf CSS basierend umsetzen kann.
Ich nenne dies eine Hassgemeinschaft, weil diese Leute jede Webseite hassen, die auch nur eine einzige Tabelle für Layout Zwecke benutzt, und dem jeweiligen Webdesigner dazu zwingen möchte, gefälligst CSS zu lernen. Dafür geben diese Leute immer wieder die gleichen Gründe. Hier eine Auswahl:
1) Bei Tabellen für Layout Zwecke wir die Semantik verletzt
2) Tabellen benötigen deutlich mehr Code, und verursachen somit mehr Traffic
3) Die Wartbarkeit des Codes ist deutlich schlechter
4) Die Entwicklungszeit von Layouts mit Tabellen ist erheblich höher
5) Suchmaschinen unfreundlich
6) Längere Ladezeiten für den Benutzer
7) Vermischung von Inhalt und Präsentation
8) Barrierefreiheit: Tabellen können nicht richtig mit alternativen Anzeigegeräten angezeigt werden
9) Tabellen sind nicht zum Layouten da, sondern nur für Daten. (Im allgemein weltlich-menschlichen Sinne)
http://phrogz.net/CSS/WhyTablesAreBadForLayout.html
http://webdesign.about.com/od/layout/a/aa111102a.htm
http://www.workingwith.me.uk/table_free/seven_reasons_to_go_table_free
Das stimmt im Groben und Ganzen. Daher sehen die meisten Webdesigner den Vorteil, und haben bereits ihre Layout Gewohnheiten umgestellt, und setzen ihre präsentations spezifischen Eigenschaften mit CSS um. Jedoch sind mittlerweile sehr viele so stark von der Einfachheit von CSS begeistert, dass sie jeglichen Gebrauch von Tabellen für Layout Zwecke misbilligen, und mit der Holzhammer Methode alles mit dem HTML Element div und den CSS Eigenschaften umsetzen.
Daher rufe ich auf:
3 Die Tabelle hat weiterhin ihr Existenzrecht bei Layouts
Aber bevor ich hier genau erkläre warum und wieso, möchte ich vorher ganz klar festhalten:
Ein reines Table Layout wie z.B. die Opel Seite ist Müll, da die sinnvolle Nutzung der HTML Elemente wie Paragraphen, Listen, Headings usw. in Verbindung mit stylesheets in jeder Hinsicht die bessere Lösung sind, solange das was man umsetzen möchte mit dieser Technik auf direktem Wege möglich ist!
Nicht nur die Wartbarkeit des Codes wird dadurch erheblich verbessert, sondern man ist auch deutlich schneller mit der Erstellung des HTML/CSS Quellcodes fertig!
3.1 Warum verteidige ich die Tabelle?
Es gibt sicher mehrere Gründe, die an bestimmten Stellen für die Tabelle sprechen, aber ich beschränke mich auf ein einziges Beispiel, da dieses Beispiel vollkommen ausreicht um die Existenzberechtigung von Tabellen aufrecht zu erhalten. Das Grundproblem ist einfach: Die Mittel von CSS sind stark begrenzt. Sie reichen zwar für die meisten Sachen aus, jedoch nicht immer. Mit CSS hat man wenig Möglichkeiten sich auf andere Elemente zu beziehen, wenn man das Stylesheet für ein Element definiert. So kommt es, dass die Eigenschaften der Tabelle mit CSS nicht vollständig umsetzbar sind. Wenn man diese Eigenschaften aber dringend benötigt (Der Designer gibt das Layout vor!), dann sollte man nicht, wie es derzeit oft der gemacht wird, durch Tricks mit CSS/Javascript/Hacks diese Eigenschaften zu simulieren.
Eine direkte Umsetzung mit reinem CSS für die Anforderung, dass sich zwei oder mehr Elemente direkt von der Eigenschaft Höhe beinflussen, ist nicht möglich!
Hierfür ist in CSS nichts vorgesehen. Bei Tabellen ist dies aber allein aufgrund der Idee und Struktur jedoch bereits gegeben. Befindet man sich in einem solchen Fall, ist allermeistens die Tabelle die bessere Lösung!
Drei Spalten Layout mit einer Tabelle
HTML:
<table id="colmask">
<tr>
<td id="colLeft">Spalte 1</td>
<td id="colMid">Spalte 2</td>
<td id="colRight">Spalte 3</td>
</tr>
</table>
HTML:
#colmask {
width: 100%;
border-collapse: collapse;
}
#colLeft {
width: 20%;
background: red;
vertical-align: top;
}
#colmid {
width: 60%;
background: green;
vertical-align: top;
}
#colRight {
width: 20%
background: blue;
vertical-align: top;
}Bis auf die <tr> Tags ist der Aufbau extrem einfach, und spiegelt genau das wieder was man machen möchte. Wichtig ist hierbei die Eigenschaft, dass alle drei Spalten gleich hoch sind! Ich habe der einfacheit halber eine Hintergrundfarbe gewählt, aber es ist auch denkbar, dass man mit borders oder auch Grafiken arbeitet.
Wenn man das ganze nun ohne Tabellen umsetzen möchte, wird es kompliziert, aber es geht! Da es sehr viele CSS Dogmatiker gibt, haben sich einige Leute viele Gedanken gemacht, wie man diese spezielle Anforderung nur mit CSS mitteln umsetzen kann. Ich muss zugeben, dass die Lösungen teilweise richtig genial und kreativ sind, aber darum geht es hier ja nicht.
Die beste Lösung die ich finden konnte, kommt von dieser Seite:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
Ich habe den Code auf das nötigste heruntergebrochen:
Drei Spalten Layout mit DIVs
HTML:
<div id="colmask">
<div id="colmid">
<div id="colleft">
<div id="col1">Spalte 2</div>
<div id="col2">Spalte 1 <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> langer text</div>
<div id="col3">Spalte 3</div>
</div>
</div>
</div>
HTML:
#colmask, #colleft, #colmid {
float: left;
position: relative;
}
#colmask {
background: #9a9a9a;
overflow: hidden;
width: 100%;
clear: both;
}
#colleft {
background: #dbdbdb;
right: 60%;
width: 100%;
}
#colmid {
background: #abd6f4;
right: 20%;
width: 100%;
}
#col1, #col2, #col3 {
float: left;
position: relative;
overflow: hidden;
}
#col1 {
width: 60%;
left: 100%;
}
#col2 {
width: 20%;
left: 20%;
}
#col3 {
width: 20%;
left: 80%;
}Ich denke jedem leuchtet folgendes ein:
1) Das ist mehr code
2) Der code ist absolut unverständlich. Man muss sich eingehend damit im speziellen beschäftigen, um es zu verstehn
3) Der logische Aufbau widerspricht der Intuition, da die mittlere Spalte zuerst kommt (Anm. Ja ich weiss: SEO..)
4) Man hat hier eine böse div-Suppe, die mit Semantik rein garnichtsmehr am Hut hat.
Es ist pragmatischer Sicht einfach schlecht, wenn man diesen "CSS Hack" anstelle von einer einfachen Tabelle benutzt, wenn man einfach stur ein Layout umsetzen möchte.
(Ich bezeichne das im Gegensatz zum Author als CSS Hack, da hier CSS Eigenschaften benutzt werden, die für etwas anderes gedacht sind, nur um das gewünschte Verhalten herbeizuführen (right: xx%))
Ich gehe nur ausgehend von diesem Beispiel detailliert auf die oben genannten Gründe für reine CSS basierende Layouts ein: (teilweise umformuliert)
3.2 Warum die Argumente gegen Tabellen nichtmehr wirken
3.2.1 Bei Tabellen für Layout Zwecke wir die Semantik verletzt
Hier muss ich leider etwas weiter ausholen, da die Semantik ein sehr tiefgreifender und schwieriger Begriff ist. Ich gebe selbst zu, dass ich das ganze nicht vollständig durchblicke, jedoch wage ich zu Behaupten, dass ich von diesem Thema mehr Ahnung habe, als die allermeisten CSS Dogmatiker.
Arten der Semantik
Ich unterscheide im Bereich von HTML drei Arten von Semantik (geordnet nach Wichtigkeit)
1) Bedeutung des Inhalts
2) Strukturierung / Aufbau des Dokuments
3) Layout Semantik
Bedeutung des Inhalts:
Ich denke wir sind uns alle einig, dass dies mit HTML nicht möglich ist. Der vollständigkeit halber muss ich jedoch erwähnen, dass unter anderem folgende Tags genau dieser Semantik entsprechen:
<address></address>
<title></title>
Das ist jedoch sehr rudimentär!
Jedoch ist genau dies die Semantik, die im Web interessant ist, denn somit könnte man voralem über Suchmaschinen richtige Informations Netzwerke aufbauen! Dies entspricht dem Begriff des Semantik Web
Es gibt auch bereits einen guten Standard der genau dafür da ist: Resource Description Framework
Wenn man also Semantik haben möchte, dann doch bitte auf diese Weise!
Strukturierung / Aufbau des Dokuments
Dies ist die Semantik, mit der die CSS Dogmatiker immer argumentieren - Bewusst oder unbewusst, das konnte ich noch nicht herausfinden. Es geht darum, dass der Inhalt der Webseite strukturiert wird. Hierfür sind exemplarisch folgende Elemente sehr wichtig:
- p (Paragraph)
- hx; x € {1; ...; 6} (Heading)
- list (Liste)
Diese Elemente sollten so oft wie möglich an den Stellen wo sie Sinn machen verwendet werden, da man dadurch klar erkennen kann, wofür bestimmte Teile des Inhalts da sind. Die Verwendung hat nur Vorteile!
Wenn man diese Thematik jedoch auf das Beispiel oben bezieht, dann wird es eng! Wenn man das ganze sinnvoll aufbauen würde, dann müsste man es wie folgt machen:
HTML:
<div id="menu"></div>
<div id="content"></div>
<div id="shortInfo"></div>Noch besser wäre:
HTML:
<menu></menu>
<content></content>
<sidebar></sidebar>Klar wird jedoch, dass die div-Suppe von oben rein garnichtsmehr mit einer strukturellen Semantik zu tun hat, da die div-verschachtelung rein dem Layout dient, und nicht der Struktur des Dokuments, welche (möglicherweise) in drei Bereich aufgeteilt werden kann: Menü, Inhalt, und Sidebar (diese könnte man ggf. noch präziser benennen).
Layout Semantik
Das was ich oben gemacht habe hat mit einer strukturellen Semantik für das Dokument selbst, welches Informationen tragen soll, nichtsmehr zu tun, sondern hat etwas mit dem Aufbau und dem Layout der Webseite etwas zu tun. Ob ich das ganze nun mit divs oder Tabellen umsetze spielt in diesem Sinne keine Rolle, denn eine ordentliche Unterstützung der Layout Semantik gibt ebenfalls in HTML nicht.
Fazit
Das Argument der Semantik zieht hier nicht. Im besten Falle kann man hier der Tabelle mehr Semantik zuweisen, da das Layout schliesslich dem intuitiven Verhalten einer Tabelle entspricht. Wer hier also mit der Semantik argumentiert, hat sie nicht verstanden.
3.2.2 Tabellen benötigen deutlich mehr Code, und verursachen somit mehr Traffic
Darauf bin ich oben bereits eingangen. Offensichtlich ist das in diesem Fall ein Argument für die Tabelle, da mit weniger Code das gewünschte umgesetzt werden kann.
3.2.3 Die Wartbarkeit des Codes ist deutlich schlechter
Auch hierzu bin ich oben bereits eingangen. Ich denke ist ist vollkommen klar, dass auch hier dieses Argument wieder für die Tabelle spricht. Sollte das nicht sofort einleuchten, dann besteht hier sicherlich die Möglichkeit zur Diskussion.. Ich denke aber das ist nicht nötig, da es offensichtlich ist.
3.2.4 Die Entwicklungszeit von Layouts mit Tabellen ist erheblich höher
Der nächste Punkt, wo der Profitierende die Seiten wechselt. Um das obige reine CSS Layout ohne Tabellen umzusetzen, benötigt man deutlich mehr Zeit, selbst wenn man die Lösung bereits kennt! Dies wird vorallem dann deutlich, wenn man noch zusätzlich wie auf dem Beispiel des Authors dieses Layouts selbst, noch paddings zu den Spalten hinzufügt.
http://matthewjamestaylor.com/blog/perfect-3-column.htm
Den Quellcode kann man sich gerne einmal ansehen. Das wird dann noch eine ganzes Stück komplizierter! Wenn man die Lösung vorher nicht kennt, dann Schätze ich für die Erstellung dieses Layouts einen Zeitaufwand von einigen Stunden, obwohl man bereits umfangreiche Erfahrungen mit CSS hat, die hierfür zwingend erforderlich sind.
3.2.5 Suchmaschinen unfreundlich (SEO)
Dies habe ich nicht so genau untersucht, da ich mich damit nicht allzusehr beschäftigt habe. Jedoch möchte ich kurz festhalten:
1) Das ist nicht mein Problem, sondern das der Suchmaschine.
Und ich bin davon überzeugt, dass google damit sehr gut umgehen kann!
2) Trotz alledem ist die Tabelle aufgrund der Definition des W3C hier schlechter als die reine CSS basierte Lösung
3) Suchmaschinenfreundlichkeit ist eine nicht-funktionale Anforderung, die erstmal bei der Entwicklung einer Webseite definiert werden muss
Man kann zwar davon ausgehen, dass dies bei den meisten Webseiten eine wichtige Rolle spielt, aber man kann in der Allgemeinheit eben nicht davon ausgehn! Letzendlich muss man auch hier das magische Dreieck erwähnen: Kosten - Qualität - Zeit
3.2.6 Längere Ladezeiten für den Benutzer
Table wins.
3.2.7 Vermischung von Inhalt und Präsentation
Table wins. Siehe Semantik oben.
Eine Tabelle ist ein Mittel um ein Layout zu erstellen! Auch wenn die CSS Dogmatiker das nicht einsehen wollen. Fakt ist jedoch, dass eine solche Tabelle in HTML nicht existiert. Die Tabelle die ich oben verwende ist für die Darstellung und Strukturierung von Inhalten gedacht. Dies ist jedoch ein Problem von HTML und nicht von mir. Durch die div-Suppe wird wie oben schon erwähnt ebenfalls die Präsentation mit dem Inhalt vermischt, nur mit dem Unterschied, dass bei der Lösung mit der Tabelle dieser Teil deutlich kleiner ist, also mit der Lösung ohne Tabelle.
3.2.8 Barrierefreiheit: Tabellen können nicht richtig mit alternativen Anzeigegeräten angezeigt werden
Dies ist ebenfalls wieder eine nicht-funktionale Anforderung, die aber im Gegensaz zur Suchmaschinen-freundlichkeit deutlich seltener von Belang ist! Man kann nicht einfach allgemein mit diesem Argument angerannt kommen, wenn dies einfach keine Rolle bei dem System das man baut spielt.
Noch schlimmer wird es, wenn das Argument daraufhin verschärft wird, dass Leute mit Behinderungen Webseiten mit Tabellen schlechter lesen können. Dies ist ein Irrglaube! Davon abgesehn macht es kein Sinn mit dem Holzhammer zu versuchen ein Bildergallerie für Bilde zugänglich zu machen. (Ich wüsste garnicht wie das überhaupt funktionieren soll, aber es gibt sicher Möglichkeiten auch das zu schaffen
)Bitte hört mir mit diesem Argument auf - Ich kann es nichtmehr ertragen!
(Anm. Bei meiner Webseite ist mir dieser Punkt jedoch nicht unwichtig! Das gilt aber halt nur im speziellen für meine Webseite(n)..)
3.2.9 Tabellen sind nicht zum Layouten da, sondern nur für Daten. (Im allgemein weltlich-menschlichen Sinne)
Falsch. (siehe oben)
Wer hat das eigentlich definiert? Wenn jemand bei der Gestaltung mit einem tabellarischem Aufbau arbeitet, dann kann man da argumentieren wie man will. Wofür etwas gut ist, definiert derjenige, der es benutzt!.
Wichtig: Ich spreche hier nicht von der HTML Tabelle, sondern von dem allgemeinen Begriff der Tabelle. Es reicht schon, wenn ich bei der Gestaltung einer Webseite im Kopf rein als Idee für die Strukturierung eine Tabelle benutze!
4 Fazit
Da die Kombination aus HTML und CSS nicht ausreicht um die praktischen Anforderungen an die Gestaltung von Webseiten umzusetzen, muss man hier pragmatisch denken, und der Tabelle ihr Existenzrecht für Layoutzwecke einräumen. Das Problem liegt nicht bei den Designern, sondern bei der Definition des HTML Standards. Desweiteren ist man auch stark and die Beschränkungen des Browsers gebunden. (IE 6!) Natürlich ist das der Fehler von dem Browser Hersteller, aber in der Praxis hilft dir diese Tatsache nicht - du musst deine Webseite trotzdem auf diesen Browsern zum laufen bekommen, wenn die nicht-funktionale Anforderung dies vorschreibt.
Die eigentliche Problem liegt ganz woanders: Es fehlen Abstraktionsschichten beim Aufbau von Webseiten. Man bräuchte prinzipiell eigentlich folgende Schichten:
1) Inhalt der Webseite (Semantik!) --> RDF
2) Aufbau und Struktur des Layouts
3) Stylesheets
Derzeit wird strukturierter Inhalt, (Bedeutungs-)Semantik und Präsentation miteinander vermischt (DIV oder Table Lösung). Das ist nicht gut!
5 Persönliche Einstellung
Ich selbst habe schon lange keine Tabellen mehr verwendet, da ich meine Webseiten selbst designe, oder meine Designs von Desgiern bekomme, die in einem Bereich arbeiten, wo z.B. 3-spaltige Layouts nicht nötig sind, bzw die schlechtere Wahl im Sinne des Designs sind. Dennoch bin ich immer wieder frustriert, wenn ich mit ansehen muss, wie überall im Internet Neulingen und halb-profis eine falsche praktische Grundlage für die Gestaltung einer Webseite gegeben wird. Das geht mittlerweile so weit, dass Designs, die ein drei-spalten-layout benötigen als schlecht dargestellt werden. Das ist einfach eine traurige Argumentation, die es garnicht Wert ist, in die Liste der Argumente oben mit aufzunehmen. Wie etwas aussieht hat der Designer zu sagen, und nicht derjnige, der es dann umzusetzen hat.
Wie man auf meiner eigenen Webseite sehen kann, benutze ich keine Tabellen: 6 Sonstige interessante Links und Zitate zum Thema[/SIZE]
[url]http://www.flownet.com/ron/css-rant.html
Seitdem ich diesen Artikel gelesen hab, ist mein Verlangen nach dem Verfassen dieses Artikels erheblich gestiegen. Ich hatte das schon länger vor, da mir der "CSS-War" einfach suspekt ist. Existieren tut er jedoch auf alle Fälle!
http://stackoverflow.com/questions/282489/css-div-w-border-images
Hier noch ein Beispiel, wo mittels einer DIV-Suppe etwas umgesetzt wird, was aufgrund der Beschränktheit von CSS nicht besser zu machen ist. Die Semantik geht auch hier den Bach herunter!
Da geht die Suchmaschinenfreundlichkeit den Bach runter... und auch viele andere Sachen. Sind deswegen Flash Seiten prinzipiell böse, schlecht und dumm? Ich mag keine Flash Seiten, aber nur aus rein user-orientierten und Design Gründen. Dennoch sieht man hier ganz deutlich wie irrsinnig die ganze Argumentation für rein CSS basierte Layouts sind.
Für mich ist das einzig wichtige Argument das folgende: Wartbarkeit und Lesbarkeit des Codes.
Das wäre die eigentlich Lösung
Die Thematik mit einem Satz auf den Punkt gebracht!
Zuletzt bearbeitet:
.
