Flexbox + div = Eierlegende Wollmilchsau?

Ich würde gerne mal eine Grundsatzdiskussion los treten. Dazu ein einfaches Beispiel: Ihr sollt in einer Tabelle Daten darstellen. Würdet ihr das mittels table-tag + css bauen oder mithilfe von divs und flex-layout. (oder gar etwas komplett anderes)

Ich habs gerade gemacht und bin von der table-variante zu den divs übergegangen. Gefällt mir irgendwie besser :thinking:.

Tatsächlich überlege ich, ob ich solche tags wie table, ul, … überhaupt noch brauche. Kann ich ja alles (angenehmer/flexibler) mittels div+flex bauen.

Wie seht ihr das?

Table-Tags, ansonsten ist das keine Tabelle sondern nur ein Haufen Boxen die in der Darstellung zufällig wie eine Tabelle angeordnet sind.
Wobei mich jetzt schon interessieren würde wie sich Flexbox verhält wenn man die Größenparameter der Parent-Container oder Zelleninhalte verändert. Könnte mir gut vorstellen dass sich dadurch eine “nicht-Tabellen”-Darstellung provozieren liese.

Ich sag es mal aus meiner Sicht: Vor einem Monat musste ich Daten programmatisch mit einem Webseiten-Crawler auswerten. Die verschiedenen Provider hatten ihre Daten in unterschiedlichen Formaten auf ihren Servern angeboten wie

  • HTML Table-Tags
  • XML + Schema
  • PDFs

Die Table Tags auszuwerten war eine Sache von Minuten. Flexbox würde ich eher wieder in Richtung PDF zuordnen was das angeht.

Wenn es Daten sind, dann mit dem Table-Tag. Es gibt nicht nur Leute, die mit einem “Browser” auf eine Seite zugreifen, sondern auch Eingeschränkte die zum Beispiel einen Screenreader verwenden. Die tun sich damit wohl leichter.

Ansonsten gibt es nicht nur display: flex; sondern auch display: table; und display: grid; welche ebenfalls geeignet sind Tabellen darzustellen.

2 „Gefällt mir“

Definitiv mit Flexbox, außer der Kram INNERHALB deiner Table-Cells ist sehr primitiv / “reine Daten”. Sobald du aber komplexe, tiefe, dynamische Inhalte in deine Cells packen willst, nimm um Gottes Willen kein Table Tag / display: table, dann dafür ist es nicht gedacht und es wird dir dann auch Probleme machen.

Sprich: display:table für echte Tabellen, aber eben nicht falls du nur die Eigenschaften vom Tabellen-Layout-Verhalten für ein Layout benutzen willst, dass mehr beinhaltet als nur eine Tabelle eben.

Ich bin nun nicht der CSS-Experte, aber für mich hört sich CSS-Grid einfacher und breiter einsetzbar an als Flexbox (wobei man beides auch kombinieren kann).

Ja, Grid hab ich noch nicht ausprobiert, aber das sollte noch idealer sein, um alte Table Layout Hacks zu ersetzen. (Es ist aber zumindest möglich Flexbox auch so kofigurieren, dass es sich nicht mehr “flexibel” am Inhalt orientiert und damit etwas Table-ähnliches bauen)

Bin da nicht ganz so der Meinung. Table-Element und display-Table sollte man differenziert betrachten.

Das Table-Element sorgt dafür, dass eben egal wo (4K oder Smart-Phone) immer eine Tabelle dargestellt wird, auch ohne CSS. Ein grosses Problem ist eben, dass Table-Element wenn für das Layout verwendet, das Markup verhunzt. Aber für Daten ist das immer noch das Nonplusultra.

display-Table ist css. Eine Media-Query und man kann auf ein anderes Layout switchen. Es findet sich nicht im Markup wieder. Man hat damit die Möglichkeit das table-Element das für das Layout missverwendet wurde nahezu eins zu eins ersetzen. Oder wenn man table-Layouts gewöhnt ist damit arbeiten.

display-grid hatte anfangs noch ein wenig das Problem, mit der Unterstützung in allen Browsern. Aber https://caniuse.com/#search=grid sieht recht gut aus.