Tabellendesign vs. non-Tabellendesign

Hi,

folgendes Problem: Ich habe ne Site die ein non-Tabellen Design hat (Was für ein Kraftakt!) und alles schön, wie es ja immer so geheiligt wird, mit <div> gemacht.

Bei einem Forum hört das jedoch auf. Nehmen wir mal die Indexseite von diesem Board. Wie soll man sowasmit <div> machen können?!?!

Ist es da nicht "besser" auf <div> zu verzichten und stattdessen weiter tabellen zu benutzen? Traffic ist ja wohl in der heutigen Zeit kein Argument mehr, wo jeder ne 6MBit Leitung hat :p

flenders

Tabellen darfs du natürlich mit HTML-Tabellen machen, du sollst sie nur nich für normale Design-Aufgaben missbrauchen...

flenders schrieb:

Tabellen darfs du natürlich mit HTML-Tabellen machen, du sollst sie nur nich für normale Design-Aufgaben missbrauchen...

Und was ist mit einem ins design integriertem forum?

eiskalt

das machst du als tabelle du kannst doch eine tabelle in ein div einfügen

Warum dann nicht gleich Tabellen? Wieso so ein extremes hin und her für eigentlich eines: gar nix.

Ich versteh nicht wieso ich <div> für designs benutzen soll, mich mit jeder scheiss Darstellung von N Browsern rumschlagen muss wenn es bei Tabellen direkt klappt auf 99% aller Browser ohne Hin und Her? Wo ist der Sinn dahinter? Geld und Zeit zuviel?

Gibt es da mal triftige Gründe für, das man sich mehrere Stunden mehraufwand machen soll oder gibt es da wie im FAQ nur so eine 08/15 Aussage, das es "Besser" ist?

flenders

+++++++++++ schrieb:

Gibt es da mal triftige Gründe für, das man sich mehrere Stunden mehraufwand machen soll oder gibt es da wie im FAQ nur so eine 08/15 Aussage, das es "Besser" ist?

Schau es dir doch einfach mal selber an: http://www.c-plusplus.net/forum/viewtopic-var-t-is-41405.html

Weil es flexibler sit mit DIVs zu arbeiten. Wenn du Änderungen am Design vornehmen willst, ist es immer ein großer Akt die Tabellen umzustrukturieren.

Den DIVs kannst du - via Styles - leicht neue Positionen und Größen zuweisen.

Flexibilität:
CSS ist viel flexibler als Tabellen. Man kann Boxen überlappen lassen. Abstände willkürlich festlegen usw. CSS Seiten sehen auf kleinen Bildschirmen meistens nicht so gequetscht aus, wie Tabellen. Auch das Ausblenden einzelner Bereich ist einfach möglich.

Heute kann von einer als Standardauflösung 1024x768x16 ausgehen. Ergo: Genug Platz. Für mich kein ausschlaggebendes Argument, da ich bisher weder eine Firma noch eine Privatperson gesehen habe, die mit 640x480x8 noch rumkutschert fürs Internet.

Geschwindigkeit:
Tabellen werden oft erst dargestellt, wenn die komplette Seite geladen wurde oder es muss nochmal korrigiert werden.

Wir leben in Zeiten wo DSL 2000 Standard sind. Dieses Forum wird bei mir auf ner DSL 1000 Leitung blitzschnell geladen. Ergo: Kein Argument für die Jetztzeit.

Wartung:
Der eine Teil der Box ist mir doch zu klein? Kein Problem, mit CSS ändere ich einfach einen einzigen Wert unabhängig, wie viele Seiten ich verwalte.

Tja, und was ist mit den Unterschieden zwischen den Box-Modellen unter den Browsern? „Etwas schönreden“ nenn ich das. Bei so was bekomm ich nämlich Zustände, wenn IE, FF, Opera, Netscape oder Conquer usw. die Seiten unterschiedlich darstellen. Aber Tabellen lustigerweise alle gleich. Ergo: Wunschträumen ist das – kein richtiges Argument.

Der Code ist auch viel klarer, es ist einfacher Änderungen vorzunehmen.

