Warum sollen wir <table> nicht in einem Design verwenden?

41

Was sind einige klare und logische Gründe, warum wir keine Websites mit Tabellen entwerfen sollten? Wo liegen die Vorteile, was hat diese Idee in der Branche vorangetrieben? Wann ist es in Ordnung, einen Tisch zu benutzen?

html css website-design database Inkognito
quelle
Ausführlich diskutiert auf SO stackoverflow.com/questions/83073/…
Gabriele Petrioli
Google verwendet Tabellen selbst, beispielsweise innerhalb von AdWords. Mit Millionen von Werbetreibenden, die sich anmelden und mit dynamischen Daten arbeiten, ist es viel einfacher, um <table>ein CSS-Raster herum zu programmieren. Ich benutze datatables.net für ein paar Anwendungen und Sie können eine Liste derer sehen, die dieses JQuery-Plugin auf ihrer Site verwenden. Viele Websites verwenden immer noch Tabellen aus guten Gründen. Ich verwende allerdings nur Tabellen, wenn ich mit vielen dynamischen Daten arbeite, die nach Spalten, Seiten usw. sortiert werden müssen, aber nicht für Seitenlayouts, für die CSS gedacht ist.
Anagio

Antworten:

71

1) Tabellen sollten nicht für Seitenlayouts verwendet werden, da sie:

  • Langsam zu rendern, da der Browser den größten Teil - wenn nicht den gesamten - der Tabelle herunterladen muss, um sie richtig zu rendern

  • Sie erfordern mehr HTML als Nicht-Tabellen-Layouts, was langsameres Laden und Rendern sowie eine erhöhte Bandbreitennutzung bedeutet

  • Sie können ein Albtraum sein, da sie schnell komplex werden können

  • Sie können das Kopieren von Text unterbrechen

  • Sie wirken sich negativ auf Bildschirmleseprogramme aus und machen Ihren Inhalt möglicherweise für einige Benutzer unzugänglich

  • Sie sind nicht so flexibel wie die Verwendung eines geeigneten semantischen Markups

  • Sie sollten niemals für Seitenlayouts verwendet werden

  • Es ist sehr schwierig, Tabellen in ein ansprechendes Layout zu verwandeln

2) Verwenden Sie eine Tabelle für Tabellendaten. Dafür sind Tische da.

Siehe auch: Warum machen Leute Tabellen mit divs?

John Conde
quelle
1
Richtig, wenn ich also einen Abschnitt über Kontaktdetails habe, für den eine Tabelle in Ordnung ist, aber das grafische Layout einer Seite in DIVs oder so ähnlich ist. Ich habe gesehen, dass einige Designer sie in Bereichen mit Tabellendaten und DIVs gemeinsam vermeiden.
Inkognito
18
Designer, die Tabellen gänzlich meiden, wissen nicht, was sie tun. Sie haben falsch verstanden, was "keine Tabellen für Seitenlayouts verwenden" bedeutet.
John Conde
1
Es ist dumm, Tabellen ganz zu vermeiden, aber es gibt legitime Alternativen zu Tabellen für Kontaktinformationen. Eine Definitionsliste ist eine gute Alternative, insbesondere wenn ein hCard Umsetzung: cagintranet.com/archive/...
Majestätsbeleidigung
2
@Litso: Du solltest die eigenen Spezifikationen des W3C lesen, DLbevor du entscheidest, wofür es gut oder nicht gut ist.
Majestätsbeleidigung
1
Es gibt auch ein position: table-CSS-Tag zum Erstellen von tabellenbasierten Layouts, ohne sie in HTML zu platzieren. Es gibt einige Nischenfälle, in denen Tabellen immer noch die beste / einfachste Option für Layouts sind. Schauen Sie unter css-tricks.com/fluid-width-equal-height-columns nach, was ich meine.
Evan Plaice
8

Tabellen sind für tabellarische Daten, nicht für das Design. Menschen missverstehen oft die Motivation, Seiten "tableless" zu machen.

