Warum machen Leute Tische mit divs?

In der modernen Webentwicklung stoße ich immer öfter auf dieses Muster. Es sieht aus wie das:

<div class="table">
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</div>

Und in CSS gibt es so etwas wie:

.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }

^{* (Klassennamen dienen nur der Veranschaulichung; im wirklichen Leben sind dies normale Klassennamen, die widerspiegeln, worum es bei dem Element geht.)}

Ich habe es kürzlich sogar selbst versucht, weil ... weißt du, jeder macht es.

Aber ich verstehe es immer noch nicht. Warum machen wir das? Wenn Sie einen Tisch brauchen, dann machen Sie einfach eine Sprengung <table>und fertig. Ja, auch wenn es für das Layout ist. Dafür sind Tische da - Sachen tabellarisch auslegen.

Die beste Erklärung, die ich habe, ist, dass mittlerweile jeder das Mantra "Keine Tabellen für das Layout verwenden" gehört hat und es daher blind befolgt. Aber sie brauchen immer noch eine Tabelle für das Layout (weil nichts anderes die Erweiterungsmöglichkeiten einer Tabelle hat), also machen sie eine <div>(weil es keine Tabelle ist!) Und fügen dann CSS hinzu, das es sowieso zu einer Tabelle macht.

Für die ganze Welt scheint mir dies, als würde ich Ihnen willkürlich unnötige Hindernisse in den Weg stellen und dann zusätzliche Arbeit leisten, um diese zu umgehen.

Das ursprüngliche Argument für die Abkehr vom Tabellenlayout war, dass es schwierig ist, ein Tabellenlayout nachträglich zu ändern. Das Ändern eines "Faux-Table" -Layouts ist jedoch aus den gleichen Gründen genauso schwierig. Tatsächlich ist das Ändern eines Layouts in der Praxis immer schwierig und es reicht fast nie aus, nur das CSS zu ändern, wenn Sie etwas Ernsthafteres als geringfügige Änderungen vornehmen möchten. Sie werden verstehen müssen und HTML - Struktur für schwere Konstruktionsänderungen zu ändern. Und Tische machen die Arbeit nicht schwieriger oder einfacher als Divs.

In der Tat, ich die einzige Möglichkeit sehen , dass Tabellen ein Layout schwierig machen könnten zu ändern, ist , wenn Sie ab sie verwendet und erstellt ein gottlos Chaos. Das kannst du auch mit divs machen.

Also ... in dem Versuch, dies von einem Schimpfen in eine zusammenhängende Frage umzuwandeln: Was fehle ich? Was sind die tatsächlichen Vorteile der Verwendung eines "Faux-Tisches" gegenüber einem echten?

Über den doppelten Link: Dies ist kein Vorschlag, ein anderes Tag oder etwas anderes zu verwenden. Dies ist eine Frage über eine mit <table>vs display:table.

Dies ist ein gängiges Muster für die Erstellung von reaktionsschnellen Tabellen. Die Anzeige von Tabellendaten auf Mobiltelefonen ist schwierig, da die Seite entweder vergrößert wird, um Text zu lesen. Dies bedeutet, dass Tabellen nicht mehr auf der Seite angezeigt werden und der Benutzer vor- und zurückblättern muss, um die Tabelle zu lesen, oder die Seite wird verkleinert Dies bedeutet normalerweise, dass die Tabelle zu klein ist, um gelesen werden zu können.

Responsive Tabellen ändern das Layout auf kleineren Bildschirmen - manchmal sind einige Spalten ausgeblendet oder Spalten zusammengeführt, z. B. können Name und E-Mail-Adresse auf großen Bildschirmen getrennt sein, auf kleinen Bildschirmen jedoch in einer Zelle zusammengefasst werden, sodass die Informationen ohne Bildlauf lesbar sind.

<div>s werden aus <table>mehreren Gründen zum Erstellen von Tabellen anstelle von Tags verwendet. Wenn <table>Tags verwendet werden, müssen Sie die Standardstile und das Standardlayout des Browsers überschreiben, bevor Sie Ihren eigenen Code hinzufügen. In diesem Fall <div>sparen Tags also eine Menge CSS. Darüber hinaus können Sie in älteren IE-Versionen die Standardtabellenstile nicht überschreiben. Die Verwendung von <div>s glättet daher auch die browserübergreifende Entwicklung.