Ansichtssache, bin ich ehrlich! In einer Baumstruktur liegt beides vor. Ergo: Kein richtiges Argument, da Ansichtssache.

Traffic:
Manch einer zahlt da ja richtig Geld für. CSS Definitionen sind in der Regel viel Platzsparender als ständige <td>s mit allen Paramtern.

Mag sein das die nur 1x geladen werden und im Speicher bleiben usw. Aber bitte: Huhu? Wer hat heute keine Flatrate und nochn 56K Modem?! Dieses Argument ist was für vor 5 Jahren, aber nicht mehr für das Jahr 2006 geeignet.

Standardkonformes XHTML:
Tabellen sind kaum Standardkonform zu implementieren. Mit CSS ist das eine Selbstverständlichkeit.

Dazu muss man sagen, ist der Standard selber auch sehr wage. W3C ist ja auch nicht gerade das Teil das den Standard vorgibt sondern nur eine „Hilfestellung“ um den Standard einzuhalten. Ob ich nun HTML, XHTML oder XML benutze ist doch eigentlich Wayne. Dazu finde ich es interessant, das das Boxmodell jedoch auf jedem Browser richtig läuft von Tabellen, wenn man das Padding und Margin einstellt und das auch nur ein mal. Ergo: Kein richtiges Argument.

Trennung von Inhalt und Design:
Das hatte ich oben ja schon angesprochen. Oft ist der Designer und der Webmaster nicht der gleiche. So hat dann jeder seinen Bereich und man muss sich nicht mit dem Kram des anderen beschäftigen.

Was hat das mit CSS zu tun? Gar nix. Dafür gibt es Templates und so was wie Smarty. Ob der Designer nun <div> oder <table> benutzt, kann dem Entwickler doch am Popo vorbei gehen.

Nachteile von CSS:
- Man muss es lernen
- Software aus den 80ern unterstützt das nicht -> Seiten sind aber weiterhin gut lesbar

Selbst Software aus dem Jahr 2006 bekommt es nicht gebacken.

Sorry, aber das was in der FAQ steht, sind irgendwie keine passenden Argumente für die Jetztzeit, sondern eher was für das Jahr 2000.

Ich will mal richtige Argumente hören, wo der Vorteil liegen soll.

mantiz

Ich versuche mal meine Gedanken dazu in einigermaßen strukturierter Form auszudrücken, nicht schreiben, wenn's mir nicht gelingt.

Also, erst einmal muss ich sagen, dass es sich natürlich für jeden Webmaster gehört 100% validen Code zu schreiben. Meiner Meinung nach wenigstens. Die einzige Ausnahme, die ich mir selbst dabei gestatte ist die Einbettung von Flash, da das embed-Tag leider nicht im Standard ist, der FF allerdings nur dies versteht.
(Validen Code kann man auch mit Tabellen-Designs schreiben, dies also nur mal so vorweg. :D)

Dann muss man sich einmal überlegen, was eine Website ist. Streng genommen besteht eine Website einfach nur aus strukturiertem Text. Teile können verlinkt sein, hier und da sind Grafiken und es gibt ein Menü. Das Menü ist allerdings nicht als Bestandteil einer jeden Seite zu sehen, sondern vielmehr nur als Möglichkeit zu sehen zwischen den einzelnen Seiten zu navigieren. Wenn man sich nun die HTML-Tags ansieht, dann gibt es zwei Oberarten Block- und Inline-Elemente. div und span je ohne weitere Bedeutung, strong und em beispielsweise für betonten Text. Wie dieser Text nun betont wird sollte nicht aufgezwungen werden, indem man z.B. den b-Tag verwendet.

Was den Inhalt angeht, so wird Text eigentlich nur untereinander weg geschrieben. Zwischen den Textteilen kann man Grafiken streuen, jedoch sind diese meisten nicht Bestandteil des Inhalt, sondern haben nur kosmetische Berechtigungen. Ebenso Textausrichtungen etc. Alles kosmetische gehört ins CSS, da man damit eine Grunddarstellung vorgeben kann, diese allerdings nicht aufgezwungen wird. Im FF kann man Styles deaktivieren, Schrift vergrößern, etc. Ein Webmaster/-designer sollte nur Vorgaben machen, die seiner Meinung nach (oder nach Meinung des Kunden) die Information am Besten darstellen, jedoch sollte dem Benutzer die Möglichkeit geboten werden dies zu ändern. Mehrere Designs und die Möglichkeit Designs komplett zu deaktivieren sind da imo der richtige Weg.

