Tabellen statt DIVs [Duplikat]
https://stackoverflow.com/questions/30251
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Mögliches Duplikat:
Warum nicht Tabellen für das Layout in HTML verwenden?
Unter welchen Bedingungen sollten Sie in der HTML-Codierung Tabellen anstelle von DIVs wählen?
Lösung
Die ganze Sache mit „Tables vs Divs“ verfehlt das Ziel nur knapp.Es ist nicht „table“ oder „div“.Es geht um die Verwendung von semantischem HTML.
Sogar der div-Tag spielt auf einer gut gestalteten Seite nur eine kleine Rolle.Überbeanspruchen Sie es nicht.Sie sollten nicht so viele benötigen, wenn Sie Ihr HTML richtig zusammengestellt haben.Dinge wie Listen, Feldsätze, Legenden, Beschriftungen, Absätze usw. können einen Großteil dessen ersetzen, wozu häufig ein Div oder Span verwendet wird.Div sollte hauptsächlich dann verwendet werden, wenn es sinnvoll ist, eine logische Angabe anzugeben divIsion und werden nur dann für zusätzliches Layout verwendet, wenn dies unbedingt erforderlich ist.Das Gleiche gilt für die Tabelle;Verwenden Sie es, wenn Sie tabellarische Daten haben, aber nicht anders.
Dann haben Sie eine semantischere Seite und benötigen nicht ganz so viele in Ihrem CSS definierte Klassen;Sie können die Tags stattdessen auch direkt als Targeting verwenden.Am wichtigsten ist möglicherweise, dass Sie eine Seite haben, die bei Google (anekdotisch) viel besser abschneidet als die entsprechende Tabelle oder div-lastige Seite.Vor allem wird es Ihnen dabei helfen, besser mit einem Teil Ihres Publikums in Kontakt zu treten.
Wenn wir also noch einmal zurückgehen und es im Hinblick auf Tabelle vs. Div betrachten, sind wir meiner Meinung nach tatsächlich an einem Punkt angelangt, an dem div überbeansprucht und Tabelle zu wenig genutzt wird.Warum?Denn wenn man genau darüber nachdenkt, fällt auf, dass viele Dinge, die in die Kategorie „Tabellendaten“ fallen, oft übersehen werden.Antworten und Kommentare zum Beispiel auf dieser Webseite.Sie bestehen aus mehreren Datensätzen mit jeweils demselben Feldsatz.Sie werden sogar in einer SQL-Server-Tabelle gespeichert, um laut zu schreien.Dies ist die genaue Definition von Tabellendaten.Das bedeutet, dass ein HTML-Tabellen-Tag absolut eine gute semantische Wahl wäre, um etwas wie die Beiträge hier auf Stack Overflow zu gestalten.Das gleiche Prinzip gilt auch für viele andere Dinge.Es ist vielleicht keine gute Idee, ein Tabellen-Tag zu verwenden, um ein dreispaltiges Layout einzurichten, aber es ist auf jeden Fall völlig in Ordnung, es für Raster und Listen zu verwenden ...außer natürlich, wenn Sie tatsächlich die Tags ol oder ul (Liste) verwenden können.
Andere Tipps
Wenn die Daten, die ich präsentiere, tatsächlich tabellarisch sind.
Ich finde es lächerlich, dass einige Webdesigner auf einigen Websites Divs für Tabellendaten verwendet haben.
Eine andere Verwendung, die ich dafür hätte, wären Formulare, insbesondere Etiketten:Textfeldpaare.Dies könnte technisch gesehen in div-Boxen erfolgen, aber es ist viel, viel einfacher, dies in Tabellen zu tun, und man kann argumentieren, dass label:textbox-Paare tatsächlich tabellarischer Natur sind.
Früher habe ich reines CSS gemacht, aber ich habe dieses Streben zugunsten des hybriden Tabellen-/CSS-Ansatzes als pragmatischsten Ansatz aufgegeben.Ironischerweise liegt es auch an der Zugänglichkeit.Haben Sie jemals versucht, CSS auf Sidekick zu verwenden?Was ein Alptraum!Haben Sie schon einmal gesehen, wie CSS-basierte Websites in neuen Browsern gerendert werden?Da sich Elemente überlappten oder einfach nicht richtig angezeigt wurden, musste ich das CSS deaktivieren.Haben Sie schon einmal versucht, die Größe von CSS-basierten Websites zu ändern?Sie sehen schrecklich aus und sind für Blinde oft schädlich, wenn sie die Zoomfunktionen im Browser nutzen!Wenn Sie das mit Tabellen machen, skalieren diese viel besser.Wenn Leute über Barrierefreiheit sprechen, stelle ich fest, dass viele keine Ahnung haben und es mich nervt, weil ich behindert bin und sie nicht.Haben sie wirklich mit Blinden gearbeitet?Der Taube?Wenn Barrierefreiheit ein Hauptanliegen ist, warum zum Teufel sind dann 99 % der Videos nicht mit Untertiteln versehen?Viele CSS-Puristen verwenden AJAX, sind sich jedoch nicht darüber im Klaren, dass Inhalte durch AJAX häufig unzugänglich sind.
Pragmatisch gesehen ist es in Ordnung, eine einzelne Tabelle als Hauptlayout zu verwenden, solange Sie die Informationen in einem logischen Fluss bereitstellen, wenn die Zellen gestapelt sind (etwas, das Sie auf Mobiltelefonen sehen würden).Die CSS-Theorie klingt großartig, aber teilweise im wirklichen Leben mit zu vielen Hacks umsetzbar, was den Idealen der „Reinheit“ widerspricht.
Seitdem ich den CSS-Ansatz mit Tabellen verwende, habe ich beim Entwerfen einer Website viel Zeit gespart und die Wartung ist viel einfacher.Weniger Hacks, intuitiver.Ich bekomme weniger Anrufe von Leuten, die sagen: "Ich habe eine DIV eingefügt und jetzt sieht alles durcheinander aus!" Noch wichtiger ist, absolut keine Zugänglichkeitsprobleme.
Normalerweise immer dann, wenn Sie die Tabelle nicht zum Bereitstellen eines Layouts verwenden.
Tabellen -> Daten
Divs -> Layout
(hauptsächlich)
Notiz:Als die Frage gestellt wurde, gab es praktische Gründe für die Verwendung von Tabellen für einige Layoutzwecke.Dies ist aufgrund von Browserverbesserungen nicht mehr erforderlich, daher habe ich die Antwort aktualisiert.
HTML <table>-Elemente sollten verwendet werden, wenn die Daten logisch eine zweidimensionale Struktur haben.Wenn die Daten in Zeilen und Spalten strukturiert werden können und Sie Überschriften sowohl auf Zeilen als auch auf Spalten sinnvoll anwenden können, dann haben Sie wahrscheinlich tabellarische Daten.
Wenn Sie nur über eine einzelne Zeile oder Spalte mit Daten verfügen, handelt es sich nicht um tabellarische Daten, sondern nur um linearen Inhalt.Sie benötigen mindestens zwei Zeilen und zwei Spalten, bevor es als Tabellendaten betrachtet werden kann.
Einige Beispiele:
Verwenden von Tabellen zum Platzieren von Seitenleisten und Seitenkopf-/-fußzeilen.Hierbei handelt es sich nicht um tabellarische Daten, sondern um ein Seitenlayout.Etwas wie CSS Grid oder Flexbox ist besser geeignet.
Verwendung von Tabellen für Kolumnen im Zeitungsstil.Dies sind keine tabellarischen Daten – Sie würden sie trotzdem linear lesen.Etwas wie CSS-Spalten ist angemessener.
Ich würde zwischen HTML für öffentliche Websites (Tabellen nein-nein-nein, Divs ja-ja-ja) und HTML für halböffentliche oder private Webanwendungen unterscheiden, bei denen ich Tabellen sogar für das Seitenlayout bevorzuge.
Die meisten der respektablen Gründe, warum „Tabellen schlecht sind“, sind normalerweise nur bei öffentlichen Websites ein Problem, bei Webanwendungen jedoch kein so großes Problem.Wenn ich mit einer TABLE das gleiche Layout und ein einheitlicheres Erscheinungsbild in allen Browsern erzielen kann als mit einem komplizierten CSS+DIV, dann genehmige ich normalerweise die TABLE.
Wie viele Poster bereits erwähnt haben, sollten Sie für die Anzeige tabellarischer Daten Tabellen verwenden.
Tabellen wurden eingeführt HTML 3.2 Hier ist der relevante Absatz aus der Spezifikation zu ihrer Verwendung:
[Tabellen] können zum Markieren von Tabellenmaterial oder für Layoutzwecke verwendet werden ...
Ich stimme Thomas zu – die allgemeine Faustregel lautet: Wenn es in einem Tabellenkalkulationsblatt Sinn macht, können Sie eine Tabelle verwenden.Sonst nicht.
Verwenden Sie einfach keine Tabellen als Layout für die Seite, das ist das Hauptproblem, das die Leute damit haben.
Ich kann das Argument für Tabellen für Formulare verstehen, aber es gibt eine schönere Alternative ...Sie müssen nur die Ärmel hochkrempeln und CSS lernen.
Zum Beispiel:
<fieldset>
<legend>New Blog Post</legend>
<label for="title">Title:</label>
<input type="text" name="title" />
<label for="body">Body:</label>
<textarea name="body" rows="6" cols="40">
</textarea>
</fieldset>
Sie können diesen HTML-Code verwenden und das Formular entweder mit Beschriftungen nebeneinander oder mit Beschriftungen über den Textfeldern anordnen (was einfacher ist).Die Flexibilität hilft wirklich.Es ist auch weniger HTML als das Tabellenäquivalent von beiden.
Einige hervorragende Beispiele für CSS-Formulare finden Sie in diesen hervorragenden Beispielen:
http://jeffhowden.com/code/css/forms/
http://www.sitepoint.com/article/fancy-form-design-css/
http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
Normalerweise entscheide ich mich für Tabellen, um formularartige Informationen (Vorname, Nachname, Adresse usw.) anzuzeigen, wobei es wichtig ist, Beschriftungen und Felder über mehrere Zeilen hinweg auszurichten.DIVs verwende ich für das Layout.
Natürlich ist die Tabelle in ein DIV eingepackt :)
Tabellen wurden für den tabellarischen Inhalt konzipiert, nicht für das Layout.
Fühlen Sie sich also nie schlecht, wenn Sie sie zum Anzeigen von Daten verwenden.
Ich verwende Tabellen in zwei Fällen:
1) Tabellarische Daten
2) Jedes Mal, wenn ich möchte, dass sich mein Layout dynamisch an seinen Inhalt anpasst
Wenn Ihre Daten in einem zweidimensionalen Raster angeordnet werden können, verwenden Sie <table>.Wenn es nicht geht, dann nicht.Benutzen <table> denn alles andere ist ein Hack (allerdings häufig keiner mit geeigneten Alternativen, insbesondere wenn es um die Kompatibilität mit älteren Browsern geht). Nicht verwenden <table> für etwas, das eindeutig eines sein sollte, ist genauso schlecht. <div> Und <span> sind nicht für alles;Tatsächlich sind sie auf semantischer Ebene völlig bedeutungslos und sollten unbedingt zugunsten semantischerer Alternativen vermieden werden.
Zu diesem Thema dachte ich Das Die Seite war ziemlich lustig.
1) Zur Anzeige tabellarischer Daten.Ein Kalender ist ein Beispiel für tabellarische Daten, die nicht immer auf den ersten Blick erkennbar sind.
2) Ich arbeite für ein medizinisches Abrechnungsunternehmen und fast das gesamte Layout unserer internen Arbeit wird mit CSS erstellt.Allerdings erhalten wir von Zeit zu Zeit Papierformulare von Versicherungsgesellschaften, die unsere Rechnungssteller verwenden müssen, und ein Programm konvertiert sie in ein HTML-Format, das sie über das Intranet ausfüllen und ausdrucken können.Um sicherzustellen, dass die Formulare akzeptiert werden, müssen sie der ursprünglichen Papierversion sehr genau entsprechen.Für diese ist es einfach, auf Tabellen zurückzugreifen.
Tabellen werden für tabellarische Daten verwendet.Wenn es sinnvoll ist, es in eine Tabelle einzufügen, verwenden Sie eine Tabelle.Andernfalls können Sie ein besseres Tag verwenden, z. B. div, span, ul usw.
Ich glaube nur tabellarische Inhalte.Zum Beispiel, wenn Sie eine Datenbanktabelle oder tabellenähnliche Daten in HTML ausgedruckt haben.
Wenn Sie semantisch korrektes HTML wünschen, sollten Sie Tabellen nur für tabellarische Daten verwenden.
Ansonsten verwenden Sie Tabellen für alles, was Sie wollen, aber es gibt wahrscheinlich eine Möglichkeit, dasselbe zu tun divs und CSS.
@Marius:
Handelt es sich bei dem Layout um tabellarische Daten?Nein, während es vor ein paar Jahren Standard war, ist es jetzt nicht mehr :-)
Eine andere Verwendung, die ich dafür hätte, wären Formulare, insbesondere Etiketten:Textfeldpaare.Dies könnte technisch gesehen in div-Boxen erfolgen, aber es ist viel, viel einfacher, dies in Tabellen zu tun, und man kann argumentieren, dass label:textbox-Paare tatsächlich tabellarischer Natur sind.
Ich neige dazu, der Beschriftung eine feste Breite zu geben oder sie in der Zeile darüber anzuzeigen.
@Jon Limjap
Zum Etikett:Textfeld, weder Divs noch Tabellen sind geeignet: <dl>s sind
Eine andere Verwendung, die ich für ITs hätte, wären Formulare, insbesondere Etikett:Textfeldpaare.Dies könnte technisch in Div -Boxen erfolgen, aber es ist viel einfacher, dies in Tabellen zu tun, und man kann argumentieren, dass Etikett: Textboxpaare tatsächlich tabellarisch sind.
Ich sehe das als ziemlich viel, insbesondere unter MS-Entwicklern.Und ich habe es in der Vergangenheit ziemlich oft getan.Es funktioniert, aber es ignoriert einige Zugänglichkeits- und Best-Practice-Faktoren.Sie sollten Beschriftungen, Eingaben, Feldsätze, Legenden und CSS verwenden, um Ihre Formulare zu gestalten.Warum?Denn dafür sind sie da, sie sind effizienter und ich denke, dass Zugänglichkeit wichtig ist.Aber das ist nur meine persönliche Präferenz.Ich denke, jeder sollte es zuerst so versuchen, bevor er es verurteilt.Es ist schnell, einfach und sauber.
Immer wenn eine Seite mit Tabellen von einem Browser geladen wird, dauert es länger, bis der Browser das Tag richtig darstellt.Im Vergleich zur Verwendung von div benötigt der Browser weniger Zeit, da er leichter ist.Und darüber hinaus können wir das CSS anwenden, um die Divs als Tabelle erscheinen zu lassen,
Die Tische sind normalerweise schwer und die einzelnen Tische sind leicht.
Es ist klar, dass die DIV für das Layout verwendet werden, aber aus folgenden Gründen wurde ich „gezwungen“, Tabellenkalkulationen zu verwenden, um ein Rasterlayout innerhalb einer Div-Struktur zu erstellen:
Das Hinzufügen von Prozentwerten ermöglichte keine ordnungsgemäße Ausrichtung auf die Div-Werte, während die gleichen, in Tabellenzellen ausgedrückten Werte das erwartete Ergebnis lieferten.
Daher denke ich, dass Tabellen nicht nur für Daten, sondern auch für die obige Situation immer noch nützlich sind. Darüber hinaus sind Tabellen immer noch W3C-kompatible Browser und alternative Browser (z. B. für Behinderte) interpretieren ihre Browser korrekt.
Divs sind einfach divisions, sie sind nicht dazu gedacht, Abschnitte der Seite zu gruppieren, die im semantischen Sinne verknüpft sind.Sie haben keine andere implizite Bedeutung als diese.
Ursprünglich waren Tabellen dazu gedacht, wissenschaftliche Daten, beispielsweise Laborergebnisse, auf dem Bildschirm anzuzeigen.Dave Raggett wollte sicherlich nicht, dass sie sich an die Implementierung von Layouts gewöhnen.
Wenn Sie sich an das oben Gesagte erinnern, bleibt es meiner Meinung nach recht klar im Kopf: Wenn es sich um etwas handelt, das Sie normalerweise in einer Tabelle lesen würden, dann ist das das richtige Tag. Wenn es sich um ein reines Layout handelt, verwenden Sie etwas anderes, um Ihre Anforderungen zu erfüllen.
