Warum nicht Tabellen für das Layout in HTML verwenden? [geschlossen]


665

Es scheint die allgemeine Meinung zu sein, dass Tabellen nicht für das Layout in HTML verwendet werden sollten.

Warum?

Ich habe nie (oder selten, um ehrlich zu sein) gute Argumente dafür gesehen. Die üblichen Antworten sind:

  • Es ist gut, Inhalte vom Layout zu trennen.
    Dies ist jedoch ein trügerisches Argument. Klischee denken . Ich denke, es ist wahr, dass die Verwendung des Tabellenelements für das Layout wenig mit tabellarischen Daten zu tun hat. Na und? Interessiert es meinen Chef? Interessieren sich meine Benutzer?

    Vielleicht ich oder meine Kollegen, die eine Webseitenpflege pflegen müssen ... Ist eine Tabelle weniger wartbar? Ich denke, die Verwendung einer Tabelle ist einfacher als die Verwendung von Divs und CSS.

    Übrigens ... warum ist die Verwendung eines div oder eines span eine gute Trennung von Inhalt und Layout und einer Tabelle nicht? Um ein gutes Layout nur mit Divs zu erhalten, sind häufig viele verschachtelte Divs erforderlich.

  • Lesbarkeit des Codes
    Ich denke, es ist umgekehrt. Die meisten Menschen verstehen HTML, nur wenige verstehen CSS.

  • Für SEO ist es besser, keine Tabellen zu verwenden.
    Warum? Kann jemand Beweise dafür vorlegen? Oder eine Aussage von Google, dass Tabellen aus SEO-Sicht nicht empfohlen werden?

  • Tabellen sind langsamer.
    Ein zusätzliches tbody-Element muss eingefügt werden. Dies sind Erdnüsse für moderne Webbrowser. Zeigen Sie mir einige Benchmarks, bei denen die Verwendung einer Tabelle eine Seite erheblich verlangsamt.

  • Eine Layoutüberholung ist ohne Tabellen einfacher, siehe CSS Zen Garden .
    Die meisten Websites, die aktualisiert werden müssen, benötigen ebenfalls neuen Inhalt (HTML). Szenarien, in denen eine neue Version einer Website nur eine neue CSS-Datei benötigt, sind nicht sehr wahrscheinlich. Zen Garden ist eine schöne Website, aber ein bisschen theoretisch. Ganz zu schweigen vom Missbrauch von CSS.

Ich bin wirklich an guten Argumenten interessiert, um divs + CSS anstelle von Tabellen zu verwenden.


Einverstanden sind Tabellen in Ordnung, wenn tabellarische Daten dargestellt werden. Sie sollten vermieden werden, wenn sie nur für das Layout verwendet werden. Andererseits muss man manchmal den einfachen Weg jetzt nehmen und ihn später verbessern. Schauen Sie sich einfach die Quelle an und Sie werden sehen, was ich meine.
Haacked


11
Die Antwort ist einfach: es kommt darauf an. Wenn Tabellen verwendet werden, um ein bestimmtes Problem zu lösen, das aktuelle CSS-Versionen nicht können, werden sie gut verwendet. Wenn Sie anfangen, Tabellen in Tabellen, in Millionen von Tabellen zu bekommen, dann machen Sie es falsch. Wenn es sich um die gelegentliche Tabelle handelt, nur um zwei Spalten oder ähnliches zu gestalten, verbiete ich dies meinem Team nicht: Es ist schneller und einfacher, dies zu tun. (Ich selbst versuche immer, CSS zu verwenden, aber am Ende des Tages ist die Bereitstellung wichtiger als korrektes semantisches HTML)
AlfaTeK

1
@Camilo SO lebt noch im 20. Jahrhundert. Jeff weiß offenbar nicht, wie er das ulTag verwenden soll. Schauen Sie sich alle Listen auf dieser Site an (Abzeichen, verwandte Fragen, aktuelle Tags). Sie sind alle entweder einzelne Spalten oder lange Absätze, die durch getrennt sind br.
Yi Jiang

2
@Brad: Abhängig von einigen spezifischen Details (das ist mein Ausweg für jedes clevere Comeback ;-) ist die Verwendung von DIVs NOCH besser als der Missbrauch von Tabellen. Zwei Teile eines Dokuments, die zufällig nebeneinander angeordnet sind, können legitimerweise in DIV-Elementen enthalten sein, aber es handelt sich sicherlich NICHT um tabellarische Daten. Es spielt keine Rolle, was ein bestimmtes Styling ist; Der Inhalt ist entweder tabellarisch oder nicht. Hinweis: Ich befürworte auch NICHT DIVitis :)
Bobby Jack

Antworten:


496

Ich werde Ihre Argumente nacheinander durchgehen und versuchen, die darin enthaltenen Fehler aufzuzeigen.

Es ist gut, Inhalte vom Layout zu trennen. Dies ist jedoch ein trügerisches Argument. Klischee denken.

Es ist überhaupt nicht trügerisch, weil HTML absichtlich entworfen wurde. Der Missbrauch eines Elements kommt möglicherweise nicht völlig in Frage (schließlich haben sich auch in anderen Sprachen neue Redewendungen entwickelt), aber mögliche negative Auswirkungen müssen ausgeglichen werden. Selbst wenn es heute keine Argumente gegen den Missbrauch des <table>Elements gäbe, könnte es morgen sein, da Browser-Anbieter das Element speziell behandeln. Schließlich wissen sie, dass „ <table>Elemente nur für tabellarische Daten bestimmt sind“ und können diese Tatsache nutzen, um die Rendering-Engine zu verbessern, das <table>Verhalten subtil zu ändern und damit Fälle zu brechen, in denen sie zuvor missbraucht wurden.

Na und? Interessiert es meinen Chef? Interessieren sich meine Benutzer?

Hängt davon ab. Ist Ihr Chef spitzhaarig? Dann könnte es ihn nicht interessieren. Wenn sie kompetent ist, wird sie sich darum kümmern, weil die Benutzer es tun werden .

Vielleicht ich oder meine Kollegen, die eine Webseitenpflege pflegen müssen ... Ist eine Tabelle weniger wartbar? Ich denke, die Verwendung einer Tabelle ist einfacher als die Verwendung von divs und css.

Die Mehrheit der professionellen Webentwickler scheint sich Ihnen zu widersetzen[ Zitat benötigt ] . Das Tabelle ist in der Tat weniger wartbar sollte klar sein. Die Verwendung von Tabellen für das Layout bedeutet, dass das Ändern des Unternehmenslayouts tatsächlich das Ändern jeder einzelnen Seite bedeutet. Dies kann sehr teuer sein. Auf der anderen Seite, vernünftige Nutzung von semantisch sinnvoller HTML mit CSS kombiniert könnte solche Änderungen an die CSS beschränken und die verwendeten Bilder.

Übrigens ... warum ist die Verwendung eines div oder eines span eine gute Trennung von Inhalt und Layout und einer Tabelle nicht? Um ein gutes Layout nur mit Divs zu erhalten, sind häufig viele verschachtelte Divs erforderlich.

Tief verschachtelte <div>s sind genau wie Tabellenlayouts ein Anti-Pattern. Gute Webdesigner brauchen nicht viele von ihnen. Auf der anderen Seite haben selbst solche tief verschachtelten Divs nicht viele Probleme mit Tabellenlayouts. Tatsächlich können sie sogar zu einer semantischen Struktur beitragen, indem sie den Inhalt logisch in Teile teilen.

Lesbarkeit des Codes Ich denke, es ist umgekehrt. Die meisten Leute verstehen HTML, wenig verstehen CSS. Es ist einfacher.

"Die meisten Leute" spielen keine Rolle. Profis sind wichtig. Für Profis verursachen Tabellenlayouts viel mehr Probleme als HTML + CSS. Dies ist wie zu sagen, ich sollte GVim oder Emacs nicht verwenden, da Notepad für die meisten Menschen einfacher ist. Oder dass ich LaTeX nicht verwenden sollte, weil MS Word für die meisten Menschen einfacher ist.

Für SEO ist es besser, keine Tabellen zu verwenden

Ich weiß nicht, ob dies wahr ist und würde dies nicht als Argument verwenden, aber es wäre logisch. Suchmaschinen suchen nach relevanten Daten. Während tabellarische Daten natürlich relevant sein könnten, ist es selten das, wonach Benutzer suchen. Benutzer suchen nach Begriffen, die im Seitentitel verwendet werden, oder nach ähnlich prominenten Positionen. Es wäre daher logisch, tabellarische Inhalte von der Filterung auszuschließen und damit die Verarbeitungszeit (und die Kosten!) Um einen großen Faktor zu reduzieren.

