Warum werden beim Seitenmarkup so viele HTML-Tabellen verwendet?

8

Ich versuche, in die Webentwicklung einzusteigen, also habe ich angefangen, HTML, CSS und Javascript zu lernen. Ich komme mit Javascript sehr gut zurecht, kann aber mit HTML und CSS immer noch nichts machen, um mein Leben zu retten. Ich wollte nach einigen Stellen oder Tipps fragen, um mich zu verbessern, aber ich weiß, dass die Frage unzählige Male gestellt wurde und einfach gelöscht wurde, also dachte ich mir, ich würde nur die Quelle der Websites anderer Leute anzeigen.

Was ich immer wieder sehe, sind Tabellen links und rechts. Gibt es einen gültigen Grund für die Verwendung von Tabellen?

html mowwwalker
quelle
giveupandusetables.com
MSalters
Ein guter Grund könnte sein, dass Sie in einem Team sind, das wirklich scheiße ist, aber jeder mehr politische Macht hat als Sie und alle wirklich paranoid gegenüber neuen Ideen sind, die erklären würden, warum sie das bevorzugte Layoutschema von 1998 bevorzugen.
Erik Reppen

Antworten:

16

Tabellarische Daten auslegen.

Hier sind einige Fragen , die Sie sich stellen sollten, wenn Sie zwischen Tabellen und CSS-Containern wählen.

Tabellen sind für Tabellendaten. Zeitraum.

Das <table>Etikett ist nicht böse. Ungeachtet dessen, was manche Leute denken und sagen, geht es bei CSS nicht darum, es niemals zu verwenden. Eine Folge des Prinzips des semantischen HTML ist jedoch, dass Sie niemals Tabellen für das Layout verwenden sollten . Lassen Sie mich das noch einmal als eigenen Absatz zur Hervorhebung sagen:

Verwenden Sie niemals Tabellen für das Layout. Je.

Wenn Sie sich nicht entscheiden können, ob ein Tisch die richtige Wahl ist oder nicht, stellen Sie sich folgende Fragen:

  • "Haben die Zeilen oder Spalten mit Informationen ein gemeinsames Attribut?"
  • "Wenn ich die Reihenfolge der Zeilen oder Spalten ändern würde, wäre das trotzdem sinnvoll?"
  • "Wenn ich die Achsen der Tabelle transponieren würde (Zeilen in Spalten umwandeln und umgekehrt), wäre das immer noch sinnvoll?"

Wenn die Antwort auf das oben Gesagte im Allgemeinen "Hrm ... ich denke nicht" lautet, sollten Sie keine Tabelle verwenden.

Weitere Informationen finden Sie unter "Warum Tabellen im Vergleich zu semantischem HTML + CSS schlecht sind (für Layout)" .

Demian Brecht
quelle
2
@WeekendWarrior: Ich bin mir nicht sicher, ob ich damit einverstanden bin. Warum um alles in der Welt sollte ich eine CSS-Lösung hacken, um eine tabellarische nSpalte nach nZeilenraster anzuzeigen , z. B. Statistiken in einem NFL-Spiel? Das ist genau das, wo Tabellen sollten verwendet werden. Vielleicht wird das CSS-Grid-Layout es irgendwann ersetzen (sobald es browserübergreifend unterstützt wird, zumindest für einige Versionen von jedem), aber es ist noch nicht da.
Demian Brecht
@ Demian Er sagte "Tabellen für Layout". Ich bin mir ziemlich sicher, dass er keine tabellarischen Daten aufnehmen wollte.
Rein Henrichs
Wäre eine Tabelle beispielsweise für ein Libretto einer nebeneinander angeordneten Übersetzungsoper geeignet [mit einer Tabellenzeile pro Zeile]? So etwas wäre nicht gerade "tabellarische Daten", aber die Verwendung einer Tabelle würde die Zuordnung zwischen Zeilen in der Originalsprache und Übersetzung beibehalten, selbst wenn der Text so vergrößert wäre, dass einige Zeilen umbrochen werden.
Supercat
9

Angenommen, Sie meinen Tabellen, die als Seitenlayout und nicht nur für Tabellendaten verwendet werden ...

Sie sehen Tabellen, weil die Verwendung von CSS frustrierend ist (zugegebenermaßen weniger als vor einigen Jahren). Irgendwann muss man die Arbeit erledigen. Um es mit CSS "richtig" zu machen, ist endloses Aufhebens und Experimentieren erforderlich. Tische hingegen können intuitiv erfasst werden.

Wenn Sie es richtig machen möchten (indem Sie CSS verwenden) und Ihr Leben nicht mit CSS verschwenden möchten, besteht der beste Kompromiss darin, sich auf ein paar verschiedene Layouts zu einigen und CSS von Vorlagenwebsites zu entfernen. Verwenden Sie die Vorlagen als Ausgangspunkt. Mit CSS von vorne anfangen ist ein Rezept für Frustration.