Es gibt einen ziemlich guten Überblick über reaktionsfähige Tabellen zu CSS-Tricks .

Bearbeiten: Ich sollte darauf hinweisen, dass ich dieses Muster nicht befürworte - es fällt in die Divitis-Falle und ist nicht semantisch -, aber aus diesem Grund finden Sie Tabellen aus divs.

Die Frage ist, ob die Daten semantisch eine Tabelle sind (dh ein Satz von Daten oder Informationseinheiten, die logisch in zwei Dimensionen organisiert sind) oder ob Sie das Raster nur für das visuelle Layout verwenden, z.

Wenn Ihre Informationen semantisch eine Tabelle sind, verwenden Sie ein <table>-Tag. Wenn Sie nur ein Raster für Layoutzwecke verwenden möchten, verwenden Sie einige andere geeignete HTML-Elemente und verwenden diese display:tableim Stylesheet.

Wann sind Daten semantisch eine Tabelle? Wenn die Daten logisch entlang zweier Achsen organisiert sind. Wenn es mit Überschriften für die Zeilen oder Spalten Sinn macht, haben Sie möglicherweise eine semantische Tabelle. Ein Beispiel für etwas, das keine semantische Tabelle ist, ist die Darstellung eines Textes in Spalten wie in einer Zeitung. Dies ist keine semantische Tabelle, da Sie sie immer noch linear lesen würden und keine Bedeutung verloren gehen würde, wenn die Präsentation entfernt würde.

OK, warum nicht <table>für alles anstatt nur für etwas, das semantisch eine Tabelle ist? Optisch ist es offensichtlich dasselbe (da das Tabellenelement nur display:elementim Standard-Stylesheet enthalten ist).

Der Unterschied besteht darin, dass die semantischen Informationen alternativen Benutzeragenten helfen können. Mit einem Screenreader können Sie beispielsweise in der Tabelle in zwei Dimensionen navigieren und die Überschriften für eine Zelle für beide Achsen lesen, wenn Sie vergessen, wo Sie sich befinden. Dies wäre nur verwirrend, wenn die Tabelle keine semantische Tabelle wäre, sondern nur für das visuelle Layout verwendet würde.

Die <table>Versus- display:tableDiskussion ist nur ein Fall des allgemeineren Prinzips der Verwendung von semantischem Markup. Siehe zum Beispiel: Warum sollte man sich die Mühe machen, richtig und semantisch zu markieren? oder Warum wird semantisches Markup für Suchmaschinen stärker gewichtet?

An einigen Stellen ist es möglicherweise gesetzlich vorgeschrieben, aus Gründen der Barrierefreiheit semantisches Markup zu verwenden. In keinem Fall gibt es einen Grund, Ihre Seite absichtlich weniger zugänglich zu machen.

Auch wenn Sie sich nicht um behinderte Benutzer kümmern, haben Sie Vorteile, wenn Sie die Präsentation von den Inhalten trennen. Zum Beispiel könnte Ihr dreispaltiges Layout auf einem Mobiltelefon mithilfe eines alternativen Stylesheets in einer einzelnen Spalte dargestellt werden.

Eigentlich würde ich sagen, dass die Verwendung von Klassennamen wie "table" in Ihrem Beispiel zeigt, dass die Leute nicht wirklich verstehen, was sie tun, wenn sie nach semantischem Markup suchen. Sie erhalten Noten für den Versuch, zu zeigen, dass es sich bei dem Inhalt nicht um Tabellendaten handelt , verlieren aber Noten für falsche Klassennamen.

<div class="table">
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

Dieser Entwickler hat lediglich das ursprüngliche <table>Markup mit CSS-Klassennamen repliziert . Das heißt, sobald dieses Layout keine Tabelle ist, sind die Klassennamen uneins.

Was dieser Entwickler hätte tun sollen, ist zu überlegen, welche Informationen in der Tabelle enthalten sind - handelt es sich um eine Miniaturansichtsgalerie? Na dann:

<div class="thumbnail-gallery">
  <div>
    <div class="thumbnail">
      <img src="" />
      <p>Some text</p>
    </div>
    <div class="thumbnail">
      <img src="" />
      <p>Some text</p>
    </div>
    <div class="thumbnail">
      <img src="" />
      <p>Some text</p>
    </div>
  </div>
</div>

Jetzt kann ich adaptives CSS erstellen:

@media screen {
  .thumbnail-gallery {
    display: table;
    border-collapse: collapse;
    width: 100%;
  }

  .thumbnail-gallery > div {
    display: table-row;
  }

  .thumbnail-gallery .thumbnail {
    display: table-cell;
    border: 1px solid #333333;
  }
}

@media screen and (max-width: 640px) {
  /** reset all thumbnail gallery elements to display as block and fill screen **/
  .thumbnail-gallery,
  .thumbnail-gallery > div,
  .thumbnail-gallery .thumbnail {
    display: block;
    width: 100%;
  }
}

Warum Divs und nicht Tabellen

Eine Tabelle enthält tabellarische Daten - die Darstellung einer Tabelle ist untrennbar mit der Struktur einer Tabelle verbunden. Tabellarische Daten müssen immer in tabellarischer Form vorliegen, unabhängig davon, wo Sie den Inhalt platzieren oder auf welchem ​​Bildschirm / Gerät er angezeigt werden soll.

Eine Miniaturansichtsgalerie (oder viele andere Dinge, wie ein Registrierungsformular, ein Menü und mehr) sind keine Tabellendaten. In einigen Entwurfslayouts wird es möglicherweise als Tabelle dargestellt, in anderen Fällen, z. B. bei schmalen Telefonbildschirmen, möchten Sie jedoch traditionellere Blocklayouts verwenden. Oder Sie möchten Miniaturansichten in einer Seitenleiste anstatt im Hauptinhaltsbereich anzeigen.

Sie haben nun die Wahl, unterschiedliche Markups für den Breitbildinhalt (Tabellen) und die Seitenleiste oder den Schmalbildinhalt (Divs) auszugeben. Dies bedeutet, dass Ihre serverseitigen Skripts wissen müssen, wohin der Inhalt verschoben wird, wenn Sie dies programmgesteuert erstellen - oder Sie lassen Ihr serverseitiges Skript dasselbe Markup ausgeben (da es egal sein sollte, wo Sie es ablegen) und verwenden unterschiedliche CSS-Regeln für die verschiedenen Situationen.

Dann haben Sie die Wahl, Tabellen immer auszugeben und dann die natürlichen Tabellenanzeigeregeln mit block zu überschreiben (was wirklich einiges in jedem Entwicklerkopf bewirken sollte), oder mit gut beschrifteten divs, die flexiblere Ansätze für das Styling ermöglichen.

Und seit einigen Jahren wird empfohlen, Tabellen zu vermeiden, wenn keine Tabellendaten angezeigt werden müssen.

In früheren Zeiten " erschien " die Tabellen-Rendering-Engine langsamer, als Sie Prozentsätze für Spaltenbreiten verwendeten. Die Engine musste im Wesentlichen den gesamten Datensatz herunterladen, bevor sie herausfinden konnte, wie groß alles war, um ihn auf dem Bildschirm zu zeichnen.

Die DIV-Engine war anders. Wenn der Browser auf ein DIV stieß, platzierte er es und füllte den Inhalt inline aus. Natürlich könnten Divs herumspringen, wenn die Daten geladen sind. Daher habe ich in Anführungszeichen oben erschienen. Der Zeitrahmen für die Fertigstellung von beiden war derselbe, jedoch wurden die Tabellen erst am Ende gezeichnet, was bedeutete, dass der Benutzer nicht sicher war, ob sie geladen wurden oder nicht für ein oder zwei Sekunden.

Dies wurde schlimmer, als die Tabellen verschachtelt waren.

Damals (und heute noch) gab es Möglichkeiten, das Rendern von Tabellen um ein Vielfaches zu beschleunigen. Wenn Sie ihm einen Hinweis geben, dass sich die Spaltengröße nicht ändert, rendert der Browser die Tabellendaten sofort. Letztendlich bedeutet dies, dass Tabellen tatsächlich schneller an der richtigen Position angezeigt werden können als Divs, wodurch sie den Anschein haben, besser zu sein.