Tabellen sind langsamer. Ein zusätzliches tbody-Element muss eingefügt werden. Dies sind Erdnüsse für moderne Webbrowser.

Das zusätzliche Element hat nichts damit zu tun, dass Tabellen langsamer sind. Andererseits ist der Layoutalgorithmus für Tabellen viel schwieriger. Der Browser muss häufig warten, bis die gesamte Tabelle geladen ist, bevor er mit dem Layout des Inhalts beginnen kann. Darüber hinaus funktioniert das Zwischenspeichern des Layouts nicht (CSS kann problemlos zwischengespeichert werden). All dies wurde bereits erwähnt.

Zeigen Sie mir einige Benchmarks, bei denen die Verwendung einer Tabelle eine Seite erheblich verlangsamt.

Leider habe ich keine Benchmark-Daten. Ich würde mich selbst dafür interessieren, weil es richtig ist, dass diesem Argument eine gewisse wissenschaftliche Genauigkeit fehlt.

Die meisten Websites, die aktualisiert werden müssen, benötigen ebenfalls neuen Inhalt (HTML). Szenarien, in denen eine neue Version einer Website nur eine neue CSS-Datei benötigt, sind nicht sehr wahrscheinlich.

Ganz und gar nicht. Ich habe an mehreren Fällen gearbeitet, in denen das Ändern des Designs durch eine Trennung von Inhalt und Design vereinfacht wurde. Es ist oft noch notwendig, HTML-Code zu ändern, aber die Änderungen sind immer viel enger. Darüber hinaus müssen Designänderungen gelegentlich dynamisch vorgenommen werden. Betrachten Sie Template-Engines, wie sie vom WordPress-Blogging-System verwendet werden. Tabellenlayouts würden dieses System buchstäblich zerstören. Ich habe an einem ähnlichen Fall für eine kommerzielle Software gearbeitet. Die Möglichkeit, das Design zu ändern, ohne den HTML-Code zu ändern, war eine der Geschäftsanforderungen.

Etwas anderes. Das Tabellenlayout erschwert das automatische Parsen von Websites (Screen Scraping) erheblich. Das mag trivial klingen, denn wer macht das schon? Ich war selbst überrascht. Screen Scraping kann sehr hilfreich sein, wenn der betreffende Dienst keine WebService-Alternative für den Zugriff auf seine Daten bietet. Ich arbeite in der Bioinformatik, wo dies eine traurige Realität ist. Moderne Webtechniken und WebServices haben die meisten Entwickler nicht erreicht, und häufig ist Screen Scraping die einzige Möglichkeit, den Prozess des Datenabrufs zu automatisieren. Kein Wunder, dass viele Biologen solche Aufgaben immer noch manuell ausführen. Für Tausende von Datensätzen.


139
"Das Ändern des Unternehmenslayouts bedeutet in der Tat, dass jede einzelne Seite geändert wird." - Duplizieren die Benutzer das Unternehmenslayout immer noch auf jeder Seite? Es ist so einfach, mit Masterseiten oder Benutzersteuerelementen in .net zu lösen, Dateien in PHP oder klassischem Asp einzuschließen usw. Jeder, der das Firmenlayout so kopiert, verdient einen ** Kick! ;-)
John MacIntyre

43
Sorry, aber das ist wirklich "Pie int the Sky" Wunschdenken. Benutzer interessieren? Niemand kümmert sich darum, außer einer kleinen Anzahl fehlgeleiteter Revisionisten. HTML (einschließlich Tabellen) ist weitaus älter als der relativ neue Begriff "Semantik vs. Layout". Oh und Quelle bitte für "die Mehrheit der professionellen Webentwickler ist gegen Sie".
Cletus

20
Tippfehler oben: Semantik wurde von Anfang an impliziert . <table> in HTML war immer nur für Tabellendaten gedacht, niemals für das Layout (in den Anfangsjahren konnte man das Aussehen der Tabelle sowieso nicht ändern, wodurch die Verwendung als Layoutanker verhindert wurde). Tatsächlich hatten frühe HTML-Entwürfe überhaupt keine Vorstellung vom Layout, und HTML war nie für das Layout gedacht, sondern für die Strukturierung von Text. Noch mehr: Der allererste Vorschlag von HTML warnt wiederholt vor dem Missbrauch von Tags, um das Layout zu beeinflussen, und warnt davor, logisches über physisches Markup zu verwenden.
Konrad Rudolph

109
Holen Sie sich einen Bildschirmleser und lassen Sie ihn eine Seite mit Tabellenlayout lesen. das ist alles.
Corymathews

8
@Sergio: Bitte bearbeiten Sie keine relevanten Informationen. Dies ist eine zweifelhafte Behauptung, die ich dort verwende, und ich möchte das ganz klar machen. Ihre Bearbeitung hat mir die Behauptung in den Mund gelegt, dass ich nicht sichern kann, was mich effektiv zum Lügner macht, wenn sich herausstellt, dass dies falsch ist.
Konrad Rudolph

290

Hier ist die Antwort meines Programmierers aus einem ähnlichen Thread

Semantik 101

Schauen Sie sich zuerst diesen Code an und überlegen Sie, was hier falsch ist ...

class car {
    int wheels = 4;
    string engine;
}

car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;

Das Problem ist natürlich, dass ein Fahrrad kein Auto ist. Die Fahrzeugklasse ist eine unangemessene Klasse für die Fahrradinstanz. Der Code ist fehlerfrei, aber semantisch falsch. Es reflektiert den Programmierer schlecht.

Semantik 102

Wenden Sie dies nun auf das Dokument-Markup an. Wenn Ihr Dokument tabellarische Daten enthalten muss, ist das entsprechende Tag <table>. Wenn Sie jedoch die Navigation in eine Tabelle einfügen, missbrauchen Sie den beabsichtigten Zweck des <table>Elements. Im zweiten Fall präsentieren Sie keine tabellarischen Daten - Sie verwenden das <table>Element (falsch) , um ein Präsentationsziel zu erreichen.

Fazit

Werden Besucher es bemerken? Interessiert es Ihren Chef? Könnte sein. Schneiden wir manchmal als Programmierer Abstriche? Sicher. Aber sollten wir? Wer profitiert, wenn Sie semantisches Markup verwenden? Sie - und Ihr beruflicher Ruf. Jetzt geh und mach das Richtige.


39
Entschuldigung, das hält kein Wasser. Sie verwenden kein Auto für mybike, weil Sie stattdessen eine "Fahrrad" -Klasse definieren würden. Sie können für "<Tabelle>" nichts anderes definieren, da es sich um mehr als ein einfaches semantisches Tag handelt. Es teilt dem Browser mit, wie auch der Inhalt gerendert werden soll.
Jimmy

57
Schöne Analogie und tolles Fazit. Warum sollte jemand von seinem Chef und / oder seinen Benutzern gezwungen werden müssen, das Richtige zu tun? Ist niemand mehr stolz auf seine eigene Arbeit?
Sherm Pendley

39
Ich denke, dies ist ein ziemlich arroganter Beitrag, der nichts erklärt, sondern nur dieselben Behauptungen noch einmal wiederholt, ohne die Frage zu beantworten. Ich verstehe nicht, warum es so viele positive Stimmen bekommen hat ????
Markus

10
Ich stimme Tharkum zu. Diese Antwort ist eher subjektiv und beantwortet die gestellte Frage nicht wirklich. Obwohl ich damit einverstanden bin, dass DIVs für das Seitenlayout verwendet werden sollten, kann ich mir nicht vorstellen, dass ein Webdesigner durch ein tabellenbasiertes Layout verwirrt wäre.
Richard Ev

16
@tharkun & Richard: Wieso ist "semantisch falsch" subjektiv und erklärt nichts?
Vinko Vrsalovic

104

Offensichtliche Antwort: Siehe CSS Zen Garden . Wenn Sie mir sagen, dass Sie mit einem tabellenbasierten Layout problemlos dasselbe tun können (denken Sie daran - der HTML-Code ändert sich nicht), verwenden Sie auf jeden Fall Tabellen für das Layout.

Zwei weitere wichtige Dinge sind Barrierefreiheit und SEO.

Beide kümmern sich darum, in welcher Reihenfolge Informationen angezeigt werden. Sie können Ihre Navigation nicht einfach oben auf der Seite anzeigen, wenn Ihr tabellenbasiertes Layout sie in der 3. Zelle der 2. Zeile der 2. verschachtelten Tabelle auf der Seite platziert.

