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

Eine Tabelle für das Layout wäre gar nicht so schlecht. Aber mit nur einer Tabelle bekommt man meistens nicht das Layout, das man braucht. Ziemlich bald hat man 2 oder drei verschachtelte Tabellen. Das wird dann sehr umständlich.

• Es ist VIEL schwieriger zu lesen. Das ist keine Frage der Meinung. Es gibt einfach mehr verschachtelte Tags ohne Erkennungszeichen.

• Die Trennung von Inhalt und Präsentation ist eine gute Sache, denn so kann man sich auf das konzentrieren, was man gerade tut. Eine Vermischung der beiden führt zu aufgeblähten Seiten, die schwer zu lesen sind.

• CSS für Stile ermöglicht es Ihrem Browser, die Dateien zwischenzuspeichern, so dass nachfolgende Anfragen viel schneller sind. Das ist RIESIG.

• Tische legen Sie auf ein Design fest. Sicher, nicht jeder braucht die Flexibilität von CSS Zen Garden, aber ich habe noch nie an einer Website gearbeitet, bei der ich das Design nicht hier und da ein wenig ändern musste. Mit CSS ist das viel einfacher.

• Tische sind schwer zu gestalten. Sie sind nicht sehr flexibel (d. h. Sie müssen immer noch HTML-Attribute hinzufügen, um die Stile einer Tabelle vollständig zu kontrollieren).

Ich habe seit etwa 4 Jahren keine Tabellen mehr für nicht-tabellarische Daten verwendet. Ich habe nicht zurückgeblickt.

Ich möchte Ihnen folgende Lektüre ans Herz legen CSS Beherrschung von Andy Budd. Es ist fantastisch.

Bild bei 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

Answer 2

Es ist gut, Inhalt und Layout zu trennen
Aber das ist ein trügerisches Argument; Klischeedenken

Das ist ein trügerisches Argument, denn HTML-Tabellen sind ein Layout! Der Inhalt ist das Daten in der Tabelle, die Darstellung ist die Tabelle selbst. Aus diesem Grund kann die Trennung von CSS und HTML manchmal sehr schwierig sein. Man trennt nicht den Inhalt von der Darstellung, sondern die Darstellung von der Darstellung! Ein Stapel verschachtelter divs ist nichts anderes als eine Tabelle - es ist nur ein anderer Satz von Tags.

Das andere Problem bei der Trennung von HTML und CSS besteht darin, dass sie einander sehr gut kennen müssen - man kann sie nicht vollständig voneinander trennen. Das Tag-Layout im HTML ist eng mit der CSS-Datei verbunden, egal was Sie tun.

Ich denke, Tabellen vs divs kommt auf die Bedürfnisse Ihrer Anwendung.

In der Anwendung, die wir bei der Arbeit entwickeln, benötigten wir ein Seitenlayout, bei dem sich die Größe der Teile dynamisch an den Inhalt anpasst. Ich habe Tage damit verbracht, dies mit CSS und DIVs browserübergreifend zum Laufen zu bringen, und es war ein kompletter Albtraum. Wir sind auf Tabellen umgestiegen und das Ganze ist einfach gearbeitet .

Wir haben jedoch ein sehr begrenztes Publikum für unser Produkt (wir verkaufen ein Gerät mit einer Webschnittstelle) und Zugänglichkeitsprobleme sind für uns kein Thema. Ich weiß nicht, warum Screenreader nicht gut mit Tabellen umgehen können, aber ich denke, wenn das so ist, müssen die Entwickler damit umgehen.

Answer 3

CSS/DIV - das sind doch nur Jobs für die Designer, oder? Die Hunderte von Stunden, die ich damit verbracht habe, DIV/CSS-Probleme zu debuggen, das Internet zu durchsuchen, um einen Teil des Markups mit einem obskuren Browser zum Laufen zu bringen - das macht mich verrückt. Man nimmt eine kleine Änderung vor, und das ganze Layout läuft schrecklich schief - wo zum Teufel bleibt da die Logik? Ich verbringe Stunden damit, etwas um 3 Pixel in diese Richtung und etwas anderes um 2 Pixel in die andere Richtung zu verschieben, um alles in eine Linie zu bringen. Irgendwie erscheint mir das schlichtweg falsch. Nur weil man ein Purist ist und etwas "nicht das Richtige" ist, heißt das noch lange nicht, dass man es bis zum Letzten und unter allen Umständen ausnutzen sollte, vor allem, wenn es einem das Leben 1000 Mal einfacher macht.