Wenn man nun mit Tabellen als Layoutwerkzeug arbeitet, dann wird dieses allerdings enorm eingeschränkt. Man kann per CSS nicht einfach die rechte Spalte einer Tabelle auf die linke Seite wandern lassen, um so für manche ein Menü rechts und für andere ein Menü links anzubieten. Ebenso ist eine Reihenfolge der Inhalte von links-oben nach rechts-unten bei Tabellen immer vorgegeben, ohne Tabellen und CSS ist die Reihenfolge zwar auch von oben nach unter vorgeben, aber man kann mit verschiedenen CSS-Definitionen verschiedene Varianten anbieten, die sich der User dann selbst aussuchen kann.

Mit anderen Worten: CSS-basierte Seiten sind wesentlich benutzerfreundlicher bzw. können wesentlich benutzerfreundlicher gestaltet werden, als es mit Tabellen möglich wäre.

Eine Seite, die es meiner Meinung richtig macht ist diese. Zusätzlich kann man noch ein CSS für eine invertierte Darstellung anbieten und somit hat man dann eine grafische, eine text-, eine invertierte und eine Druckansicht der Website, wo die jeweils unwichtigen Dinge nicht angezeigt werden.

Zum W3C: Natürlich besteht kein Zwang sich daran zu halten, allerdings gibt es einen Standard und wenn sich immer mehr Leute daran halten, dann kommen wir evtl. mal dahin, dass jeder Browser die Inhalte gleich anzeigt. Was passiert, wenn jeder sein eigenes Süppchen kocht, sieht man wunderbar im IE. Darüber sollte man als Webentwickler einmal nachdenken, dann braucht man eigentlich nicht mehr überlegen, ob es sich lohnt auf Tabellen als Layoutwerkzeug zu verzichten.

Aber: Das ist nur meine Meinung, jeder sollte sich eine eigene bilden.

In diesem Sinne ...

Shade Of Mine

++++++++++++++ schrieb:

Heute kann von einer als Standardauflösung 1024x768x16 ausgehen. Ergo: Genug Platz. Für mich kein ausschlaggebendes Argument, da ich bisher weder eine Firma noch eine Privatperson gesehen habe, die mit 640x480x8 noch rumkutschert fürs Internet.

nur dass ein design dass auf 1024x768 ausgelegt ist bei deinem auftraggeber auf dem 1800x1600 monitor kacke aussieht...

Wir leben in Zeiten wo DSL 2000 Standard sind. Dieses Forum wird bei mir auf ner DSL 1000 Leitung blitzschnell geladen. Ergo: Kein Argument für die Jetztzeit.

*hust* handhelds *hust*

Tja, und was ist mit den Unterschieden zwischen den Box-Modellen unter den Browsern? „Etwas schönreden“ nenn ich das. Bei so was bekomm ich nämlich Zustände, wenn IE, FF, Opera, Netscape oder Conquer usw. die Seiten unterschiedlich darstellen. Aber Tabellen lustigerweise alle gleich. Ergo: Wunschträumen ist das – kein richtiges Argument.

der 1. aufwand ist bei CSS hoeher, keine frage.

aber warte mal eine tabellen basierte seite. dann denkst du anders.

Ansichtssache, bin ich ehrlich! In einer Baumstruktur liegt beides vor. Ergo: Kein richtiges Argument, da Ansichtssache.

warte mal eine seite mit ~40 verschachtelten tabellen und dann fuege irgendwo etwas ein. du bekommst die tabellen nicht vernuenftig geschlossen

Mag sein das die nur 1x geladen werden und im Speicher bleiben usw. Aber bitte: Huhu? Wer hat heute keine Flatrate und nochn 56K Modem?! Dieses Argument ist was für vor 5 Jahren, aber nicht mehr für das Jahr 2006 geeignet.

