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: Ja, Ihre Benutzer interessiert das. Wenn sie ein Bildschirmlesegerät verwenden, wird es verloren gehen. Wenn ich ein anderes Tool verwende, das versucht, Informationen aus der Seite zu extrahieren, ist es irreführend, auf Tabellen zu stoßen, die nicht zur Darstellung von tabellarischen Daten verwendet werden.

Ein div oder span ist für die Trennung von Inhalten akzeptabel, weil das ist genau die Bedeutung dieser Elemente . Wenn ich, eine Suchmaschine, ein Bildschirmlesegerät oder irgendetwas anderes auf ein Tabellenelement stößt, erwarten wir, dass dies bedeutet: "Das Folgende sind tabellarische Daten, dargestellt in einer Tabelle". Wenn wir auf ein div stoßen, erwarten wir "dies ist ein Element, das dazu dient div meinen Inhalt in einzelne Teile oder Bereiche aufteilen.

2: Lesbarkeit: Falsch. Wenn der gesamte Präsentationscode in CSS geschrieben ist, kann ich die HTML-Datei lesen und den Inhalt der Seite verstehen. Oder ich kann den CSS-Code lesen und die Präsentation verstehen. Wenn alles in der Html-Datei durcheinander ist, muss ich im Geiste alle präsentationsbezogenen Teile herausstreichen, bevor ich überhaupt erkennen kann, was Inhalt ist und was nicht. Außerdem hätte ich Angst, einen Webentwickler zu treffen, der kein CSS versteht, also glaube ich nicht, dass das ein Problem ist.

3: Tabellen sind langsamer: Ja, das sind sie. Der Grund dafür ist einfach: Tabellen müssen vollständig geparst werden, einschließlich ihren Inhalt, bevor sie wiedergegeben werden können. Ein div kann gerendert werden, wenn es angetroffen wird, auch wenn 前 sein Inhalt geparst wurde. Das bedeutet, dass die Divs angezeigt werden, bevor die Seite fertig geladen ist.

Hinzu kommt, dass Tabellen viel anfälliger sind und in verschiedenen Browsern mit unterschiedlichen Schriftarten und -größen und all den anderen Faktoren, die das Layout verändern können, nicht immer gleich dargestellt werden. Tabellen sind ein hervorragendes Mittel, um sicherzustellen, dass Ihre Website in bestimmten Browsern um ein oder zwei Pixel abweicht und sich nicht gut skalieren lässt, wenn der Benutzer seine Schriftgröße oder seine Einstellungen auf andere Weise ändert.

Natürlich ist die Nummer 1 die wichtigste. Viele Werkzeuge und Anwendungen hängen von der semantischen Bedeutung einer Webseite ab. Das übliche Beispiel sind Bildschirmlesegeräte für sehbehinderte Benutzer. Wenn Sie ein Webentwickler sind, werden Sie feststellen, dass viele große Unternehmen, die Sie sonst mit der Arbeit an einer Website beauftragen würden, erfordern dass die Website auch in diesem Fall zugänglich ist. Das heißt, Sie müssen sich Gedanken über die semantische Bedeutung Ihrer HTML-Dateien machen. Mit dem semantischen Web, oder besser gesagt, mit Mikroformaten, RSS-Readern und anderen Tools, wird Ihr Seiteninhalt nicht mehr ausschließlich über einen Browser betrachtet.

Answer 2

Verwenden Sie Tabellen, wenn Sie sicherstellen müssen, dass Elemente in einer bestimmten physischen Beziehung im Layout bleiben müssen. Für Daten ist die Tabelle im Allgemeinen das am besten geeignete Layoutelement, da Sie nicht möchten, dass Ihre Spalten auf unerwartete Weise umbrochen werden und die Zuordnungen durcheinanderbringen.

Man könnte auch argumentieren, dass Nichtdatenelemente, die in einer bestimmten Beziehung bleiben müssen, ebenfalls in einer Tabelle dargestellt werden sollten.