Aber das ist nicht die ganze Geschichte. Der Rest ist, dass sich die meisten Entwickler einfach nicht die Mühe machen, ihr Handwerk gut genug zu lernen, um dies zu wissen. Stattdessen springen sie auf verschiedene Wagen und verwenden den Code, aus dem sie kopieren / einfügen können. Selbst heute kenne ich nur sehr wenige Webentwickler, die den Unterschied zwischen den verschiedenen Doctypen kennen - und das ist der Hauptgrund, warum verschiedene Websites alle möglichen Problemumgehungen für verschiedene Browser bieten.

Also, +1 an Sie, dass Sie die Frage gestellt haben.

Wenn ich hier ein wenig "Meta" bekommen kann, bringt dies zwei Probleme in meinen Sinn:

Erstens: Jemand schlägt aus gutem Grund eine Regel vor, und die Leute verfehlen den Punkt völlig, indem sie dem technischen Buchstaben der Regel folgen und dabei den Geist ignorieren. Sie finden einen Weg, um all die schlechten Dinge zu erreichen, die die Regel zu verhindern versuchte, während sie sich technisch immer noch an die formulierte Regel halten.

Zweitens: Jemand sieht ein Problem und schlägt eine Regel vor, um es zu verhindern. Andere sehen den Wert dieser Regel. Dann bestehen sie auf einer blinden Hingabe an diese Regel, ohne Rücksicht auf das ursprüngliche Problem, das sie lösen sollte, und / oder unabhängig davon, welche anderen Probleme sie verursachen. Ich habe viele Gespräche geführt, in denen jemand sagt: "Du musst X machen, weil das die Regel ist", und dann frage ich: "Aber warum sollen wir X machen?" Ich habe es dir gerade gesagt! Weil es die Regel ist! " Ich antworte: "Aber es scheint mehr Probleme zu verursachen, als es löst. Ich denke, wir wären besser dran, Y zu tun." Und dann sagt die Person: "Nein, schau, ich zeige es dir. Siehst du, es ist genau hier in diesem Buch. X ist die Regel."

In diesem Fall haben wir ein Problem: Das Tabellen-Tag hat zwei Funktionen: Zum einen steuert es das Layout eines Dokuments. Zweitens vermittelt es die Idee, dass die eingeschlossenen Daten aus Zeilen und Spalten von Zahlen oder anderen Daten bestehen.

So viele Leute schlugen die Lösung vor: Verwenden Sie keine Tabellen-Tags, um das Layout von Dingen zu steuern, die nicht logisch "Tabellen" sind. Verwenden Sie CSS.

Aber es gibt ein Problem mit dieser Lösung. Das Tabellen-Tag und seine Unter-Tags bieten viele sehr nützliche Layout-Funktionen, die mit CSS nicht einfach zu erreichen sind, und wenn sie erreicht werden können, ist der dafür erforderliche Code oft umständlich - schwer zu lesen und schwierig zu warten. Warum sollten wir ungeschickt und schwierig vorgehen, wenn es einen sauberen und einfachen Weg gibt?

Ich persönlich denke, wir wären besser dran gewesen, einfach zu erklären: "Die Tatsache, dass sich etwas in einem Tabellen-Tag befindet, bedeutet nicht unbedingt, dass es Reihen und Spalten von Zahlen darstellt." Dies wäre keine empörende Äußerung gewesen. Ich habe noch nie jemanden sagen hören, dass das "p" -Tag nur für Dinge verwendet werden kann, die wirklich Absätze von grammatisch korrekten, logisch aufgebauten englischen Sätzen sind. Ich habe noch nie jemanden sagen hören, dass es falsch ist, ein "ul" -Tag für eine Liste zu verwenden, die tatsächlich in einer logischen Reihenfolge vorkommt, nur weil Sie Aufzählungszeichen und keine Folgenummern wollten. Usw.

Hier gibt es bereits unzählige gute Antworten. Aber ich wollte hinzufügen, dass tableElemente Rendering-Einschränkungen haben, die für divElemente nicht existieren . Versuchen Sie, eine Tabelle zu erstellen , in der virtuell gescrollt wird (z. B. SlickGrid , DataTables und andere), und Sie werden zutiefst enttäuscht sein. Es funktioniert einfach nicht. Die meisten (All?) Modernen Javascript-Grids verwenden divs, da das CSS ein wesentlich flexibleres Rendering ermöglicht.