*hust* handhelds *hust*

Henno und ich haben diese FAQ geschrieben und wir beide verdienen mit webentwicklung unser Geld. das ganze hat schon seine gruende warum man css einem tabellen layout vorzieht.

auch wenn du an vielen argumenten herum diskutieren kannst, so bleibt die essentielle frage:
welche vorteile bieten dir tabellen?

geringen erst aufwand

und das wars.

der vorteil ist natuerlich nicht zu verachten, keine frage. aber es haengt halt davon ab ob man die webseite auch warten muss oder nicht...

und wie wir alle wissen - das meiste geld geht bei software wartung drauf und nicht bei der entwicklung... das nur mal so gedanke...

@Shade Of Mine
Handhelds für Foren? Wer geht freiwillig in Foren mit Handhelds?! Ich nicht. Dazu rede ich die ganze Zeit von Foren die in Seiten integriert sind.

Das mit der Wartung ist doch kein richtiges Argument: Wartest Du ein Design oder den Dateninhalt der Seite? Also ich eher Zweiteres. Wenn das Design einmal steht ist zu 99% der Fälle: Ruhe im Karton.

Aber dann mal so eine bescheidene (wenn auch blöde Frage) an dich: Warum ist dann dieses Forum noch nicht in CSS? Warum Tabellen, bei diesen vielen "Argumenten" die im FAQ aufgeführt wurden? Geht das bei einem Forum nicht, ist da die Grenze von CSS, oder einfach zu Faul und man möchte sowieso die armen Handheld-User ignorieren?

Würde mich mal so interessieren. Ich meine so von Scenenkollege zu Scenenkollege.

Shade Of Mine

++++++++++ schrieb:

@Shade Of Mine
Handhelds für Foren? Wer geht freiwillig in Foren mit Handhelds?! Ich nicht. Dazu rede ich die ganze Zeit von Foren die in Seiten integriert sind.

jo und?

wo ist der unterschied ob ein forum oder etwas anderes integriert ist?

Das mit der Wartung ist doch kein richtiges Argument: Wartest Du ein Design oder den Dateninhalt der Seite? Also ich eher Zweiteres. Wenn das Design einmal steht ist zu 99% der Fälle: Ruhe im Karton.

bis der kunde sagt er will noch das und das auf der seite haben...
vl noch ein news system?
die seite laeuft gut, ich will mehr ads drinnen haben, etc...

Aber dann mal so eine bescheidene (wenn auch blöde Frage) an dich: Warum ist dann dieses Forum noch nicht in CSS? Warum Tabellen, bei diesen vielen "Argumenten" die im FAQ aufgeführt wurden? Geht das bei einem Forum nicht, ist da die Grenze von CSS, oder einfach zu Faul und man möchte sowieso die armen Handheld-User ignorieren?

weil es leichter ist die 1. version mit tabellen zu machen.

aber sei mal ehrlich: wieviele foren kennst du wo du durch eine lange zeile das komplette design zerschiessen kannst?

ich weiss nicht ob der hack hier noch im forum ist oder nicht mehr - aber zB zu lange code zeilen haben frueher das design komplett zerschossen.
manche foren gehen den weg dass man nur kleinen code posten kann und alles was mehr ist muss sofort gescrollt werden. das ist zB sehr haesslich.

es war enormer aufwand es moeglich zu machen hier den code dann einfach ueber die tabelle hinaus gehen zu lassen...

kleines beispiel was ich meine:

zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

ohne tabellen waere das kein problem gewesen

@Shade Of Mine
Aha, also erst CSS Preisen wie das Amen in der Kirche, aber hier kein CSS benutzen, sondern auf Gemütlichkeit aufbauen? Interessant.

Aber gut: Kennst Du denn ein Forum, das wie das phpBB (vom design her im groben) aufgebaut ist und keine Tabellen benutzt? Speziell die Index-Seite? Also ich nicht. Warum ist das so?

Knuddlbaer

Der Weg wird in der Mitte liegen.

Nicht alle Wünsche meiner Kunden kann ich mit CSS erreichen bzw. ich muss einen enormen mehraufwand betreiben.

