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

Question

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

Warum?

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

• Es ist gut, dass Inhalt vom Layout trennen
  Aber das ist ein trügerisches Argument; Klischee-Denken . Ich denke, es stimmt, dass die Verwendung des Tabellenelements für das Layout wenig mit tabellarischen Daten zu tun hat. Aber was soll's? Ist es meinem Chef egal? Interessiert es meine Benutzer?

  Vielleicht interessiert es mich oder meine Entwickler-Kollegen, die eine Webseite pflegen müssen... Ist eine Tabelle weniger wartungsfreundlich? Ich denke, eine Tabelle zu verwenden ist einfacher als mit divs und CSS.

  Übrigens... warum ist die Verwendung eines Divs oder eines Spans eine gute Trennung von Inhalt und Layout und eine Tabelle nicht? Ein gutes Layout mit nur divs erfordert oft eine Menge von verschachtelten divs.

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

• Für SEO ist es besser, keine Tabellen zu verwenden
  Warum? Kann jemand einen Beweis dafür vorlegen, dass es so ist? Oder eine Aussage von Google, dass von Tabellen aus SEO-Sicht abgeraten wird?

• Die Tische sind langsamer.
  Es muss ein zusätzliches tbody-Element eingefügt werden. Für moderne Webbrowser sind das Peanuts. Zeigen Sie mir einige Benchmarks, bei denen die Verwendung einer Tabelle eine Seite erheblich verlangsamt.

• Eine Überarbeitung des Layouts ist ohne Tabellen einfacher, siehe css Zen-Garten .
  Die meisten Websites, die ein Upgrade benötigen, brauchen auch neue Inhalte (HTML). Szenarien, in denen eine neue Version einer Website nur eine neue CSS-Datei benötigt, sind nicht sehr wahrscheinlich. Zen Garden ist eine nette Website, aber ein bisschen theoretisch. Ganz zu schweigen von seiner missbrauchen von CSS.

Ich bin wirklich an guten Argumenten für die Verwendung von Divs + CSS anstelle von Tabellen interessiert.

Answer 1

1. Versuchen Sie, einen 10/20 etwas tiefen colspan/rowspan zusammenzuführen/aufzuteilen. Mehr als einmal musste ich meinen Instinkt unterdrücken, einen Streit mit jemandem anzufangen. [?!]
2. Versuchen Sie, die Reihenfolge des Quellcodes zu ändern, ohne die sichtbare Reihenfolge zu ändern. [SEO, Benutzerfreundlichkeit, ...]
3. Die sehr (wirklich einfache) Seite, die wir betrachten, hat ~150K. Ich wette, es kann fast halbiert werden mit richtigen CSS. [SEO (Ja, SEO, lesen Sie die neuesten Google-Spezifikationen usw.), perfo, ...]
4. Versuchen Sie, eine Iteratorvorlage zu erstellen, die in jeder Breite funktioniert.
5. Die Erörterung des Themas in diesem tabellenbasierten Medium der SO kann eine Singularität verursachen und uns alle vernichten

Answer 2

Ich musste Websites auf diese beiden Arten erstellen, plus eine dritte, das gefürchtete "hybride" Layout mit Tabellen, Divs und Stilen: Divs/CSS gewinnt, mit Leichtigkeit.

Man müsste drei Divs ineinander verschachteln, um das Codegewicht einer einzigen Tabellenzelle zu erreichen, und zwar auf Anhieb. Dieser Effekt skaliert mit verschachtelten Tabellen.

Außerdem würde ich es vorziehen, eine einzige Layoutänderung vorzunehmen, anstatt eine Änderung für jede Seite meiner Website.

Ich habe die volle Kontrolle über jeden Aspekt der Präsentation mit divs/css. Tabellen bringen das auf abscheuliche Weise durcheinander, vor allem im IE, einem Browser, den ich noch nie die Möglichkeit hatte, nicht zu unterstützen.

Mein Zeitaufwand für die Wartung oder Umgestaltung einer divs/css-Website beträgt nur einen Bruchteil dessen, was bei Tabellen erforderlich wäre.

Schließlich kann ich mit CSS und praktisch jeder Skriptsprache mehrere, umschaltbare Layouts erstellen. Das wäre für mich mit Tabellen unmöglich.

Wir wünschen Ihnen viel Glück bei der Entscheidung über Ihren ROI.

Answer 3

Ein Beispiel: Sie möchten den Hauptinhaltsbereich einer Seite zentrieren, aber um um die Floats darin zu halten, muss er schwebend sein. Es gibt keine "float: center" in CSS.

Das ist nicht die einzige Möglichkeit, die Schwebekörper innerhalb eines zentrierten Elements "einzuschließen". Das ist also überhaupt kein gutes Argument!

In gewisser Weise ist es eine falsche Prämisse, die "divs vs Tabellen" Sache.

Eine Seite schnell und einfach in drei Spalten unterteilen? Tabellen sind einfacher, um ehrlich zu sein. Aber kein Profi verwendet sie mehr für das Layout, weil sie die Positionierung der Seitenelemente in der Seite festschreiben.