Ihre Antworten sind also Wartbarkeit, Zugänglichkeit und SEO.

Sei nicht faul. Machen Sie die Dinge richtig und richtig, auch wenn sie etwas schwieriger zu lernen sind.


24
Ein in Zen Garden häufig verwendeter Trick besteht darin, Text durch Bilder zu ersetzen und diesen im CSS zu definieren, wodurch er für HTML unsichtbar wird. Sehr, sehr falsch.
GvS

3
Es tut mir leid, aber das stimmt nicht. Der Text befindet sich noch im HTML - das ist eine der Anforderungen eines CSSZG-Designs. Der HTML-Code muss unverändert bleiben.
Erlando

10
Wenn Sie sich einige Designs genau ansehen, unterscheidet sich der Text in einigen Überschriften vom Text im HTML. Das liegt daran, dass der HTML-Code unsichtbar gemacht wird und stattdessen ein Bild eingefügt wird. (Beispiel: csszengarden.com/?cssfile=/212/212.css&page=0 , Der "Weg" zur "Leistung")
GvS

6
Entschuldigung, es gibt absolut keine Beweise dafür, dass Div-Layouts für SEO besser sind. Außerdem hat Google selbst erklärt, dass die HTML-Validierung für sie keine Rolle spielt - ein etwas anderes Problem, das jedoch auf Tabellen abzielt, da sie nur selten validiert werden.
DisgruntledGoat

„Die meisten von Ihnen kennen die Vorzüge eines Programmierers. Es gibt natürlich drei: Faulheit, Ungeduld und Hybris. “ - Larry Wall
inkredibl

91

Siehe diese doppelte Frage.

Ein Punkt, den Sie dort vergessen, ist die Zugänglichkeit. Tabellenbasierte Layouts lassen sich nicht so gut übersetzen, wenn Sie beispielsweise einen Bildschirmleser verwenden müssen. Wenn Sie für die Regierung arbeiten, ist möglicherweise die Unterstützung barrierefreier Browser wie Screenreader erforderlich .

Ich denke auch, dass Sie die Auswirkungen einiger der Dinge, die Sie in der Frage erwähnt haben, unterschätzen. Wenn Sie beispielsweise sowohl Designer als auch Programmierer sind, wissen Sie möglicherweise nicht genau, wie gut Präsentation und Inhalt voneinander getrennt sind. Sobald Sie jedoch in ein Geschäft eintreten, in dem es sich um zwei unterschiedliche Rollen handelt, werden die Vorteile klarer.

Wenn Sie wissen, was Sie tun, und über gute Tools verfügen, bietet CSS gegenüber Tabellen für das Layout erhebliche Vorteile. Und obwohl jedes Element für sich möglicherweise nicht das Verlassen von Tabellen rechtfertigt, lohnt es sich im Allgemeinen.


Ja ... in der Tat. Ich sehe, dass das doppelt ist. Ich habe es verpasst. Alle Maßnahmen, die erforderlich sind, außer dem Versprechen, dass ich beim nächsten Mal vorsichtiger sein werde :-)?
Benno Richters

Mach dir keine Sorgen. Dies wird mit zunehmender Anzahl von Fragen immer häufiger vorkommen. Ich habe nicht einmal abgelehnt. Wir wollen nur sichergehen, dass sie alle so weit wie möglich auf eine gemeinsame Quelle verweisen.
Joel Coehoorn

8
Diese Antwort gefällt mir sehr gut. Die Verwendung semantisch aussagekräftiger Tags ist nicht nur eine Frage der Tradition, sondern ermöglicht es diesen obskuren Nicht-Browsern (Bildschirmleser, Bildschirmschaber, verschiedene Parser), die verschiedenen Objekte auf Ihrer Seite korrekt zu kategorisieren.
Phantom Watson

6
Ich hatte gehofft, jemand würde das erwähnen. Zugänglichkeit sollte oberste Priorität haben!
Andrew

Ich kann nicht sagen, dass ich der Auffassung zustimme, dass Barrierefreiheit bei einer kommerziellen Übung oberste Priorität haben sollte. Das Kosten-Nutzen-Verhältnis ist nicht realisierbar. Es ist, als würde man eine Rollstuhlrampe in einem Bergsteigergeschäft anbringen - eine lächerliche Verschwendung von Ressourcen, die auf Gegenstände mit besserer CBR angewendet werden könnten. Wenn Sie über eine medizinische Einrichtung sprechen, ist eine Rollstuhlrampe eine Priorität. Ebenso würde ich mich nur um die Zugänglichkeit von Webseiten für Websites kümmern, die sich an sehbehinderte Menschen richten.
Peter Wone

54

Leider kann CSS Zen Garden nicht mehr als Beispiel für ein gutes HTML / CSS-Design verwendet werden. Nahezu alle neueren Designs verwenden Grafiken für die Abschnittsüberschrift. Diese Grafikdateien werden im CSS angegeben.

Daher begeht eine Website, deren Zweck es ist, den Vorteil aufzuzeigen, Design von Inhalten fernzuhalten, regelmäßig die UNSPEAKABLE SIN, Inhalte in Design zu integrieren. (Wenn sich die Abschnittsüberschrift in der HTML-Datei ändern würde, würde die angezeigte Abschnittsüberschrift dies nicht tun.)

Das zeigt nur, dass selbst diejenigen, die sich für die strenge DIV & CSS-Religion einsetzen, ihre eigenen Regeln nicht befolgen können. Sie können dies als Richtlinie dafür verwenden, wie genau Sie ihnen folgen.


18
Du meinst sie machen <h1>Some Text</h1>und dann in ihrer CSS : h1 { background-image('foo.jpg'); text-indent:-3000px }? Dies ist die richtige Vorgehensweise, da Sie die maximale semantische Information im HTML ohne Stil beibehalten. Oder vielleicht habe ich dich falsch verstanden.
Karan

9
Karen hat recht, du liegst falsch, James. Ihr Beispiel ist ein Strohmann. Zu vergessen, das Bild zu ändern, wenn Sie das semantische HTML geändert haben, wäre dumm. Lassen Sie Ihren Laptop also in einem Bus. Worauf willst du hinaus?
AmbroseChapel

36
@ Ambrose: Weil der ganze Sinn der verdammten Seite darin besteht, die Trennung von Inhalt und Stil zu demonstrieren. Inhalt und Stil sollten von verschiedenen Personen richtig gehandhabt werden, von denen sich keiner "merken" sollte, was der andere geändert hat.
James Curran

5
Herr S & N: Das würde die Sache noch schlimmer machen. Sie müssten dynamisch neue Bilder generieren - im richtigen Stil. Jetzt haben Sie das Styling von CSS auf Business-Layer-Code umgestellt.
James Curran

9
@ James: Inhalt und Stil können nicht immer von verschiedenen Personen behandelt werden. Wenn der Inhalt stilisiert ist, muss eine Zusammenarbeit stattfinden. Wie ist <h1><img src="something.png"></h1>etwas wartbarer als <h1 class="something image">Something</h1>? In beiden Beispielen muss etwas.png aktualisiert werden. Das zweite Beispiel ist jedoch weitaus zugänglicher.
Josh

48

Dies ist keineswegs das endgültige Argument, aber mit CSS können Sie das gleiche Markup verwenden und das Layout je nach Medium ändern, was ein schöner Vorteil ist. Bei einer Druckseite können Sie die Navigation leise unterdrücken, ohne beispielsweise eine druckerfreundliche Seite erstellen zu müssen.


Obwohl Sie CSS verwenden können, um Zellen in einem tabellenbasierten Layout auszublenden, um beispielsweise die Navigation in einer druckbaren Version zu unterdrücken, bietet Ihnen ein CSS-Layout viel mehr Flexibilität beim bloßen Ausblenden von Daten.
Cory House

Ich habe dies mit einer meiner Anwendungen erreicht. Junge, ich war glücklich, als mir klar wurde, wie einfach es war, die "druckerfreundliche" Version mit nur etwas Druck-CSS für die gleichen Seiten wie auf dem Bildschirm zu erstellen.
Lawrence Dol

45