Angelo
quelle
4
+1 für "Arbeit erledigen". Ich bin ein Entwickler, kein UI-Designer. Ich kann zwar eine funktionale, etwas attraktive Benutzeroberfläche entwerfen, aber es wird VIEL länger dauern als bei einem UI-Designer. Was würde ich für einen Mann in meinem Team geben, der gerade die Vorlagen und Stile entworfen hat, damit ich mir darüber keine Sorgen machen muss?
AJC
1
Ich kann nicht umhin denken , dass CSS könnte so gewesen viel einfacher. IMHO hat diese unnötige Komplexität und das Fehlen einer "pixelgenauen" Referenzimplementierung zu schlechten / inkonsistenten Implementierungen durch Browseranbieter geführt, was dazu geführt hat, dass eine ganze Generation von Webentwicklern "es nicht verstanden" hat.
Angelo
1
Früher gab es "Interpretationen" des Boxmodells, bei denen die Tabellen der einzige Weg waren. Beispielsweise konnte das FORM-Element nicht formatiert werden, es wurde jedoch im IE eine Box (mit Standardrand / Auffüllung) generiert. Der einzige Weg, um den zusätzlichen Platz loszuwerden, bestand darin, FORM zwischen TABLE und TR zu drücken. Völlig gegen den Standard, aber der einzige Weg, der funktioniert hat.
SF.
@ Angelo: Das Problem war nicht nur, dass CSS "frustrierend" war; Es war historisch unfähig, viele Dinge zu tun, die mit Tischen ziemlich einfach waren. Etwas Einfaches wie ein Haupttext-plus-Seitenleisten-Layout, bei dem die Seitenleiste 10% der verfügbaren Breite, aber mindestens 140 Pixel breit (die Breite einer bestimmten Logo-Grafik) beträgt, ist mit einer Tabelle [IIRC, set die Tabellenbreite auf 100% setzen, die Breite der Hauptspalte nicht angeben und die Breite der Seitenleistenspalte auf 10% einstellen; Die Spaltenbreite würde bei Bedarf über 10% liegen, um eine 140px-Grafik aufzunehmen]). Wann könnte CSS das zum ersten Mal tun?
Supercat
8

Tabellenbasierte Layouts sind in gewisser Weise einfacher zu erlernen als reine CSS-Layouts für Benutzer, die gerade erst anfangen, HTML zu lernen. Früher konnte man CSS nicht zuverlässig verwenden und es in allen Browsern verwenden. So verwendeten praktisch alle HTML-Tutorials bis etwa 2000 Tabellen ausschließlich für Layouts. Ein Großteil dieses HTML-Codes wurde an andere Websites weitergegeben (über View Source), und viele Leute haben aus diesen Tutorials gelernt und sich nicht die Mühe gemacht, CSS-Layouts zu lernen.

Ich biete mich an, hier geflammt zu werden und zu sagen, dass es Ihnen gut geht, wenn Sie Ihre Layouts in Tabellen erstellen, bevor Sie CSS lernen. Die Unterschiede beim Anfänger sind bestenfalls gering. Sie werden in beiden Fällen erst dann wirklich komplizierte Layouts erstellen können, wenn Sie ein oder zwei Jahre Erfahrung haben. Es gibt also keinen großen Unterschied. Beginnen Sie mit den Tabellen, um ein paar Dinge auf den Bildschirm zu bringen und Ihr Interesse aufrechtzuerhalten, und lesen Sie langsam weiter über CSS (das auf lange Sicht eindeutig überlegen ist). Ich war damals ein CSS-Zelot, als ich mit Webstandards entwarf, aber das lag nur daran, dass es Spaß machte, selbstbewusst und überlegen zu sein.

Graham
quelle
6
Ich bin anderer Meinung, obwohl ich dich nicht entflammen werde. Das Layout mit Tabellen zu lernen ist nicht unbedingt einfacher (es war nichts für mich). Noch wichtiger ist, dass der Übergang vom "Tabellen-Weg" zum CSS-Weg schwieriger ist, als ihn gleich beim ersten Mal richtig zu lernen.
MattBelanger
1

Browser sind das Problem. Trotz der Best Practices und der Zustimmung aller war es einfach zu schwierig, Websites in Browsern ohne Tabellen durchgehend gut aussehen zu lassen, obwohl sie falsch codiert waren. Es hat mit Semantik zu tun. Das ist das Wichtigste, was man mit HTML lernen kann, ist die semantische Bedeutung von Tags. Der beste Ort, um dies zu lernen, sind die ersten fünf Videos, die Educator.com in seinen HTML-Videos hat. Sie werden alle mit Blick auf HTML5 erstellt und erklären, was Semantik ist und warum sie wichtig ist.

Phillip James
quelle
Ich habe vergessen zu erwähnen, Browser haben aufgeholt. Niemand verwendet mehr IE6, daher sind Tabellen jetzt mehr ein Problem als ihr Wert. Es ist tatsächlich einfacher, die Dinge jetzt richtig zu machen. Vergessen Sie also Tabellen, es sei denn, Sie arbeiten mit "tabellarischen Daten". Sehen Sie sich das Video an, das ich erwähnt habe, wenn Sie nicht verstehen, was ich unter "tabellarischen Daten" verstehe.
Phillip James
Leider gibt es in der Unternehmens- und Gesundheitswelt überraschend viele Menschen, die IE6
CdMnky
Das "Wichtigste, was man mit HTML lernen kann" ist etwas subjektiv. Ich bin in der Welt der Webapp-Entwicklung, daher ist die HTML-Semantik für mich größtenteils ziemlich bedeutungslos. Nicht so, wenn ich Websites erstellte, die SEO-Funktionen benötigten.
Graham