Das eigentliche Argument ist "Positionierung durch CSS (hoffentlich in einer entfernten Datei)" im Gegensatz zu "Positionierung durch HTML auf der Seite". Sicherlich kann jeder die Vorteile von Ersterem im Gegensatz zu Letzterem erkennen.

1. Größe - wenn Ihr Seitenlayout im HTML-Code auf den Seiten liegt, kann es nicht zwischengespeichert werden und muss auf jeder Seite wiederholt werden. Sie werden enorme Mengen an Bandbreite sparen, wenn Ihr Layout in einer zwischengespeicherten CSS-Datei und nicht auf der Seite liegt.
2. Mehrere Entwickler können gleichzeitig an der gleichen Seite arbeiten - ich arbeite am HTML, der andere am CSS. Kein Repository erforderlich, keine Probleme mit Überschreiben, Dateisperren usw.
3. Es ist einfacher, Änderungen vorzunehmen - es wird Probleme mit dem Layout in verschiedenen Browsern geben, aber Sie müssen nur eine Datei, die CSS-Datei, korrigieren, um sie zu beheben.
4. Zugänglichkeit, wie bereits mehrfach erwähnt. Bei Tabellen wird davon ausgegangen, dass ein zweidimensionales Layout für jeden funktioniert. Das ist nicht die Art und Weise, wie manche Nutzer Ihre Inhalte sehen, und es ist nicht die Art und Weise, wie Google Ihre Inhalte sieht.

Bedenken Sie dies:

[ picture ] [ picture ] [ picture ]
[ caption ] [ caption ] [ caption ]

die zwei Zeilen einer Tabelle mit 6 Zellen darstellt. Jemand, der das 2-D-Tabellenlayout sehen kann, sieht unter jedem Bild eine Beschriftung. Aber mit Sprachsynthese oder einem PDA und für einen Suchmaschinenspider ist das

picture picture picture caption caption caption

und die Beziehung, die bei vorhandener Tabelle offensichtlich ist, verschwindet.

Sind DIVs und CSS besser für die Aufgabe der einfach Rechtecke auf einer HTML-Seite auslegen, um ein bestimmtes Design in kürzester Zeit zu erreichen? Nein, das sind sie wahrscheinlich nicht. Aber mir geht es nicht darum, schnell Rechtecke auszulegen, um ein bestimmtes Design zu erreichen. Ich denke an ein viel größeres Bild.

Answer 4

Das Problem der strikten Trennung von Präsentation und Inhalt erscheint mir in etwa analog zur Trennung von Header-Dateien und Implementierungsdateien in C++. Das ist sinnvoll, kann aber auch ein Problem sein. Bei Java und C# werden die Klassen in einer einzigen Quelldatei definiert. Den Autoren der neueren Sprachen ist etwas aufgefallen, das den Programmierern Kopfzerbrechen bereitet hat, und sie haben es abgeschafft. Das scheint der Kernpunkt dieser Diskussion zu sein. Die eine Seite sagt, CSS sei zu schwierig, die andere Seite sagt, man müsse ein CSS-Meister werden.

Warum sollte man bei einfachen Layoutfragen nicht die Regel umgehen, die besagt, dass die Darstellung vollständig getrennt sein muss? Wie wäre es mit einem neuen Tag (oder einer Erweiterung des div-Tags), mit dem wir die Darstellung direkt in HTML steuern können? Lassen wir die Darstellung nicht schon jetzt in HTML einfließen? Sehen Sie sich h1, h2...h6 an. Wir alle wissen, dass diese die Darstellung steuern.

Die Fähigkeit, Code zu lesen (und HTML ist Code), ist sehr wichtig. Gurus neigen dazu, zu übersehen, wie wichtig es ist, eine Programmierumgebung für die breite Masse so zugänglich wie möglich zu machen. Es ist sehr kurzsichtig zu denken, dass nur professionelle Programmierer wichtig sind.

Answer 5

Die Trennung zwischen Inhalt und Layout macht es auch einfacher, druckerfreundliche Layouts oder einfach nur verschiedene Skins (Stile) für Ihre Website zu erstellen, ohne dass Sie verschiedene html-Dateien erstellen müssen. Einige Browser (wie Firefox) unterstützen sogar die Auswahl eines Stylesheets aus dem Ansichtsmenü.

Und ich denke, dass es einfacher ist, ein tabellenloses Layout zu pflegen. Sie müssen sich keine Gedanken über Zeilenabstände, Spaltenabstände usw. machen. Man erstellt einfach ein paar Container-Divs und platziert den Inhalt dort, wo man ihn braucht. Außerdem finde ich, dass es auch lesbarer ist ( <div id="sidebar"> gegen <tr><td>...</td><td>...<td>sidebar</td></tr> ).

Es ist nur ein kleiner "Trick", den man lernen muss (und wenn man den Trick einmal beherrscht, ist es meiner Meinung nach einfacher und macht mehr Sinn).