Eine Tabelle für das Layout wäre nicht so schlecht. Meistens können Sie jedoch nicht mit nur einer Tabelle das gewünschte Layout erhalten. Ziemlich bald haben Sie zwei oder drei verschachtelte Tabellen. Dies wird sehr umständlich.

  • Es ist viel schwerer zu lesen. Das liegt nicht an der Meinung. Es gibt nur mehr verschachtelte Tags ohne identifizierende Markierungen.

  • Das Trennen von Inhalten von Präsentationen ist eine gute Sache, da Sie sich auf das konzentrieren können, was Sie tun. Das Mischen der beiden führt zu aufgeblähten Seiten, die schwer zu lesen sind.

  • Mit CSS für Stile kann Ihr Browser die Dateien zwischenspeichern, und nachfolgende Anforderungen sind viel schneller. Das ist riesig.

  • Tabellen binden Sie in ein Design ein. Sicher, nicht jeder braucht die Flexibilität von CSS Zen Garden, aber ich habe noch nie an einer Site gearbeitet, an der ich das Design hier und da nicht ein wenig ändern musste. Mit CSS ist es viel einfacher.

  • Tische sind schwer zu stylen. Sie haben nicht viel Flexibilität mit ihnen (dh Sie müssen noch HTML-Attribute hinzufügen, um die Stile einer Tabelle vollständig zu steuern).

Ich habe seit wahrscheinlich 4 Jahren keine Tabellen mehr für nicht tabellarische Daten verwendet. Ich habe nicht zurückgeschaut.

Ich würde wirklich gerne vorschlagen, CSS Mastery von Andy Budd zu lesen . Es ist fantastisch.

Bild unter ecx.images-amazon.com http://ecx.images-amazon.com/images/I/41TH5NFKPEL._SL500_BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg


1
Ich kann dieses Buch nur empfehlen
Jacob T. Nielsen

Enthält gute Beispiele für Box-Modell, Selektoren und Positionierung.
KMån

36

Es ist gut, Inhalte vom Layout zu trennen.
Dies ist jedoch ein trügerisches Argument. Klischee denken

Es ist ein trügerisches Argument, weil HTML-Tabellen Layout sind! Der Inhalt sind die Daten in der Tabelle, die Präsentation ist die Tabelle selbst. Aus diesem Grund kann es manchmal sehr schwierig sein, CSS von HTML zu trennen. Sie trennen Inhalte nicht von Präsentationen, sondern Präsentationen von Präsentationen! Ein Stapel verschachtelter Divs unterscheidet sich nicht von einer Tabelle - es handelt sich lediglich um einen anderen Satz von Tags.

Das andere Problem beim Trennen des HTML-Codes vom CSS besteht darin, dass sie genaue Kenntnisse voneinander benötigen - Sie können sie wirklich nicht vollständig trennen. Das Tag-Layout im HTML-Code ist unabhängig von Ihrer Tätigkeit eng mit der CSS-Datei verknüpft.

Ich denke, Tabellen gegen Divs hängen von den Anforderungen Ihrer Anwendung ab.

In der Anwendung, die wir bei der Arbeit entwickeln, brauchten wir ein Seitenlayout, bei dem sich die Teile dynamisch an ihren Inhalt anpassen. Ich habe tagelang versucht, dies dazu zu bringen, browserübergreifend mit CSS und DIVs zu arbeiten, und es war ein Albtraum. Wir sind zu Tischen gewechselt und alles hat einfach funktioniert .

Wir haben jedoch ein sehr geschlossenes Publikum für unser Produkt (wir verkaufen ein Stück Hardware mit einer Webschnittstelle) und Probleme mit der Barrierefreiheit sind für uns kein Problem. Ich weiß nicht, warum Screenreader nicht gut mit Tabellen umgehen können, aber ich denke, wenn das so ist, müssen Entwickler damit umgehen.


6
Screenreaders befasst sich mit Tabellen ok .. Es ist die Art und Weise, wie Tabellen nicht mit Screenreadern umgehen, das ist das Problem. Ein tabellenbasiertes Layout neigt dazu, die Informationen auf unzugängliche Weise darzustellen. Überlegen Sie, wie eine Navigation auf der rechten Seite aussehen würde. Es wäre ziemlich weit unten auf der Seite.
Erlando

Ok, das macht dann Sinn - danke!
17 vom 26.

8
Nur weil <table> oder <div> in den meisten Bildschirmagenten eine Standardpräsentation haben , werden sie nicht als Präsentationselemente anstelle von semantischen Elementen gleichgesetzt.
Mark Brackett

1
Ich spreche nicht speziell über HTML, sondern konzeptionell über das grundlegende Design der Benutzeroberfläche. Eine Tabelle bestimmt, wie die Dinge auf dem Bildschirm angeordnet sind, dh wie sie dem Benutzer präsentiert werden. Das ist Präsentation.
17 vom 26.

1
"Ich habe Tage damit verbracht, dies zum Laufen zu bringen" - wenn etwas, das ich herausfinden möchte, jemals länger als ein paar Stunden dauert, habe ich es der StackOverflow-Community zur Verfügung gestellt. Nicht zu wissen, wie man etwas richtig macht, ist keine Entschuldigung dafür, es nicht richtig zu machen. Vor allem, wenn wir alle Antworten zur Hand haben.
DaveDev

23

CSS / DIV - es sind nur Jobs für die Design-Jungs, nicht wahr? Die Hunderte von Stunden, die ich mit dem Debuggen von DIV / CSS-Problemen und dem Durchsuchen des Internets verbracht habe, um einen Teil des Markups mit einem obskuren Browser zum Laufen zu bringen - das macht mich verrückt. Sie nehmen eine kleine Änderung vor und das gesamte Layout läuft fürchterlich schief - wo unten liegt die Logik darin. Verbringen Sie Stunden damit, etwas 3 Pixel auf diese Weise zu bewegen, dann etwas anderes 2 Pixel das andere, um sie alle in eine Reihe zu bringen. Das scheint mir einfach irgendwie falsch zu sein. Nur weil Sie Purist sind und etwas "nicht das Richtige" ist, heißt das nicht, dass Sie es bis zum n-ten Grad und unter allen Umständen nutzen sollten, besonders wenn es Ihr Leben 1000-mal einfacher macht.

Also habe ich mich endlich entschieden, rein aus kommerziellen Gründen, obwohl ich mich auf ein Minimum beschränke. Wenn ich mit 20 Stunden Arbeit rechne, um einen DIV richtig zu platzieren, bleibe ich in einem Tisch. Es ist falsch, es stört die Puristen, aber in den meisten Fällen kostet es weniger Zeit und ist billiger zu verwalten. Ich kann mich dann darauf konzentrieren, die Anwendung so zu gestalten, wie es der Kunde wünscht, anstatt den Puristen zu gefallen. Sie bezahlen schließlich die Rechnungen und mein Argument an einen Manager, der die Verwendung von CSS / DIV erzwingt - ich möchte nur darauf hinweisen, dass die Kunden auch sein Gehalt zahlen!

Der einzige Grund, warum all diese CSS / DIV-Argumente auftreten, ist, dass CSS in erster Linie unzureichend ist und dass die Browser nicht miteinander kompatibel sind. Wenn dies der Fall wäre, wäre die Hälfte der Webdesigner weltweit arbeitslos .

Wenn Sie ein Fensterformular entwerfen, versuchen Sie nicht, Steuerelemente zu verschieben, nachdem Sie sie angelegt haben. Ich finde es daher seltsam, warum Sie dies mit einem Webformular tun möchten. Ich kann diese Logik einfach nicht verstehen. Holen Sie sich das richtige Layout und was ist das Problem. Ich denke, das liegt daran, dass Designer gerne mit Kreativität flirten, während Anwendungsentwickler sich mehr darum kümmern, die Anwendung tatsächlich zum Laufen zu bringen, Geschäftsobjekte zu erstellen, Geschäftsregeln zu implementieren und herauszufinden, wie sich Kundendaten miteinander in Beziehung setzen, um sicherzustellen, dass die Sache den Kunden entspricht Anforderungen - wissen Sie - wie das Zeug der realen Welt.

Verstehen Sie mich nicht falsch, beide Argumente sind gültig, aber bitte kritisieren Sie Entwickler nicht dafür, dass sie einen einfacheren und logischeren Ansatz für das Entwerfen von Formularen gewählt haben. Wir müssen uns oft um wichtigere Dinge kümmern als um die korrekte Semantik der Verwendung einer Tabelle über einem Div.

Ein typisches Beispiel: Basierend auf dieser Diskussion habe ich einige vorhandene tds und trs in divs konvertiert. 45 Minuten damit herumzuspielen und zu versuchen, alles nebeneinander aufzustellen, und ich gab auf. TDs zurück in 10 Sekunden später - funktioniert - sofort - auf allen Browsern, nichts mehr zu tun. Bitte versuchen Sie mir verständlich zu machen - welche mögliche Rechtfertigung haben Sie dafür, dass ich es anders mache!