Die vorteile der Tabellen ist die vorhersehbarkeit der Positionen und der Möglichkeit Zellen gleiche höhen zu vergeben. Die Möglichkeit das man Inhalte einfach verschieben kann spielt für viele Kunden keine Rolle, dafür ist nämlich das Design des Grafikers viel zu ... Naja, unflexibel.

Trotz der schwächen die CSS im Moment hat (war da nicht was mit CSS 3 und Tabllenähnlichen verhalten für das Layout ?) wird es wohl die Zukunft sein. Ich setze heute einen misch aus CSS Layout und Tabellen ein. Man kann so das "günstig sein" mit dem flexibel sein verbinden und nach und nach das zunehmende CSS knowhow und weitere unterstützung der Browser ausdehnen.

Btw.: Eine CSS Seite mit ~40 verschachtelten div Tags is genauso grausig zu warten ;o)

Und was das zerschiessen des Layouts betrifft, so wird doch bei CSS Seiten oft der Inhalt verschoben, weil dieser nicht mehr in die vorgesehene Stelle passt und einfach unten angehängt.

Irgendwie ist das ein glaubenskrieg - vllt. wie damals zwischen C und C++ ?

Mit CSS muss man sich einfach beschäftigen zumal es deutlich komplexer und aufwendiger wird solange man die routine nicht hat. Sobald man diese aber hat wird man Tabellen wohl nurnoch an einzelnen Stellen benötigen. Bis man mit CSS umgehen kann muss man einen weiten weg gehen - vllt. einer der Gründe warum alte , seit langen bestehende Foren nicht einfach auf CSS umgesetzt werden. Man schreibt ja auch keine C Software neu, nur weil C++ schicker ist.

Und was Tabellen und Boxmodel betrifft:
Das Problem gibt es hier auch, Grafiken wurden zu inline Elementen und haben nun einen netten Rand unter sich.

deetee

CSS ist in Hinblick auf Barrierefreiheit und Wartbarkeit/Pflege/Änderungen ein sehr gutes Mittel.

Das Problem ist, man muss sich viel intensiver damit beschäftigen, um ein crossbrowser fähiges Layout zu basteln. Auch CSS Hacks sind nicht das gelbe vom Ei, aber leider hier und da notwendig...noch.

Außerdem neigt man dazu, anfangs zuviele DIVs zu verwenden, weil man das Denken mit Tabellen gewohnt ist. So wars zumindest bei mir, als ich meine ersten Versuche damit gemacht habe. Da hatte man mir dann den Tipp gegeben, dringend von dem Tabellen-Denken wegzukommen.

Es ist wirklich so, man muss sich völlig neu orientieren und sich die CSS Befehle alle klarmachen. Man kennt zwar die meisten, aber was sie leisten können, ist meistens nicht auf den ersten Blick erkennbar. Die Erfahrung wächst viel langsamer als beim Arbeiten mit Tabellen, weil es komplexer und komplizierter ist. Nicht zuletzt wegen den verschiedenen Interpretationen der verschiedenen Browser, was die Arbeit von CSS Layouts sehr teuer werden lässt.

CSS ist auch perfekt geeignet, wenn man die selben Inhalte für verschiedene Medien aufbereiten möchte. Da muss man dann nur das Stylesheet wechseln und die Inhalte werden z.B. für den Druck aufbereitet. Man muss keine 2 Layouts basteln und diese dann auch noch pflegen, ändern und/oder warten, sondern nur die Stylesheet Dateien selbst. Das ist ein riesen Vorteil.

Man muss sich nur mal die gängigen CSS Seiten anschauen, und man kommt aus dem Staunen nicht mehr raus, was mit CSS alles möglich ist UND die Seiten sind meist Barrierefrei, obwohl CSS und Barrierefreiheit natürlich nicht direkt miteinander zutun haben müssen. Auch Tabellenlayouts können barrierefrei sein.

michba

mantiz schrieb:

Die einzige Ausnahme, die ich mir selbst dabei gestatte ist die Einbettung von Flash, da das embed-Tag leider nicht im Standard ist, der FF allerdings nur dies versteht.

Hi, kennst du diese Methode? Vielleicht hilft dir das ja.