664 Stimmen

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

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.

5voto

Rick Glos Punkte 2386
  • 508-Konformität - die Fähigkeit eines Screenreaders, Ihre Markierung zu verstehen.
  • Warten auf Rendering - Tabellen werden im Browser nicht gerendert, bis das Ende der Tabelle erreicht ist. </table> Element.

5voto

Swati Punkte 45171

Vergessen Sie auch nicht, dass Tabellen auf mobilen Browsern nicht besonders gut dargestellt werden. Sicher, das iPhone hat einen tollen Browser, aber nicht jeder hat ein iPhone. Das Rendern von Tabellen kann für moderne Browser Peanuts sein, aber für mobile Browser ist es ein Haufen Wassermelonen.

Ich persönlich habe die Erfahrung gemacht, dass viele Menschen zu viele <div> Tags, aber in Maßen kann es sehr sauber und leicht zu lesen sein. Sie erwähnen, dass es den Leuten schwerer fällt, CSS zu lesen als Tabellen. In Bezug auf den "Code" mag das stimmen, aber in Bezug auf das Lesen von Inhalten (Ansicht > Quelle) ist es verdammt viel einfacher, die Struktur von Stylesheets zu verstehen als von Tabellen.

5voto

Rimantas Punkte 1405

Es sieht so aus, als wären Sie nur an Tabellen gewöhnt und das war's. Wenn man das Layout in eine Tabelle packt, ist man nur auf dieses Layout beschränkt. Mit CSS können Sie Bits umherbewegen, schauen Sie sich das an http://csszengarden.com/ Und nein, das Layout erfordert in der Regel nicht viele verschachtelte Divs.

Ohne Tabellen für das Layout und mit der richtigen Semantik ist HTML viel sauberer und daher leichter zu lesen. Warum sollte jemand, der CSS nicht versteht, versuchen, es zu lesen? Und wenn sich jemand für einen Webentwickler hält, dann ist ein gutes Verständnis von CSS ein Muss.

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

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

4voto

domgblackwell Punkte 4952

Hier geht es nicht wirklich darum, ob "Divs für das Layout besser sind als Tabellen". Jemand, der CSS versteht, kann jedes Design mit Hilfe von "Layout-Tabellen" ziemlich einfach duplizieren. Der eigentliche Gewinn besteht darin, HTML-Elemente für das zu verwenden, wofür sie da sind. Der Grund, warum man keine Tabellen für nicht-tabellarische Daten verwenden würde, ist derselbe, warum man ganze Zahlen nicht als Zeichenketten speichert - Technologie funktioniert viel einfacher, wenn man sie für den Zweck verwendet, für den sie gedacht ist. Wenn es jemals notwendig war, Tabellen für das Layout zu verwenden (wegen der Unzulänglichkeiten von Browsern in den frühen 1990er Jahren), so ist dies heute sicherlich nicht mehr der Fall.

3voto

Sylverdrag Punkte 8710

Ich war überrascht zu sehen, dass einige Themen noch nicht behandelt wurden, also hier meine 2 Cent, zusätzlich zu all den sehr berechtigten Punkten, die zuvor gemacht wurden:

.1. CSS UND SEO:

a) CSS hatte früher einen sehr großen Einfluss auf die Suchmaschinenoptimierung, da man den Inhalt auf der Seite positionieren konnte, wo immer man wollte. Vor ein paar Jahren legten die Suchmaschinen großen Wert auf "On-Page"-Faktoren. Etwas, das sich am oberen Rand der Seite befand, wurde als relevanter für die Seite angesehen als etwas, das sich am unteren Rand befand. "Oben auf der Seite" bedeutete für einen Spider "am Anfang des Codes". Mit CSS konnten Sie Ihre schlüsselwortreichen Inhalte am Anfang des Codes anordnen und sie dennoch an jeder beliebigen Stelle der Seite positionieren. Dies ist zwar immer noch von Bedeutung, aber die On-Page-Faktoren sind für das Ranking einer Seite immer weniger wichtig.

b) Wenn das Layout auf CSS umgestellt wird, ist die HTML-Seite leichter und wird daher von den Suchmaschinen-Spidern schneller geladen. (Spider machen sich nicht die Mühe, externe CSS-Dateien herunterzuladen). Schnell ladende Seiten sind ein wichtiges Kriterium für die Platzierung bei mehreren Suchmaschinen, darunter Google

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

.2. Generierte Inhalte:

Eine Tabelle ist programmtechnisch wesentlich einfacher zu erstellen als das entsprechende CSS-Layout.

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

Die Erstellung einer Tabelle ist einfach und sicher. Sie ist in sich geschlossen und lässt sich gut in jede Vorlage integrieren. Das Gleiche mit CSS zu tun, ist wesentlich schwieriger und bringt möglicherweise überhaupt keinen Nutzen: Es ist schwierig, das CSS-Stylesheet während des Fluges zu bearbeiten, und das Hinzufügen des Stils inline unterscheidet sich nicht von der Verwendung einer Tabelle (der Inhalt ist nicht vom Layout getrennt).

Außerdem ist bei der Erstellung einer Tabelle der Inhalt (in Form von Variablen) bereits vom Layout (im Code) getrennt, so dass sie leicht zu ändern ist.

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 Umstellungstests

Um herauszufinden, was für ein bestimmtes Publikum am besten geeignet ist, ist es nützlich, das Layout auf verschiedene Arten ändern zu können, um herauszufinden, was die besten Ergebnisse erzielt. Ein CSS-basiertes Layout macht die Sache erheblich einfacher

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

Layout-Tabellen werden in der Regel abgelehnt, weil "jeder weiß, dass Divs und CSS" der richtige Weg sind.

Tatsache ist jedoch, 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 Netz auf verschiedenen Browsern und Bildschirmauflösungen zeigt, dass dies nicht oft der Fall ist).

Es gibt eine Menge Nachteile von Tischen, einschließlich Wartung, mangelnde Flexibilität... aber wir wollen das Kind nicht mit dem Bade ausschütten. 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 unter Verwendung von Tabellen neu schreiben, weil ein großer Teil der Benutzer eine ältere Version des IE mit wirklich schlechter CSS-Unterstützung verwenden würde

Ich jedenfalls habe die Nase voll von der reflexartigen Reaktion "Oh nein! Tische für Layout!"

Was die Leute angeht, die sagen, dass es nicht für diesen Zweck gedacht war und man es deshalb nicht auf diese Weise benutzen sollte, ist das nicht Heuchelei? Was halten Sie von all den CSS-Tricks, die Sie anwenden müssen, damit das verdammte Ding in den meisten Browsern funktioniert? Waren sie für diesen Zweck gedacht?

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X