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.

3voto

Chris Fletcher Punkte 2327

Die DOM-Manipulation ist in einem tabellenbasierten Layout schwierig.

Mit semantischen Divs:

$('#myawesomediv').click(function(){
    // Do awesome stuff
});

Mit Tabellen:

$('table tr td table tr td table tr td.......').click(function(){
    // Cry self to sleep at night
});

Zugegeben, das zweite Beispiel ist etwas dumm, und man kann jederzeit IDs oder Klassen auf eine Tabelle oder ein td-Element anwenden, aber das würde einen semantischen Wert hinzufügen, was die Befürworter von Tabellen so vehement ablehnen.

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?

3voto

JacquesB Punkte 40790

Tabellen sind nicht im Allgemeinen einfacher oder besser wartbar als CSS. Allerdings gibt es ein paar spezifisch Layout-Probleme, bei denen Tabellen tatsächlich die einfachste und flexibelste Lösung sind.

CSS ist in den Fällen eindeutig vorzuziehen, in denen Präsentationsauszeichnungen und CSS dieselbe Art von Design unterstützen, und niemand, der bei Verstand ist, würde behaupten, dass font -Tags sind besser als die Angabe der Typografie in CSS, da CSS die gleichen Möglichkeiten bietet wie font -Tags, aber auf eine viel sauberere Weise.

Das Problem mit den Tabellen besteht jedoch darin, dass das Tabellen-Layout-Modell von CSS im Microsoft Internet Explorer nicht unterstützt wird. Tabellen und CSS sind daher pas gleichwertig in der Leistung. Der fehlende Teil ist die gitterartiges Verhalten von Tabellen, bei denen die Ränder der Zellen sowohl vertikal als auch horizontal ausgerichtet sind, während sich die Zellen weiterhin ausdehnen, um ihren Inhalt aufzunehmen. Dieses Verhalten ist in reinem CSS nicht leicht zu erreichen, ohne einige Abmessungen fest zu kodieren, was das Design starr und spröde macht (solange wir den Internet Explorer unterstützen müssen - in anderen Browsern lässt sich dies leicht durch die Verwendung von display:table-cell ).

Es geht also nicht wirklich um die Frage, 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 pas die Verwendung von Tabellen ist die Barrierefreiheit. Die Leitlinien für die Zugänglichkeit von Webinhalten http://www.w3.org/TR/WCAG10/ von der Verwendung von Tabellen für das Layout abraten. Wenn Ihnen die Zugänglichkeit wichtig ist (und in manchen Fällen sind Sie gesetzlich dazu verpflichtet), sollten Sie CSS verwenden, auch wenn Tabellen einfacher sind. Beachten Sie, dass Sie toujours mit CSS das gleiche Layout wie mit Tabellen erstellen, es könnte nur mehr Arbeit erfordern.

3voto

Es lohnt sich, CSS und Divs so zu gestalten, dass die zentrale Inhaltsspalte in einem Seitenlayout vor der Seitenleiste geladen und angezeigt wird. Aber wenn Sie Schwierigkeiten haben, fließende Divs zu verwenden, um ein Logo mit einem Sponsorentext vertikal auszurichten, verwenden Sie einfach die Tabelle und leben Sie weiter. Die Zen-Garten-Religion bringt einfach nicht viel für ihr Geld.

Die Idee der Trennung von Inhalt und Präsentation besteht darin, die Anwendung so aufzuteilen, dass verschiedene Arten von Arbeit verschiedene Codeblöcke betreffen. Dabei geht es eigentlich um das Änderungsmanagement. Aber Kodierungsstandards können den gegenwärtigen Zustand des Codes nur oberflächlich untersuchen.

Das Änderungsprotokoll für eine Anwendung, die auf Codierungsstandards zur "Trennung von Inhalt und Präsentation" angewiesen ist, zeigt ein Muster paralleler Änderungen über vertikale Silos hinweg. Wenn eine Änderung am "Inhalt" immer von einer Änderung an der "Präsentation" begleitet wird, wie erfolgreich ist dann die Partitionierung?

Wenn Sie Ihren Code wirklich produktiv aufteilen wollen, verwenden Sie Subversion und überprüfen Sie Ihre Änderungsprotokolle. Dann verwenden Sie die einfachsten Kodierungstechniken - Divs, Tabellen, JavaScript, Includes, Funktionen, Objekte, Continuations, was auch immer -, um die Anwendung so zu strukturieren, dass die Änderungen auf einfache und bequeme Weise passen.

3voto

Mike Cornell Punkte 5821

Werkzeuge, die Tabellenlayouts verwenden, können aufgrund der Menge an Code, die zur Erstellung des Layouts erforderlich ist, außerordentlich schwerfällig werden. Das Netweaver Portal von SAP verwendet standardmäßig TABLE für das Layout der Seiten.

Das produktive SAP-Portal bei meinem derzeitigen Job hat eine Homepage, deren HTML über 60K wiegt und sieben Tabellen tief geht, dreimal innerhalb der Seite. Nimmt man noch Javascript, den Missbrauch von 16 Iframes mit ähnlichen Tabellen darin, übermäßig viel CSS usw. hinzu, wiegt die Seite über 5 MB.

Es lohnt sich, sich die Zeit zu nehmen, um die Seitenlast zu verringern, damit Sie Ihre Bandbreite für ansprechende Aktivitäten mit den Benutzern nutzen können.

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