Es ist falsch, Tabellen zum Erstellen Ihres Layouts zu verwenden. Sie sollten andere Elemente für das Layout verwenden (Divs, Listen, Abschnitte, Artikel, Kopf- und Fußzeilen, Seiten usw.). Und Sie können großartige Effekte mit minimalem HTML / CSS erzielen (wodurch Ihr Code semantisch aussagekräftig, leicht und einfach zu warten ist).

Tabellendaten sollten sich natürlich in einem Tabellenelement befinden. Wenn Sie möchten, können Sie sogar die Semantik der Tabellen verbessern, indem Sie thead, tfoot, tbody, th, caption usw. hinzufügen. Alle diese Elemente sind für die Verwendung mit Tabellen vorgesehen, und glauben Sie mir, sie können Ihre Tabelle selbstbeschreibender machen .

Entscheiden Sie sich also nicht für tabellenbasiertes Design und verwenden Sie eine passende HTML / CSS-Lösung. Beginnen Sie mit dem semantischen HTML-Markup und bauen Sie das Design mit CSS auf. Dies sollte jeden beschützen. Verwenden Sie dies als Faustregel.

Dave
quelle
3

Tabellen sollen Daten und keine Gestaltungselemente enthalten.

sdadffdfd
quelle
3

Tabellen sollten nur bei der Anzeige von Tabellendaten verwendet werden. Ansonsten sind sie normalerweise eine schlechte Wahl für die Anzeige.

Chris Ballance
quelle
Warum die Gegenstimme?
Chris Ballance
0

Die eigentliche Ursache dafür, dass Tabellen nicht verwendet werden, ist:

Das Standardlayout einer Tabelle ist: table-layout:fixed

Dadurch wird der Browser angewiesen, die Tabelle zu analysieren und die Zellen so zu korrigieren, dass sie die darin enthaltenen Elemente enthalten, was einige Zeit in Anspruch nimmt. (deshalb sind Tabellen so gut für komplexe Daten)

Fazit: Die Tabelle wird gerendert, nachdem der gesamte Inhalt darin gerendert wurde, im Gegensatz zur Verwendung von beispielsweise DIV-Elementen.

YardenST
quelle
-3

Ich benutze Tabellen für Webdesign-Strukturen in flüssiger Mischung mit festen und ich weiß, dass viele sagen, dass Tabellen für Noobs sind, andere sagen, dass sie für Old-School-Leute sind, die immer sagen, dass DIVS die besten sind, aber die Wahrheit ist, dass Tabellen für etwas besser sind und DIVS für andere Sache.

Was ist besser ein <br>oder ein <p></p>? Das gleiche

Ich und meine alten Tische in meinem neuen Webdesign für 2015 können mit meinem freundlichen Handy mit einer Breite von 100% und zwei Seitenspalten mit jeweils 200 Pixel jedem den Garaus machen.

Offensichtlich ist es hässlich, in Tischen immer mehr Tische zu platzieren, da ist DIVS praktisch. Tabellen können Dinge tun, die Divs nicht können, und Divs können Dinge tun, die Tabellen nicht können.

Diejenigen, die sagen, dass das Standardtabellenlayout festgelegt ist? Ich gebe Ihnen ein Beispiel

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>

Sehen Sie jetzt das Potenzial? Schauen Sie sich das auf PC und Handy an. Ah ja und ich brauche nicht mal einen Bootstrap.

Um dasselbe mit divs zu tun, müssen Sie viel CSS-Code schreiben, um float und crap für die Ausrichtung anzuzeigen. Wer hat weniger Code geschrieben? Mich! Was brauchen Kunden? Ein Typ, der eine Seite in 1 Jahr oder in 1 Monat beendet?

Jetzt können wir das Design mit divs verbessern

<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>
<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>

So schön ist ein 5-Spalten-Layout mit Divs und Tabellen.

Ihre Antwort lautet: Beide zusammen arbeiten besser und sind schneller. Sie sehen auf jedem Design gut aus, auch auf Fernsehgeräten und kleinen Mobiltelefonen.

Rodrigo Santiaborg
quelle