Es gibt auch andere Einschränkungen. Meine allgemeine Regel ist, dass ich ein tableElement verwende, wenn ich die gesamte Tabelle auf einem einzigen Bildschirm sehen will und nicht viel benutzerdefiniertes Rendering dafür haben möchte viel einfacher.

HTML und CSS haben ein gewisses Maß an Flexibilität entwickelt, sodass selbst konzeptionelle "Block" -Elemente wie <div>(die älteste und allgemeinste Form von Blockinhalten in HTML) nicht als Blöcke angezeigt werden müssen:

div { display: inline; }

Wie Sie bemerken, <div>kann zu emulieren <table>und seine Mitreisenden umfunktioniert werden. Eigentlich können die meisten Tags. Aufgrund ihrer besonderen Rollen, bezweifle ich Sie sinnvollerweise Makro - Tags neu zuordnen könnte wie <html>, <head>, <body>, und <script>, aber „gemeinsame“ Tags wie <div>, <p>, <b>, <em>, <span>, und <pre>? Zu gewinnen. Lassen Sie die Inline-Tags-Blöcke, die Blöcke inline, die vorformatierten Tags fließen und die stationären Tags schweben. Verrückt werden, wenn du magst!

Es ist möglich . Sie können ein Garn spinnen wollen , wie wir alle „semantisches Markup“ bla bla verwenden sollte blah , oder glauben , mit der Pythonistas , dass „es sein sollte - und vorzugsweise nur eine - offensichtlich so , wie es zu tun.“ Doch Tim Toady ist ein kluger und neugieriger Typ. Wenn er freie Hand hat, wird er sie alle erforschen. Dazu gehört auch die Nutzung der verfügbaren Flexibilität, um Substitutionen vorzunehmen. Einige sind weise, andere werden es beweisen. Aber Versuch, Irrtum und Erfahrung sind der einzige Weg, das herauszufinden. Somit liegen die ausreichenden Substitutionsbedingungen vor.

Ich denke nicht, dass es übertrieben ist zu sagen, dass eine Substitution auch notwendig ist. Zumindest ist es sehr praktisch . Für eine lange Zeit, HTML hat nicht <menu>, <section>oder <aside>Elemente. Webseiten und Apps haben jedoch überall Menüs, Abschnitte und Seitenleisten. Wie? Da HTML - Listenelemente ( <ul>, <ol>und <li>) wurden leicht zweckentfremdet und einige Verwendungen neu klassifiziert als Menü Container und Teile. <div>steht in könnte <article>, <section>, <aside>, <figure>, und <summary>. HTML5 hat einige bisher nicht behandelte Anwendungsfälle eingeholt und maßgeschneiderte Elemente hinzugefügt. Es ist ein großartiges Update und eine großartige Korrektur für den alltäglichen Gebrauch in der Praxis.

Trotzdem gibt es viele gebräuchliche Redewendungen, die keine maßgeschneiderten Tags oder semantischen Modelle haben . Dinge wie Seiten, Fußnoten, Pull-Quotes, Kommentar-Streams, zugehörige Avatare, "Likes", Untertitel und Untertitel, die ich und viele andere täglich verwenden. Was sollen wir tun? Was wir können. Setzen Sie "nahe aber ungenaue" Elemente mit Klassen und IDs neu ein, um unsere Arbeit für die nächsten fünf oder zehn oder jedoch viele Jahre zu unterstützen, bis HTML6 oder HTML7 aufholt. HTML / CSS's "Ja, es ist theoretisch ein X, aber wir werden es markieren und mit ihm als Y arbeiten" ist unglaublich praktisch. Wirklich unverzichtbar. Es macht Web-Inhalte flexibel und nicht spröde.

Noch weiter gehend , hat "semantisches Markup" irreduzible Grenzen . Das gilt für jede Art rigoroser Struktur, die Sie sich für den Inhalt vorstellen können.