Flexible CSS-Layouts eignen sich hervorragend für Inhalte, die für mobile Geräte, große Bildschirme, Druckvorlagen und andere Darstellungsarten geeignet sind, aber manchmal muss der Inhalt einfach auf eine ganz bestimmte Art und Weise dargestellt werden, und wenn dies erfordert, dass Bildschirmlesegeräte nicht einfach darauf zugreifen können, könnte dies durchaus gerechtfertigt sein.

Answer 3

In der Vergangenheit war es für Bildschirmlesegeräte und andere barrierefreie Software schwierig, Tabellen effizient zu verarbeiten. Bis zu einem gewissen Grad wurde dies in Bildschirmlesegeräten dadurch gelöst, dass das Lesegerät zwischen einem "Tabellen"-Modus und einem "Layout"-Modus umschaltete, je nachdem, was es innerhalb der Tabelle sah. Dies war oft falsch, und so mussten die Benutzer den Modus manuell umschalten, wenn sie durch Tabellen navigierten. In jedem Fall waren und sind die großen, oft stark verschachtelten Tabellen mit einem Bildschirmlesegerät sehr schwer zu navigieren.

Das Gleiche gilt, wenn Divs oder andere Block-Level-Elemente verwendet werden, um Tabellen nachzubilden und stark verschachtelt sind. Der Zweck von divs ist die Verwendung als Formatierungs- und Layout-Element, und als solches sind sie dazu bestimmt, ähnliche Informationen zu enthalten und sie für visuelle Benutzer auf dem Bildschirm anzuordnen. Wenn ein Bildschirmlesegerät auf eine Seite stößt, ignoriert es oft alle Layout-Informationen, sowohl CSS-basierte als auch HTML-Attribut-basierte (Dies gilt nicht für alle Bildschirmlesegeräte, aber für die beliebtesten, wie JAWS, Windows Eyes und Orca für Linux ist es).

Zu diesem Zweck werden tabellarische Daten, d. h. Daten, die logisch sinnvoll in zwei oder mehr Dimensionen geordnet sind, mit einer Art von Überschriften, am besten in Tabellen platziert, und verwenden Sie Divs, um das Layout des Inhalts auf der Seite zu verwalten. (eine andere Möglichkeit, sich vorzustellen, was "tabellarische Daten" sind, ist zu versuchen, sie in Form eines Diagramms zu zeichnen... wenn Sie das nicht können, sind sie wahrscheinlich nicht am besten in einer Tabelle dargestellt)

Schließlich werden bei einem tabellenbasierten Layout häufig stark verschachtelte Tabellen verwendet, um eine feinkörnige Steuerung der Position von Elementen auf der Seite zu erreichen. Dies hat zwei Auswirkungen: 1.) Erhöhte Codegröße für jede Seite - Da die Navigation und die gemeinsame Struktur häufig mit den Tabellen erfolgt, wird bei jeder Anfrage derselbe Code über das Netz gesendet, während bei einem auf div/css basierenden Layout die css-Datei nur einmal übertragen wird und dann weniger wortreiche divs verwendet werden. 2.) Bei stark verschachtelten Tabellen braucht der Browser des Kunden viel länger zum Rendern, was zu etwas langsameren Ladezeiten führt.

In beiden Fällen werden diese Faktoren durch den Anstieg der Bandbreite auf der letzten Meile und durch viel schnellere Personalcomputer gemildert, aber dennoch sind sie für viele Standorte immer noch ein Problem.

Wie bereits gesagt wurde, sind Tabellen einfacher, weil sie sich mehr an einem Raster orientieren, so dass man weniger nachdenken muss. Wenn die betreffende Website voraussichtlich nicht lange bestehen oder nicht gepflegt werden wird, kann es sinnvoll sein, das zu tun, was am einfachsten ist, weil es vielleicht am kostengünstigsten ist. Wenn die zu erwartende Nutzerbasis jedoch einen beträchtlichen Anteil an behinderten Personen umfasst oder wenn die Website lange Zeit von anderen gepflegt wird, kann es sich am Ende mehr auszahlen, im Vorfeld Zeit in eine übersichtliche, zugängliche Gestaltung zu investieren.