Ich könnte diesem Beitrag nicht mehr zustimmen. In den 10 Jahren, in denen ich im Design war, kann ich mir kein einziges Mal vorstellen, in dem das Argument "Wir verwenden CSS, weil es die Verwaltung von Änderungen auf der ganzen Website erleichtert" so genau war.
Daniel Szabo

6
Wissen Sie, wie sich Änderungen auf der gesamten Website einfach verwalten lassen? MVC und Template-Systeme
Jiaaro

Verstehen Sie mich bitte nicht falsch - ich verwende immer noch CSS, aber ich verwende es, um Stil (Farbe, Hintergrundbilder usw.) und nicht Layout anzuwenden. CSS scheint in allen Browsern ziemlich konsistent zu sein, wenn es nur zur Steuerung des Stils verwendet wird. Wo es fehlerhaft ist und stark abfällt, ist die Art und Weise, wie das Layout in allen Browsern spezifiziert und implementiert wird. Hat jemand jemals versucht, ASP.NET MasterPages zuverlässig mit DIVs zum Laufen zu bringen? Es ist fast unmöglich!
Tim Black

21

Das Layout sollte einfach sein. Die Tatsache, dass Artikel darüber geschrieben wurden, wie ein dynamisches dreispaltiges Layout mit Kopf- und Fußzeile in CSS erreicht werden kann, zeigt, dass es sich um ein schlechtes Layoutsystem handelt. Natürlich können Sie es zum Laufen bringen, aber es gibt buchstäblich Hunderte von Artikeln online darüber, wie es geht. Es gibt so gut wie keine derartigen Artikel für ein ähnliches Layout mit Tabellen, da dies offensichtlich ist. Egal, was Sie gegen Tabellen und zugunsten von CSS sagen, diese eine Tatsache macht alles rückgängig: Ein grundlegendes dreispaltiges Layout in CSS wird oft als "Der Heilige Gral" bezeichnet.

Wenn Sie dann nicht "WTF" sagen, müssen Sie die Kool-Hilfe jetzt wirklich ablegen.

Ich liebe CSS. Es bietet erstaunliche Styling-Optionen und einige coole Positionierungswerkzeuge, ist aber als Layout-Engine mangelhaft. Es muss eine Art dynamisches Gitterpositionierungssystem geben. Eine einfache Möglichkeit, Boxen auf mehreren Achsen auszurichten, ohne vorher ihre Größe zu kennen. Es ist mir egal, ob Sie es <Tabelle> oder <Gitterlayout> oder was auch immer nennen, aber dies ist eine grundlegende Layoutfunktion, die in CSS fehlt.

Das größere Problem ist, dass die CSS-Fanatiker, indem sie nicht zugeben, dass Funktionen fehlen, CSS von allem zurückgehalten haben, was es sein könnte. Ich würde gerne keine Tabellen mehr verwenden, wenn CSS wie im Grunde jede andere Layout-Engine der Welt eine anständige mehrachsige Rasterpositionierung bieten würde. (Sie wissen, dass dieses Problem bereits in vielen Sprachen von allen außer dem W3C gelöst wurde, oder? Und niemand anderes bestritt, dass eine solche Funktion nützlich war.)

Seufzer. Genug Entlüftung. Gehen Sie voran und stecken Sie Ihren Kopf zurück in den Sand.


"CSS-Fanatiker" (wie Sie es ausdrücken) kennen diese Tatsache nicht. Die nächste CSS-Spezifikation enthält nicht nur eine, sondern zwei Lösungen, um die Probleme mit Layouts in CSS zu beheben. Vorlagenlayouts: w3.org/TR/css3-layout und Rasterpositionierung : w3.org/TR/css3-grid Dies führt keine konkurrierenden Spezifikationen ein. Die beiden Spezifikationen ergänzen sich tatsächlich. Zum Zeitpunkt des Schreibens dieses Kommentars implementiert ihn jedoch noch kein Browser.
Dan Herbert

+1: Ich stimme vollkommen zu. Sie sollten es nicht "zum Laufen bringen" müssen (obwohl ich auch keine Tabellen mag).
3lectrologos

So fühle ich mich zu 100%. Ich wünschte, ich könnte Ihnen die beste Antwort geben.
Bobwienholt

19

Gemäß der 508-Konformität (für Bildschirmleser für visuell unparteiische) sollten Tabellen nur zum Speichern von Daten und nicht für das Layout verwendet werden, da dies dazu führt, dass die Bildschirmleser ausflippen. Zumindest wurde mir gesagt.

Wenn Sie jedem der Divs Namen zuweisen, können Sie sie alle auch mithilfe von CSS zusammenfügen. Es ist nur ein bisschen schmerzhafter, so zu sitzen, wie Sie es brauchen.


18

Hier ist ein Abschnitt von HTML aus einem aktuellen Projekt:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>{DYNAMIC(TITLE)}</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./styles/base.css" />
</head>
<body>
    <div id="header">
        <h1><!-- Page title --></h1>
        <ol id="navigation">
            <!-- Navigation items -->
        </ol>
        <div class="clearfix"></div>
    </div>
    <div id="sidebar">
        <!-- Sidebar content -->
    </div>
    <!-- Page content -->
    <p id="footer"><!-- Footer content --></p>
</body>
</html>

Und hier ist derselbe Code wie bei einem tabellenbasierten Layout.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>{DYNAMIC(TITLE)}</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./styles/base.css" />
</head>
<body>
    <table cellspacing="0">
        <tr>
            <td><!-- Page Title --></td>
            <td>
                <table>
                    <tr>
                        <td>Navitem</td>
                        <td>Navitem</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <table>
        <tr>
            <td><!-- Page content --></td>
            <td><!-- Sidebar content --></td>
        </tr>
        <tr>
            <td colspan="2">Footer</td>
        </tr>
    </table>
</body>
</html>

Die einzige Sauberkeit, die ich in diesem tabellenbasierten Layout sehe, ist die Tatsache, dass ich mit meiner Einrückung übereifrig bin. Ich bin sicher, dass der Inhaltsbereich zwei weitere eingebettete Tabellen enthalten würde.

Eine andere Sache, über die man nachdenken sollte: Dateigrößen . Ich habe festgestellt, dass tabellenbasierte Layouts normalerweise doppelt so groß sind wie ihre CSS-Gegenstücke. Bei unserem Hochgeschwindigkeitsbreitband ist das kein großes Problem, aber bei denen mit DFÜ-Modems.


3
Geschwindigkeit ist nicht das einzige, was durch größere Dateien beeinträchtigt wird: Viele Unternehmen zahlen für Bandbreite. Wenn Sie die Bandbreitenkosten Ihres Kunden durch einfaches Codieren halbieren können, ist dies ein großer Vorteil.
Mr. Shiny und New

2
Ja, aber vergessen Sie nicht, dass der HTML-Code in einem CSS-freien Layout zwar doppelt so groß ist, die Verwendung eines DIV + CSS-Layouts jedoch (mindestens) zu einer zusätzlichen HTTP-Anforderung für die CSS-Datei sowie zur Bandbreitennutzung für das führt Datei selbst.
Goldenes Verhältnis

12
Die CSS-Datei muss jedoch nur einmal heruntergeladen werden, wobei die gesamte Tabellenstruktur bei jeder Seitenanforderung erneut gesendet wird.
user151841

3
Sie haben ein Design ausgewählt, das für div + css gut geeignet ist, und gezeigt, dass es in einem tabellenbasierten Design ausführlicher ist? Was nun? Es wäre genauso einfach, ein Design zu erstellen, das sich gut für ein tabellenbasiertes Layout eignet, und die Rahmen anzuzeigen, durch die Sie springen müssten, um es in CSS zu replizieren.
Draemon

4
@Draemon: Vielleicht möchten Sie ein Beispiel geben?
Bobby Jack

14

Ich möchte hinzufügen, dass div-basierte Layouts einfacher zu pflegen, weiterzuentwickeln und umzugestalten sind. Nur einige Änderungen im CSS, um Elemente neu zu ordnen, und fertig. Nach meiner Erfahrung ist die Neugestaltung eines Layouts, das Tabellen verwendet, ein Albtraum (mehr, wenn verschachtelte Tabellen vorhanden sind).

Ihr Code hat auch aus semantischer Sicht eine Bedeutung .


Mein Traum ist es, einen Grafikdesigner zu haben, der die von mir bereitgestellten Objekte / Daten auf eine Seite legt, ohne dass ich mich um CSS, DIV, TABLE kümmern muss ... :)
Manrico Corazzi