Standardformate können nicht den gesamten Reichtum menschlicher Bedürfnisse, Wünsche und Abwechslung umfassen. Sie werden immer "hinter der Kurve" dessen sein, was die Leute jetzt tun . Wie sie innovativ sind. Heck, HTML5 ist immer noch hinter der Kurve in Fußnoten, Untertiteln und anderen Druckinnovationen des 17. Jahrhunderts. Es fehlen Funktionen, die für viele Information Worker und Ersteller von Inhalten von wesentlicher Bedeutung sind. Also improvisieren wir.

Noch unveränderlicher ist, dass Informationen sich nicht an ein Regelwerk halten. Sicher, es beginnt als Tisch. Aber vielleicht möchten Sie nur die Zusammenfassung - sagen Sie den Titel für jede Zeile als Liste. Vielleicht nimmt es zu viel Platz ein und Sie möchten es als platzsparende Inline-Liste. Möglicherweise haben Sie Datensätze, für die Sie nur den Titel möchten. Wenn Sie dann auf klicken, werden die zugrunde liegenden Details angezeigt. Oder Sie möchten, dass Elemente in einer komplexen Liste oder Tabelle gruppiert und kategorisiert werden. Oh, jetzt möchten Sie, dass es auf eine andere Weise umgesetzt und kategorisiert wird. Oder die Werte als Balkendiagramm. Dies sind Dinge, die jeden Tag in Apps, Tabellenkalkulationen und Datenvisualisierungen erledigt werden. Sie sind Teil unserer Informationslandschaft und das, was wir im Web tun wollen und müssen. Der Mensch ordnet die Form und Darstellung unserer Daten ständig neu. Es ist nicht nur eine Sache oder ein Format / Layout, oder ein Konzept. Es ist fungibel, wobei die Semantik von den Umständen und den Entscheidungen abhängt, die Benutzer interaktiv treffen. Ja, Text als "hervorgehoben" markieren (<em>), aber das ist nur eine Konvention. Ich habe an Dokumenten mit mindestens einem halben Dutzend verschiedener Arten von "Hervorhebungen" gearbeitet. Wir müssen in der Lage sein, das für unterschiedliche Verwendungen und unterschiedliche Interpretationen anzupassen und neu zuzuordnen. Eine Art von HTML-Betonung? Entsetzlich reduktionistisch. Begrenzen. Spröde. Das gleiche gilt für <table>, <p>usw.

Es ist großartig, Tags / Elemente zu haben, mit denen die gesamte Community darüber nachdenken kann, was wohin geht. Das hilft, Konventionen und Redewendungen zu etablieren und macht uns kollektiv effizienter. Aber die Fähigkeit, Dinge umzugestalten, diese Strukturen neu zu benennen und zu nutzen? Das ist ein wesentlicher Bestandteil der Inklusivität und des Erfolgs des Webs.

Use Cases Materie. Es gibt einen großen Unterschied zwischen Layout / Präsentation in einer Inhaltsseite und in einer Anwendung. Inhaltlich spielt Semantik eine große Rolle für das SEO-Bewusstsein und die Benutzerfreundlichkeit. In diesen Fällen ist es im Allgemeinen richtig, Tabellen zur Darstellung von Tabellendaten zu verwenden. Wie andere angemerkt haben, werden Suchmaschinen Sie bestrafen und Sie können sogar gegen die Usability-Gesetze verstoßen, wenn Sie gesetzlich dazu verpflichtet sind, die Usability-Richtlinien der Regierung einzuhalten.

In einer Webanwendung können Entwickler völlig getrennte Ansichten für SEO- und Usability-Zwecke erstellen. Responsive Design hat dazu geführt, dass Benutzer Ansichten erstellen, die mit Desktop- und mobilen Layouts umgehen können, und Divs sind in diesen Anwendungsfällen besser als Tabellen.

Nehmen wir zum Beispiel E-Commerce-Sites. Das Anzeigen einer Liste von Produkten in einem Durchsuchungs- oder Suchergebnis zeigt im Allgemeinen eine Liste von Produkten in tabellarischem Format an. Diese Ansichten können jedoch auch mithilfe von Divs (die allgemeinere und flexiblere Layout- und Stiloptionen bieten) anstelle von Tabellen generiert werden. Amazon und eBay sind gute Beispiele für diesen Ansatz. Untersuchen Sie ein Suchergebnis auf einer der beiden Websites, und Sie werden eine tief verschachtelte Gruppe von Divs sehen.