Answer 4

Wenn ich mein Layout mit CSS entwerfe, gebe ich in der Regel jedem größeren Abschnitt ein eigenes Root-Div (Körperebene) und verwende relative/absolute Positionierung, um ihn an seinen richtigen Platz zu bringen. Dies ist etwas flexibler als Tabellen, da ich nicht auf eine Anordnung beschränkt bin, die ich mit Zeilen und Spalten darstellen kann.

Außerdem kann ich, wenn ich mich entscheide, das Layout neu anzuordnen (z. B. wenn ich die Navigationsleiste jetzt rechts haben möchte), einfach die Position der Elemente an einer Stelle ändern (in der CSS-Datei), ohne dass der HTML-Code geändert werden muss. Wenn ich das mit Tabellen machen würde, müsste ich die Informationen suchen und eine Menge Attribute ändern und kopieren und einfügen, um den gleichen Effekt zu erzielen.

In der Tat kann ich mit CSS sogar meine Benutzer wählen, wie sie ihr Layout gestalten wollen. Solange sich die allgemeine Größe der Inhaltsbereiche nicht ändert, ist es für mich völlig in Ordnung, ein paar PHP-Skripte zu verwenden, um mein CSS auf der Grundlage der Benutzerpräferenzen auszugeben und ihnen die Möglichkeit zu geben, die Site nach ihren eigenen Vorstellungen umzugestalten. Auch das ist mit Tabellen möglich, aber sehr viel schwieriger zu pflegen.

Schließlich bietet CSS einen WESENTLICHEN Vorteil, den Tabellen niemals bieten werden: die Möglichkeit, Inhalte je nach Anzeigegerät neu zu formatieren. Mit CSS kann ich für einen Drucker einen völlig anderen Stilsatz (einschließlich Position, Formatierung usw.) verwenden als für den Monitor. Dies lässt sich auch auf andere Medien übertragen. Ein hervorragendes Beispiel dafür ist Opera Show, mit dem eine clever gestaltete (und sehr standardmäßige) CSS-optimierte Seite als Diashow angezeigt werden kann.

Letztendlich sind also Flexibilität und Management die wahren Gewinner. Im Allgemeinen können Sie mit CSS mehr mit dem Layout machen. Es gibt nichts technisch Es gibt nichts Ungewöhnliches an einem tabellenbasierten Layout, aber warum sollten Sie sich einschränken wollen?

Answer 5

Ich versuche, TABLEs so weit wie möglich zu vermeiden, aber wenn wir komplexe Formulare entwerfen, die mehrere Kontrolltypen und verschiedene Beschriftungspositionen mit ziemlich strengen Kontrollen für die Gruppierung mischen, ist die Verwendung von DIVs unzuverlässig oder oft fast unmöglich.

Ich will nicht behaupten, dass diese Formulare nicht umgestaltet werden könnten, um einem DIV-basierten Layout besser gerecht zu werden, aber bei einigen von ihnen besteht unser Kunde darauf, das bestehende Layout der vorherigen Version (in klassischem ASP geschrieben) nicht zu ändern, da es einem Papierformular entspricht, mit dem seine Benutzer vertraut sind.

Da die Darstellung der Formulare dynamisch ist (wobei die Anzeige einiger Abschnitte vom Zustand des Falls oder den Berechtigungen des Benutzers abhängt), verwenden wir Sätze von gestapelten DIVs, die jeweils eine TABLE mit logisch gruppierten Formularelementen enthalten. Jede Spalte der TABLE ist klassifiziert, so dass sie mit CSS gesteuert werden kann. Auf diese Weise können wir verschiedene Abschnitte des Formulars ausschalten, ohne das Problem zu haben, dass die Zeilen nicht in DIVs eingepackt werden können.