table vs. div Diskussion

Hi Leute,

was ich hier jetzt vorzutragen habe ist nicht wirklich ein Problem, da ja alles soweit funktioniert.
Es geht nur darum was sinnvoller ist, der Einsatz einer Tabelle oder von div-Elementen.

Mal kurz zur Info:
Ich bastel halt grad an meiner Webseite, ich will auf Frames verzichten, jedoch eine aehnliche Funktionalitaet erhalten, also Menue auf der linken Seite und dynamischen (per PHP generierten) Inhalt auf der rechten Seite.
Da ich zu Beginn keinen Plan hatte wie ich das mit div-Elementen umsetze, hab ich das ganze erstmal mit einer Tabelle gemacht.
Also include ich in einem td-Element das Menue, und im anderen ein File welches per Parameter uebergeben wird, oder, falls Parameter nicht vorhanden, die Willkommens-Seite.

Nachdem ich mich dann hier auf Tutorials in Sachen DIVs ein bissl schlau gemacht hab, hab ich das ganze jetzt mit div-Elementen realisiert. Sieht genauso aus, hat keine Tabelle mehr, nutzt dafuer aber CSS. Jetzt werden halt die einzelnen Files nicht in TDs includet, sondern in DIVs.

Wie gesagt, es funktioniert alles wunderbar, beide Loesungen machen keinerlei Probleme.
Meine Frage ist jetzt nur: Was ist sinnvoller? Eine Tabelle oder CSS?
Was fuer mich fuer eine Tabelle spricht ist, dass CSS mit dem Lynx nicht funktioniert.
Da auf meiner Website hauptsaechlich Informationen und Links im Bereich Linux zu finden sein werden dachte ich, dass es evtl. nicht ganz unsinnig ist diesen Browser zu auch beruecksichtigen. Das war auch der Hauptgruend warum ich mich gegen Frames entschieden habe.

Jetzt moechte ich mal allgemein Eure Meinungen zum Thema Tables vs. CSS hoeren.
Viel Spass.

tabellen sind für tabellarische auflistungen. Daher würde ich bein eine Design zu div tendieren.

Außerdem habe ich irgerdwo mal gelesen, dass ein div-design, welches genauso ausieht wie das tabellendesign, deutlich kleiner sein kann vom code her und daher schnellere ladezeiten.

1. Verzicht auf Tabellen beim Strukturieren der Seite ermöglicht semantisches Markup. Das heißt, ein div markiert einen Abschnitt (engl. division), ein p einen Absatz (engl. paragraph), ein h1 eine Überschrift 1. Ordnung (engl. header) usw. Und ein table markiert eine Tabelle - und nichts anderes! So lässt sich eine Seite im Notfall auch vollkommen ohne Browser lesen.

2. Trennung von Information und Layout. Dadurch kannst du deiner Seite ein komplett anderes Aussehen verleihen, ohne auch nur ein Zeichen im Markup geändert zu haben. Informationen werden damit auch unabhängig vom Layout angeboten. Vorteilhaft ist in dem Zusammenhang z.B., dass man für verschiedene Ausgabemedien (PC, PDA, Handy, Ausdruck...) verschiedene Layouts definieren kann.

3. Barrierefreiheit. Auch behinderte Menschen wollen das Internet nutzen. Tabellendesigns machen es bspw. Blinden schwer, sich auf einer Seite zurechtzufinden. Semantisches Markup gibt Informationen strukturiert wieder - auf Hilfsmittel angewiesene Menschen haben wesentlich weniger Probleme, die Informationen zu erfassen.

4. Dass Lynx kein CSS unterstützt, spricht nicht für Tabellendesigns! Im Gegenteil, semantischen Markup in Verbindung mit CSS frisst Lynx am liebsten. Denn: das semantische Markup ermöglicht es Lynx, die Seite nach bestimmten Gesichtspunkten bei der Anzeige selbstständig zu strukturieren (Überschriften hervorherben, Listen als solche darstellen...). Benutzer grafischer Browser sehen das selbe Markup in voller CSS-Pracht (sofern gewünscht - man kann CSS natürlich auch deaktivieren und sich die Seite ohne besonderes Layout anzeigen lassen.)

Das sind jetzt nur ein paar Punkte, die mir grad eingefallen sind.

Wenn du mal ein Beispiel für eine Seite willst, die diese Möglichkeiten von "div-Layouts" mMn sehr gut ausnutzt, dann solltest du dir mal stopdesign.com ansehen. Wenn möglich auch mit Lynx, damit du den Unterschied siehst

Ein semantisch strukturiertes Design ist einem tabellenbasierten definitiv vorzuziehen. Neben den von meinen Vorredern erwähnten Punkten möchte ich noch weitere anreißen:

Wie Pherseus es bereits erwähnte hat ein semantisch strukturiertes Design unter Inhilfenahme von CSS durchaus Vorteile gegenüber dem „klassischen“ Layout von strukturierenden Tabellen in Verbindung mit Platzhalterbildern und ähnlichem. Denn ein CSS-gestütztes Design kann ungemein Datentransfer sparen. So hat Douglas Bowman ein dem willkürlich gewählten Beispiel Mircosoft bewiesen, dass sich durch CSS-basiertem Layout eine Datenersparnis von bis zu 62% erzielen lässt.

Weitergehend sind Tabellen einfach für tabellarische Daten gedacht. Daran lässt sich nicht rütteln.

HI,

mal eine Zwischenfrage:
gilt semantisch nur für Strukturierungen mit <DIV> oder auch für solche mit <Layer>?

B

Soviel ich weiß, wird das proprietäre layer-Element nur vom Netscape 4 und sollte daher nicht benutzt werden. Das div-Element hingegen existiert bereits seit HTML 2.0 und wird von allen gängigen Browsern interpretiert.

Hallo,
erst kürzlich habe ich mich in ähnlicher Situation befunden....

hier eine ganz interessante Webseite die mir damals weitergeholfen hat

Warum Layout mit Tabellen dumm ist...

Gruss doc

Sorry Jungs,

ich war gestern so in meiner Dreamweaver Terminologie gefangen, das ich einen absolut positionierten DIV als Layer bezeichnet habe, tschuldigung - so steht das nämlich im Menu im Dreamweaver...

Den Link kenne ich ist ein gelungenes Beispile für eine gute Online Präsentation....

B