So habe ich schließlich aus rein kommerziellen Gründen beschlossen, obwohl ich die Verwendung auf ein Minimum beschränke, einen Tisch einzubauen, wenn ich mit 20 Stunden Arbeit rechne, um ein DIV korrekt zu platzieren. Das 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 die Puristen zufrieden zu stellen. Sie bezahlen schließlich die Rechnungen, und mein Argument gegenüber einem Manager, der die Verwendung von CSS/DIV erzwingt, wäre lediglich, dass die Kunden auch sein Gehalt bezahlen!

Der einzige Grund, warum diese CSS/DIV-Streitigkeiten auftreten, ist die Unzulänglichkeit von CSS und die Tatsache, dass die Browser nicht miteinander kompatibel sind, und wenn sie es wären, wäre die Hälfte der Webdesigner auf der Welt arbeitslos.

Wenn Sie ein Windows-Formular entwerfen, versuchen Sie nicht, die Steuerelemente zu verschieben, nachdem Sie sie angelegt haben, also finde ich es irgendwie seltsam, warum Sie das bei einem Webformular tun wollen. Ich kann diese Logik einfach nicht verstehen. Wenn das Layout von Anfang an stimmt, wo ist dann das Problem? Ich glaube, das liegt daran, dass Designer gerne mit der Kreativität kokettieren, während Anwendungsentwickler sich mehr damit beschäftigen, die Anwendung zum Laufen zu bringen, Geschäftsobjekte zu erstellen, Geschäftsregeln zu implementieren, herauszufinden, wie die Bits der Kundendaten miteinander in Beziehung stehen, und sicherzustellen, dass die Sache die Anforderungen der Kunden erfüllt - Sie wissen schon - wie in der echten Welt.

Verstehen Sie mich nicht falsch, beide Argumente sind stichhaltig, aber bitte kritisieren Sie die Entwickler nicht dafür, dass sie einen einfacheren, logischeren Ansatz für die Gestaltung von Formularen wählen. Wir müssen uns oft um wichtigere Dinge kümmern als um die korrekte Semantik der Verwendung einer Tabelle anstelle eines Divs.

Ein Beispiel: Auf der Grundlage dieser Diskussion habe ich ein paar bestehende tds und trs in divs umgewandelt. 45 Minuten Durcheinander mit ihm versucht, alles zu bekommen, um nebeneinander ausrichten und ich gab auf. TDs wieder in 10 Sekunden später - funktioniert - geradeaus - auf allen Browsern, nichts mehr zu tun. Bitte versuchen Sie, mich zu verstehen - welche mögliche Rechtfertigung haben Sie dafür, dass ich es auf eine andere Weise machen soll!

Answer 4

Das Layout sollte einfach sein. Die Tatsache, dass es Artikel darüber gibt, wie man ein dynamisches dreispaltiges Layout mit Kopf- und Fußzeile in CSS erreicht, zeigt, dass es ein schlechtes Layoutsystem ist. Natürlich kann man es zum Laufen bringen, aber es gibt buchstäblich Hunderte von Artikeln im Internet darüber, wie man es macht. Es gibt so gut wie keine solchen Artikel für ein ähnliches Layout mit Tabellen, weil es offensichtlich ist. Egal, was man gegen Tabellen und für CSS sagt, diese eine Tatsache macht alles zunichte: ein grundlegendes dreispaltiges Layout in CSS wird oft als "Heiliger Gral" bezeichnet.

Wenn Sie jetzt nicht "WTF" sagen, dann sollten Sie wirklich das Kool-Aid absetzen.

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

Das größere Problem ist, dass die CSS-Eiferer, die nicht zugeben, dass es fehlende Funktionen gibt, CSS von allem abhalten, was es sein könnte. Ich würde gerne aufhören, Tabellen zu verwenden, wenn CSS eine anständige mehrachsige Rasterpositionierung bieten würde, wie praktisch jede andere Layout-Engine auf der Welt. (Sie wissen schon, dass dieses Problem bereits viele Male in vielen Sprachen von allen außer dem W3C gelöst worden ist, oder? Und niemand sonst hat bestritten, dass eine solche Funktion nützlich ist.)

Seufz. Genug gelästert. Stecken Sie ruhig den Kopf wieder in den Sand.

Answer 5

Gemäß der Norm 508 (für Bildschirmlesegeräte für Sehbehinderte) sollten Tabellen nur zur Aufnahme von Daten und nicht für das Layout verwendet werden, da dies die Bildschirmlesegeräte zum Ausrasten bringt. Zumindest wurde mir das gesagt.

Wenn Sie den einzelnen Divs Namen zuweisen, können Sie sie auch per CSS zusammenfassen. Sie sind nur ein bisschen mehr von einem Schmerz zu bekommen, um die Art, wie Sie sie brauchen zu sitzen.