Ich bin der Meinung, dass Manrico - ein visueller Designer, mit dem Sie ein Layout erstellen und feste und prozentuale Abmessungen definieren und dann nur minimales HTML und CSS generieren können - äußerst nützlich wäre!
Richard Ev

Das Problem, das ich mit dem Semantic-Web-Konzept habe, ist, dass das Vokabular in HTML 4 sehr begrenzt ist und hauptsächlich für technische Dokumente gedacht ist. Viele Websites mit kommerziellen / Marketingzielen enthalten möglicherweise Elemente, die nicht genau in dieses Vokabular passen. HTML 5 behebt einiges davon mit Tags wie nav, header, footer, aber im Moment verwenden wir Tags wie span, die eigentlich nur sehr wenig darüber aussagen, wie der Inhalt interpretiert werden soll.
Nick Van Brunt

13

Keine Argumente in DIVs sprechen für mich.

Ich würde sagen: Wenn der Schuh passt, tragen Sie ihn.

Es ist erwähnenswert, dass es schwierig, wenn nicht unmöglich ist, eine gute DIV + CSS-Methode zum Rendern von Inhalten in zwei oder drei Spalten zu finden, die in allen Browsern konsistent ist und trotzdem so aussieht, wie ich es beabsichtigt habe.

Dies bringt die Balance in den meisten meiner Layouts ein wenig in Richtung Tische, und obwohl ich mich schuldig fühle, sie zu verwenden (dunny, warum, die Leute sagen nur, dass es schlecht ist, also versuche ich, ihnen zuzuhören), ist die pragmatische Sichtweise am Ende einfach einfacher und schneller für mich, TABELLEN zu verwenden. Ich werde nicht stundenweise bezahlt, daher sind Tische für mich billiger.


1
Wenn Sie eine zwei- oder dreispaltige Website mit divs + css erstellen möchten, die in allen Browsern funktioniert, sollten Sie auf keinen Fall von vorne beginnen. Im Web sind viele Barebone-Vorlagen verfügbar, die Sie als Basis verwenden können. Diese sind normalerweise so optimiert, dass sie in allen Browsern korrekt angezeigt werden, dh 6 +
arturh

13

CSS-Layouts sind im Allgemeinen für die Barrierefreiheit viel besser, vorausgesetzt, der Inhalt kommt in einer natürlichen Reihenfolge und ist ohne Stylesheet sinnvoll. Und es sind nicht nur Bildschirmleser, die mit tabellenbasierten Layouts zu kämpfen haben. Sie erschweren es auch mobilen Browsern, eine Seite richtig zu rendern.

Mit einem div-basierten Layout können Sie mit einem Druck-Stylesheet sehr einfach coole Dinge tun, z. B. Kopf- und Fußzeilen sowie die Navigation von gedruckten Seiten ausschließen. Ich denke, es wäre unmöglich oder zumindest viel schwieriger, dies mit a zu tun tabellenbasiertes Layout.

Wenn Sie Zweifel haben, dass die Trennung von Inhalt und Layout mit divs einfacher ist als mit Tabellen, schauen Sie sich das div-basierte HTML bei CSS Zen Garden an , sehen Sie, wie das Ändern der Stylesheets das Layout drastisch ändern kann, und überlegen Sie, ob Sie dies könnten Erzielen Sie die gleiche Vielfalt an Layouts, wenn der HTML-Code tabellenbasiert ist ... Wenn Sie ein tabellenbasiertes Layout erstellen, ist es unwahrscheinlich, dass Sie CSS verwenden, um den gesamten Abstand und das Auffüllen in den Zellen zu steuern (wenn ja, Sie Ich würde es mit ziemlicher Sicherheit einfacher finden, schwebende Divs usw. überhaupt zu verwenden. Ohne die Verwendung von CSS zur Steuerung all dessen und aufgrund der Tatsache, dass Tabellen die Reihenfolge von links nach rechts und von oben nach unten im HTML angeben, bedeuten Tabellen in der Regel, dass Ihr Layout im HTML-Code sehr stark fixiert wird.

Realistisch gesehen ist es meiner Meinung nach sehr schwierig, das Layout eines Div- und CSS-basierten Designs vollständig zu ändern, ohne die Divs ein wenig zu ändern. Mit einem Div- und CSS-basierten Layout ist es jedoch viel einfacher, Dinge wie den Abstand zwischen verschiedenen Blöcken und ihre relativen Größen zu optimieren.


13

Die Tatsache, dass dies eine heiß diskutierte Frage ist, ist ein Beweis dafür, dass das W3C die Vielfalt der versuchten Layoutdesigns nicht antizipieren konnte. Die Verwendung von divs + css für ein semantisch benutzerfreundliches Layout ist ein großartiges Konzept, aber die Details der Implementierung sind so fehlerhaft, dass sie tatsächlich die kreative Freiheit einschränken.

Ich habe versucht, eine der Websites unseres Unternehmens von Tabellen auf Divs umzustellen, und es war so ein Kopfschmerz, dass ich die Stunden der Arbeit, die ich in sie gesteckt hatte, völlig verschrottet habe und wieder zu Tischen zurückgekehrt bin. Der Versuch, mit meinen Divs zu ringen, um die Kontrolle über die vertikale Ausrichtung zu erlangen, hat mich mit großen psychologischen Problemen verflucht, die ich niemals erschüttern werde, solange diese Debatte weiter tobt.

Die Tatsache, dass Menschen häufig komplexe und hässliche Problemumgehungen finden müssen, um einfache Entwurfsziele (wie die vertikale Ausrichtung) zu erreichen, deutet stark darauf hin, dass die Regeln bei weitem nicht flexibel genug sind. Wenn die Spezifikationen ausreichend sind, warum ist es dann für hochkarätige Websites (wie SO) erforderlich, die Regeln mithilfe von Tabellen und anderen Problemumgehungen zu biegen?


12

Ich denke, es ist wahr, dass die Verwendung des Tabellenelements für das Layout wenig mit tabellarischen Daten zu tun hat. Na und? Interessiert es meinen Chef? Interessieren sich meine Benutzer?

Google und andere automatisierte Systeme kümmern sich darum und sind in vielen Situationen genauso wichtig. Semantischer Code ist für ein nicht intelligentes System einfacher zu analysieren und zu verarbeiten.


Ja, zum Beispiel für Blogs trennt die Engine die Kommentare vom Blog-Beitrag. Stellen Sie sich vor, das Layout wurde mit Tabellen gestaltet.
Omar Abid

2
-1: Google ist es absolut egal, ob Sie Tabellen für das Layout verwenden.
Tom Anderson

@ Tom Anderson Nicht, weil sie ein Problem mit der Verwendung von Tabellen für das Layout haben, sondern einfach, weil Nicht-Tabellen-HTML eher semantisch ist.
Ceejayoz

8

Nachdem ich mit einer Website arbeiten musste, die 6 Ebenen verschachtelter Tabellen umfasste, die von einer Anwendung generiert wurden, und ungültiges HTML generiert hatte, war es in der Tat eine dreistündige Aufgabe, das Problem zu beheben, indem eine geringfügige Änderung vorgenommen wurde.

Dies ist natürlich der Randfall, aber tabellenbasiertes Design ist nicht wartbar. Wenn Sie CSS verwenden, trennen Sie den Stil, sodass Sie sich beim Korrigieren des HTML-Codes weniger Gedanken über das Brechen machen müssen.

Versuchen Sie dies auch mit JavaScript. Verschieben Sie eine einzelne Tabellenzelle von einem Ort an einen anderen Ort in einer anderen Tabelle. Eher kompliziert durchzuführen, wo div / span nur kopieren und einfügen würde.

"Interessiert es meinen Chef?"

Wenn ich dein Chef wäre. Es würde dich interessieren. ;) Wenn du dein Leben wertschätzt.


Mit einer Website arbeiten zu müssen, die eine enorme
Auswahl an Span-

Die Verwendung von Divs macht Ihren Code offensichtlich nicht magisch schöner. Für eine angemessene semantische Verwendung von Tags ist viel zu sagen.
Kent Fredric

7

Layoutflexibilität
Stellen Sie sich vor, Sie erstellen eine Seite mit einer großen Anzahl von Miniaturansichten.
DIVs :
Wenn Sie jedes Miniaturbild in ein DIV einfügen und nach links schweben, passen möglicherweise 10 davon in eine Reihe. Machen Sie das Fenster schmaler und BAM - es ist 6 in einer Reihe oder 2 oder wie viele passen.
TABELLE:
Sie müssen explizit angeben, wie viele Zellen sich in einer Reihe befinden. Wenn das Fenster zu eng ist, muss der Benutzer horizontal scrollen.

Wartbarkeit
Gleiche Situation wie oben. Jetzt möchten Sie der dritten Zeile drei Miniaturansichten hinzufügen.
DIVs:
Fügen Sie sie hinzu. Das Layout wird automatisch angepasst .
TABELLE: Fügen Sie die neuen Zellen in die dritte Zeile ein. Hoppla! Jetzt gibt es dort zu viele Gegenstände. Schneiden Sie einige aus dieser Reihe und legen Sie sie in die vierte Reihe. Jetzt gibt es dort zu viele Gegenstände. Schneiden Sie einige aus dieser Zeile aus ... (usw.)
( Wenn Sie die Zeilen und Zellen mit serverseitigem Scripting generieren, ist dies wahrscheinlich kein Problem. )


7

Ich denke, dass das Boot gesegelt ist. Wenn Sie sich die Richtung ansehen, in die die Branche gegangen ist, werden Sie feststellen, dass CSS und Open Standards die Gewinner dieser Diskussion sind. Was wiederum bedeutet, dass die Designer für die meisten HTML-Arbeiten mit Ausnahme von Formularen Divs anstelle von Tabellen verwenden. Ich habe es schwer damit, weil ich kein CSS-Guru bin, aber so ist es.


5

Vergessen Sie auch nicht, dass Tabellen in mobilen Browsern nicht gut gerendert werden. Sicher, das iPhone hat einen umwerfenden Browser, aber nicht jeder hat ein iPhone. Das Rendern von Tabellen kann für moderne Browser Erdnüsse sein, für mobile Browser jedoch eine Reihe von Wassermelonen.

Ich persönlich habe festgestellt, dass viele Leute zu viele <div>Tags verwenden, aber in Maßen kann es extrem sauber und leicht zu lesen sein. Sie erwähnen, dass es für Leute schwieriger ist, CSS zu lesen als für Tabellen. in Bezug auf 'Code' ist das vielleicht wahr; In Bezug auf das Lesen von Inhalten (Ansicht> Quelle) ist es jedoch viel einfacher, die Struktur mit Stylesheets als mit Tabellen zu verstehen.


Guter Punkt, den Sie dort haben; IMHO sollte die Benutzeroberfläche für mobile Geräte jedoch unter Berücksichtigung der Eingabebeschränkungen völlig anders sein.
Manrico Corazzi

Wahr; Aus diesem Grund habe ich manchmal einen anderen Ansatz gewählt. Lassen Sie meine Ansicht im MVC-Modell nur XML-Rohdaten, dh Inhalte, anzeigen. Beginnen Sie dann mit einem anderen MVC-Modell, bei dem die XML-Rohdaten = Modell; view = html / css; controller = xsl. Das XSL-Stylesheet löscht unnötige Daten für Mobilgeräte.
Swati

5

Sieht so aus, als wären Sie nur an Tische gewöhnt und das wars. Wenn Sie das Layout in eine Tabelle einfügen, sind Sie nur für dieses Layout eingeschränkt. Mit CSS können Sie Bits verschieben, sehen Sie sich http://csszengarden.com/ an. Und nein, für das Layout sind normalerweise nicht viele verschachtelte Divs erforderlich.

Ohne Tabellen für Layout und korrekte Semantik ist HTML viel sauberer und daher leichter zu lesen. Warum sollte jemand, der CSS nicht verstehen kann, versuchen, es zu lesen? Und wenn sich jemand als Webentwickler betrachtet, ist das gute Verständnis von CSS ein Muss.

SEO-Vorteile ergeben sich aus der Möglichkeit, die wichtigsten Inhalte weiter oben auf der Seite zu haben und ein besseres Verhältnis von Inhalt zu Markup zu erzielen.

http://www.hotdesign.com/seybold/


5
  • 508 Compliance - Die Fähigkeit eines Screenreaders, Ihr Markup zu verstehen.
  • Warten auf das Rendern - Tabellen werden im Browser erst am Ende des </table>Elements gerendert.

Ich erinnere mich, wie ich vor Jahren riesige Tabellen erstellt habe, in den Tagen langsamerer Computer, und ich erinnere mich, als der Code einging, der sie im Laufe der Zeit rendern ließ. IE6? IE4? Ich kann mich nicht erinnern, aber es hat sich sicherlich geändert. Dies ist natürlich für tabellarische Daten nützlich, aber Layout-Tabellen sind auf einen Zentimeter ihres Lebens genau gestaltet, sodass progressives Rendern möglicherweise weniger nützlich ist, wenn die Tabelle herumspringt, um den neu geladenen Inhalt aufzunehmen.
ijw

5

Die ganze Idee rund um semantisches Markup ist die Trennung von Markup und Präsentation, einschließlich Layout.

Divs ersetzen keine Tabellen, sie haben ihre eigene Verwendung bei der Trennung von Inhalten in Blöcke verwandter Inhalte (,). Wenn Sie nicht über die erforderlichen Fähigkeiten verfügen und sich auf Tabellen verlassen, müssen Sie Ihren Inhalt häufig in Zellen aufteilen, um das gewünschte Layout zu erhalten. Sie müssen jedoch das Markup nicht berühren, um eine Präsentation zu erzielen, wenn Sie semantisches Markup verwenden. Dies ist sehr wichtig, wenn das Markup generiert wird und nicht statische Seiten.

Entwickler müssen aufhören, Markups bereitzustellen, die ein Layout implizieren, damit diejenigen von uns, die über die Fähigkeiten verfügen, Inhalte zu präsentieren, mit ihren Jobs weitermachen können, und Entwickler müssen nicht zu ihrem Code zurückkehren, um Änderungen vorzunehmen, wenn sich die Präsentationsanforderungen ändern.


4

Hier geht es nicht wirklich darum, ob Divs für das Layout besser sind als Tabellen. Jemand, der CSS versteht, kann jedes Design mithilfe von Layouttabellen ziemlich einfach duplizieren. Der eigentliche Gewinn besteht darin, HTML-Elemente für das zu verwenden, wofür sie da sind. Der Grund, warum Sie keine Tabellen für nicht tabellarische Daten verwenden würden, ist der gleiche Grund, warum Sie keine Ganzzahlen als Zeichenfolgen speichern. Die Technologie funktioniert viel einfacher, wenn Sie sie für den Zweck verwenden, für den sie bestimmt ist. Wenn es jemals notwendig war, Tabellen für das Layout zu verwenden (aufgrund von Browsermängeln in den frühen neunziger Jahren), ist dies jetzt sicherlich nicht der Fall.


3

Tools, die Tabellenlayouts verwenden, können aufgrund der zum Erstellen des Layouts erforderlichen Codemenge außerordentlich schwer werden. Das Netweaver Portal von SAP verwendet standardmäßig TABLE, um die Seiten zu gestalten.

Das SAP-Produktionsportal bei meinem aktuellen Auftritt hat eine Homepage, deren HTML-Code über 60 KB wiegt und sieben Tabellen tief ist, dreimal innerhalb der Seite. Fügen Sie im Javascript den Missbrauch von 16 Iframes mit ähnlichen Tabellenproblemen, übermäßig schwerem CSS usw. hinzu, und die Seite wiegt über 5 MB.

Es lohnt sich, sich die Zeit zu nehmen, um das Seitengewicht zu senken, damit Sie Ihre Bandbreite nutzen können, um Aktivitäten mit Benutzern durchzuführen.


3

Es lohnt sich, CSS und Divs herauszufinden, damit die zentrale Inhaltsspalte in einem Seitenlayout vor der Seitenleiste geladen und gerendert wird. Wenn Sie jedoch Schwierigkeiten haben, schwebende Divs zu verwenden, um ein Logo vertikal an einem Sponsorentext auszurichten, verwenden Sie einfach die Tabelle und fahren Sie mit dem Leben fort. Die Zen-Gartenreligion gibt einfach nicht viel für das Geld.

Die Idee, Inhalte von Präsentationen zu trennen, besteht darin, die Anwendung so zu partitionieren, dass unterschiedliche Arten von Arbeit unterschiedliche Codeblöcke beeinflussen. Hier geht es eigentlich um Change Management. Codierungsstandards können den aktuellen Codezustand jedoch nur oberflächlich untersuchen.

Das Änderungsprotokoll für eine Anwendung, die von Codierungsstandards abhängt, um "Inhalt von Präsentation zu trennen", zeigt ein Muster paralleler Änderungen in vertikalen Silos. Wie erfolgreich ist die Partitionierung, wenn eine Änderung von "Inhalt" immer mit einer Änderung von "Präsentation" einhergeht?

Wenn Sie Ihren Code wirklich produktiv partitionieren möchten, verwenden Sie Subversion und überprüfen Sie Ihre Änderungsprotokolle. Verwenden Sie dann die einfachsten Codierungstechniken - Divs, Tabellen, JavaScript, Includes, Funktionen, Objekte, Fortsetzungen usw. -, um die Anwendung so zu strukturieren, dass die Änderungen auf einfache und komfortable Weise passen.


+1 für die ersten beiden Sätze.
Sean McMillan

3

Weil es HÖLLE ist, eine Site zu pflegen, die Tabellen verwendet und deren Code viel länger dauert. Wenn Sie Angst vor schwebenden Divs haben, nehmen Sie an einem Kurs teil. Sie sind nicht schwer zu verstehen und ungefähr 100-mal effizienter und eine Million Mal weniger nervig (es sei denn, Sie verstehen sie nicht - aber hey, willkommen in der Welt der Computer).

Wer erwägt, sein Layout mit einer Tabelle zu erstellen, sollte nicht erwarten, dass ich es pflege. Es ist der rückständigste Weg, eine Website zu rendern. Gott sei Dank haben wir jetzt eine viel bessere Alternative. Ich würde niemals zurückkehren.

Es ist beängstigend, dass einige Leute sich der Zeit- und Energievorteile beim Erstellen einer Website mit modernen Tools nicht bewusst sind.


3

Tabellen sind nicht im Allgemeinen nicht einfacher oder wartbarer als CSS. Es gibt jedoch einige spezifische Layoutprobleme, bei denen Tabellen tatsächlich die einfachste und flexibelste Lösung sind.

CSS ist eindeutig vorzuziehen, wenn Präsentations-Markup und CSS dieselbe Art von Design unterstützen. Niemand font, der bei klarem Verstand ist, würde argumentieren, dass -tags besser sind als die Angabe von Typografie in CSS, da CSS Ihnen die gleiche Leistung bietet wie font-tags, aber in ein viel sauberer Weg.

Das Problem bei Tabellen besteht jedoch im Wesentlichen darin, dass das Tabellenlayoutmodell in CSS in Microsoft Internet Explorer nicht unterstützt wird. Tabellen und CSS sind daher in ihrer Leistung nicht gleichwertig. Der fehlende Teil ist der gitterartige Verhalten von Tabellen, bei denen die Kanten von Zellen sowohl vertikal als auch horizontal ausgerichtet sind, während Zellen immer noch erweitert werden, um ihren Inhalt zu enthalten. Dieses Verhalten ist in reinem CSS nicht leicht zu erreichen, ohne einige Dimensionen fest zu codieren, was das Design starr und spröde macht (solange wir Internet Explorer unterstützen müssen - in anderen Browsern wird dies einfach durch die Verwendung erreicht display:table-cell).

Es geht also nicht wirklich darum, ob Tabellen oder CSS vorzuziehen sind, sondern darum, die spezifischen Fälle zu erkennen, in denen die Verwendung von Tabellen das Layout flexibler machen kann.

Der wichtigste Grund für die nicht mit Tabellen ist die Zugänglichkeit. In den Richtlinien zur Barrierefreiheit von Webinhalten ( http://www.w3.org/TR/WCAG10/) wird empfohlen, keine Tabellen für das Layout zu verwenden. Wenn Sie Bedenken hinsichtlich der Barrierefreiheit haben (und in einigen Fällen gesetzlich dazu verpflichtet sind), sollten Sie CSS verwenden, auch wenn Tabellen einfacher sind. Beachten Sie, dass Sie mit CSS immer das gleiche Layout wie mit Tabellen erstellen können. Dies erfordert möglicherweise nur mehr Arbeit.


3

Ich war überrascht zu sehen, dass einige Themen noch nicht behandelt wurden. Hier sind meine 2 Cent zusätzlich zu all den sehr gültigen Punkten, die zuvor gemacht wurden:

.1. CSS & SEO:

a) CSS hatte früher einen sehr großen Einfluss auf die Suchmaschinenoptimierung, da der Inhalt auf der Seite positioniert werden konnte, wo immer Sie möchten. Vor einigen Jahren legten Suchmaschinen großen Wert auf "On-Page" -Faktoren. Etwas oben auf der Seite wurde als relevanter für die Seite angesehen als etwas unten. "Oben auf der Seite" bedeutete für eine Spinne "am Anfang des Codes". Mithilfe von CSS können Sie Ihren schlüsselwortreichen Inhalt am Anfang des Codes organisieren und ihn dennoch an einer beliebigen Stelle auf der Seite positionieren. Dies ist immer noch etwas relevant, aber auf der Seite sind Faktoren für das Seitenranking immer weniger wichtig.

b) Wenn das Layout auf CSS verschoben wird, ist die HTML-Seite leichter und wird daher für eine Suchmaschinenspinne schneller geladen. (Spinnen kümmern sich nicht darum, externe CSS-Dateien herunterzuladen). Das schnelle Laden von Seiten ist eine wichtige Rangfolge für mehrere Suchmaschinen, einschließlich Google

c) SEO-Arbeit erfordert oft das Testen und Ändern von Dingen, was mit einem CSS-basierten Layout viel bequemer ist

.2. Generierter Inhalt:

Eine Tabelle ist wesentlich einfacher programmgesteuert zu generieren als das entsprechende CSS-Layout.

foreach ($comment as $key=>$value)
{
   echo "<tr><td>$key</td><td>$value</td></tr>";
}

Das Generieren einer Tabelle ist einfach und sicher. Es ist in sich geschlossen und lässt sich gut in jede Vorlage integrieren. Dasselbe mit CSS zu tun ist erheblich schwieriger und möglicherweise überhaupt nicht von Vorteil: Das CSS-Stylesheet auf dem Flug schwer zu bearbeiten, und das Hinzufügen des Inline-Stils unterscheidet sich nicht von der Verwendung einer Tabelle (Inhalt ist nicht vom Layout getrennt).

Wenn eine Tabelle generiert wird, ist der Inhalt (in Variablen) bereits vom Layout (in Code) getrennt, was das Ändern ebenso einfach macht.

Dies ist ein Grund, warum einige sehr gut gestaltete Websites (z. B. SO) immer noch Tabellenlayouts verwenden.

Wenn die Ergebnisse über JavaScript verarbeitet werden müssen, sind divs natürlich die Mühe wert.

.3. Schnelle Konvertierungstests

Wenn Sie herausfinden möchten, was für ein bestimmtes Publikum funktioniert, ist es hilfreich, das Layout auf verschiedene Arten ändern zu können, um herauszufinden, was die besten Ergebnisse erzielt. Ein CSS-basiertes Layout erleichtert die Arbeit erheblich

.4. Unterschiedliche Lösungen für unterschiedliche Probleme

Layout-Tabellen werden normalerweise aufgelöst, weil "jeder weiß, dass Divs & CSS" der richtige Weg sind.

Es bleibt jedoch die Tatsache, dass Tabellen schneller zu erstellen, einfacher zu verstehen und robuster sind als die meisten CSS-Layouts. (Ja, CSS kann genauso robust sein, aber ein kurzer Blick durch das Internet in verschiedenen Browsern und Bildschirmauflösungen zeigt, dass dies nicht oft der Fall ist.)

Tische haben viele Nachteile, einschließlich Wartung, mangelnder Flexibilität ... aber lassen Sie uns das Baby nicht mit dem Badewasser werfen. Es gibt viele professionelle Anwendungen für eine Lösung, die sowohl schnell als auch zuverlässig ist.

Vor einiger Zeit musste ich ein sauberes und einfaches CSS-Layout mithilfe von Tabellen neu schreiben, da ein erheblicher Teil der Benutzer eine ältere Version des IE mit wirklich schlechter Unterstützung für CSS verwenden würde

Zum einen bin ich krank und müde von der Knie-Ruck-Reaktion "Oh nein! Tabellen für das Layout!"

Was die Menge "Es war nicht für diesen Zweck gedacht und deshalb sollten Sie es nicht so verwenden" betrifft, ist das nicht Heuchelei? Was halten Sie von all den CSS-Tricks, die Sie verwenden müssen, um das verdammte Ding in den meisten Browsern zum Laufen zu bringen? Waren sie für diesen Zweck gedacht?

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.