table oder flexbox ... oder grid?

[borisbaer]

Hallo,

ich bin mir unsicher, ob ich für einen bestimmten Inhalt (siehe problematische Seite) besser table oder flexbox verwenden soll.

Prinzipiell kann ich diesen Inhalt, denke ich, auch gut über eine klassische table darstellen, doch ich weiß nicht, ob das irgendwann womöglich backfired, wenn es um responsiveness geht (obwohl die Tabelle momentan eine feste Breite hat). Im Web finden sich widersprüchliche Aussagen zu table, flexbox und grid (von Letzterem habe ich am wenigsten Ahnung).

Mit flexbox bin ich bisher sehr gut gefahren, würde ich sagen. Ich persönlich sehe nicht wirklich, warum es klüger wäre, darauf zu verzichten, aber ich bin auch kein Experte. Dieser Artikel zu ARIA roles sagt, man solle lieber direkt <table> verwenden statt z.B. <div role="table">, was aber irgendwie automatisch ausschließt, flexbox oder grid für klassische Tabellen zu verwenden.

Mich würde eure Sicht interessieren. Vielen Dank schon mal!

[Rolf B]

Hallo borisbaer,

Das ist doch ganz einfach. Sind das tabellarische Daten? Dann ist table vermutlich richtig. Vielleicht auch eine Liste. Gunnar hat schon mal gezeigt wie man Tabellen responsiv macht. Da geht einiges.

Geht es dir um das Seitenlayout? Dann ist flexbox oder grid vermutlich richtig. Oder was ganz anderes.

Rolf

[Gunnar Bittersmann]

@@borisbaer

ich bin mir unsicher, ob ich für einen bestimmten Inhalt (siehe problematische Seite) besser table oder flexbox verwenden soll.

Du fragst, ob du die Wand besser aus Rigips bauen oder rot streichen sollst.

Dieser Artikel zu ARIA roles sagt, man solle lieber direkt <table> verwenden statt z.B. <div role="table">.

Ja, du verletzt die erste Direktive.

Prinzipiell kann ich diesen Inhalt, denke ich, auch gut über eine klassische table darstellen

Ja. Für tabellarische Daten die entsprechenden HTML-Elemente: table, tbody usw. Wobei die jeweils ersten Zellen in jeder Tabellenzeile als th (Kopfzellen) auszuzeichnen sind.
☞ Beispiel: table

doch ich weiß nicht, ob das irgendwann womöglich backfired

Ob das was tut?

wenn es um responsiveness geht

Man kann tabellarische Daten auf kleinen Viewports auch anders darstellen.
☞ Beispiel: responsive table with custom properties

(Ob das sinnvoll ist, hängt vom Anwendungsfall ab. In manchen Fällen kann es besser sein, die Tabelle aus dem Viewport herausragen zu lassen und horizontal scrollbar zu machen.)

In deinem Fall bietet sich auch die Auszeichnung als Beschreibungsliste dl an, die du mit verschiedenen Techniken layouten kannst.

table, flexbox und grid

Du sagst es.
☞ Beispiel: description list, display: table
☞ Beispiel: description list, display: flex
☞ Beispiel: description list, display: grid

Wobei Grid wohl am besten geeignet ist. Bei den anderen Varianten dürfte es schwierig werden, bei mehreren td zu einem th diese untereinander zu bekommen.

(von Letzterem habe ich am wenigsten Ahnung).

Da hab ich eine gute Nachricht für dich: Grid ist einfach. Und Vasilis bestätigt das.

Und wie’s der Zufall so will hab ich für morgen einen firmeninternen Vortrag zu CSS Grid geplant. Mal sehen, ob ein Video dabei rausspringt, das ich veröffentlichen kann.

Mit flexbox bin ich bisher sehr gut gefahren, würde ich sagen. Ich persönlich sehe nicht wirklich, warum es klüger wäre, darauf zu verzichten

Es ist jedenfalls gar nicht klug, eine Tabelle mit div nachzubauen anstatt den im Browser implementierten Tabellenlayout-Algorithmus seine Arbeit tun zu lassen.

was aber irgendwie automatisch ausschließt, flexbox oder grid für klassische Tabellen zu verwenden.

Nein, das tut es nicht. Aber warum sollte man das wollen?

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Und wie’s der Zufall so will hab ich für morgen einen firmeninternen Vortrag zu CSS Grid geplant. Mal sehen, ob ein Video dabei rausspringt, das ich veröffentlichen kann.

Hat sich um ’ne Woche verschoben. Und aus dem Vortrag ist zwischendurch immer mal wieder eine Diskussionsrunde geworden. Das werde ich wohl nicht rausgeschnitten bekommen; wird also vermutlich nichts mit Video.

Aber die Folien und Links zu Beispielen gibt’s zu sehen: Grid to the Future, Part II.

Teil I lief schon vor ein paar Jahren.

🖖 Живіть довго і процвітайте

[borisbaer]

@@Gunnar Bittersmann

Und wie’s der Zufall so will hab ich für morgen einen firmeninternen Vortrag zu CSS Grid geplant. Mal sehen, ob ein Video dabei rausspringt, das ich veröffentlichen kann.

Hat sich um ’ne Woche verschoben. Und aus dem Vortrag ist zwischendurch immer mal wieder eine Diskussionsrunde geworden. Das werde ich wohl nicht rausgeschnitten bekommen; wird also vermutlich nichts mit Video.

Aber die Folien und Links zu Beispielen gibt’s zu sehen: Grid to the Future, Part II.

Teil I lief schon vor ein paar Jahren.

🖖 Живіть довго і процвітайте

Hallo Gunnar,

ich danke dir sehr für die Links zu den Folien deiner Präsentationen. Ist für mich als Laie zum Teil jedoch schwierig nachzuvollziehen ohne den eigentlichen Vortrag. Dennoch wurde einiges klarer.

Einige Fragen sind bei mir noch offen:

1. Wenn ich eine Tabelle mit JavaScript sortierbar machen möchte, brauche ich dann zwangsläufig grid oder flexbox?
2. Ist es heutzutage en vogue das Seitenlayout mit grid zu erstellen? Sollte z.B. der header in der mobilen Ansicht auf fixed umgestellt werden, schießt grid da quer?
3. In welchen Fällen ist grid flexbox vorzuziehen?
4. Wenn ich eine Tabelle mit Paginierung haben möchte (also dass nach bspw. 50 Einträgen eine zweite Seite erstellt wird, zu der man dann wechseln kann), spielt es da eine Rolle, ob ich sie mit table, flexbox oder grid kreiert habe? Oder ist das egal?

[Matthias Scharwies]

Servus!

@@Gunnar Bittersmann

Und wie’s der Zufall so will hab ich für morgen einen firmeninternen Vortrag zu CSS Grid geplant. Mal sehen, ob ein Video dabei rausspringt, das ich veröffentlichen kann.

Hat sich um ’ne Woche verschoben. Und aus dem Vortrag ist zwischendurch immer mal wieder eine Diskussionsrunde geworden. Das werde ich wohl nicht rausgeschnitten bekommen; wird also vermutlich nichts mit Video.

Aber die Folien und Links zu Beispielen gibt’s zu sehen: Grid to the Future, Part II.

Teil I lief schon vor ein paar Jahren.

🖖 Живіть довго і процвітайте

Hallo Gunnar,

ich danke dir sehr für die Links zu den Folien deiner Präsentationen. Ist für mich als Laie zum Teil jedoch schwierig nachzuvollziehen ohne den eigentlichen Vortrag. Dennoch wurde einiges klarer.

Einige Fragen sind bei mir noch offen:

1. Wenn ich eine Tabelle mit JavaScript sortierbar machen möchte, brauche ich dann zwangsläufig grid oder flexbox?

• HTML/Tabellen#Wann_sollte_man_eine_Tabelle_verwenden?

eine Tabelle, z.B. hier

• JavaScript/Tutorials/Tabellen_dynamisch_sortieren

2. Ist es heutzutage en vogue das Seitenlayout mit grid zu erstellen? Sollte z.B. der header in der mobilen Ansicht auf fixed umgestellt werden, schießt grid da quer?

• CSS/Tutorials/Grid/Grid-Items#feststehender_Footer

3. In welchen Fällen ist grid flexbox vorzuziehen?

• CSS/Tutorials/Grid/Einführung#Flexbox_oder_Grid_Layout

4. Wenn ich eine Tabelle mit Paginierung haben möchte (also dass nach bspw. 50 Einträgen eine zweite Seite erstellt wird, zu der man dann wechseln kann), spielt es da eine Rolle, ob ich sie mit table, flexbox oder grid kreiert habe?

Wenn es tabellarische Daten sind, siehe 1.

Oder ist das egal?

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@borisbaer

1. Wenn ich eine Tabelle mit JavaScript sortierbar machen möchte, brauche ich dann zwangsläufig grid oder flexbox?

Die Änderung der Sortierreihenfolge ändert ganau das: die Reihenfolge der Daten. Sie ändert weder Struktur noch Layout des Dokuments, hat also keinen Einfluss auf Markup und CSS.

2. Ist es heutzutage en vogue das Seitenlayout mit grid zu erstellen?

Kommt drauf an, wie das Seitenlayout aussieht. Aber ja, für viele Layouts dürfte Grid das geeignete Werkzeug zur Umsetzung sein.

Sollte z.B. der header in der mobilen Ansicht auf fixed umgestellt werden, schießt grid da quer?

Kommt drauf an, wie das Headerlayout aussieht. So wie auf Folie 19: gleich viel Abstand links und rechts des Logos? Dann Umsetzung mit Flexbox.

Oder so wie auf Folie 20: Logo zentriert? Dann Umsetzung mit Grid.

Siehe auch Folien 12 bis 15 des in den Ressourcen angegebenen Vortrags Creative CSS Layout & the Flexible Web von Michelle Barker.

3. In welchen Fällen ist grid flexbox vorzuziehen?

In allen, in denen es um ein zweidimensionales Raster geht.

Flexbox wirkt nur in eine Dimension. Nachfolgende Flexitems wissen nichts über die Anordnung ihrer Vorgänger, und dann kommt sowas raus wie auf Folie 14 gezeigt.

Grid hingegen ist 2D; alle Griditems auf Folie 15 haben dieselbe Größe.

Und außerdem in Fällen wie dem unter 2.

Ab Folie 38 widmet sich Michelle Barker dem Thema Flex or Grid?

4. Wenn ich eine Tabelle mit Paginierung haben möchte (also dass nach bspw. 50 Einträgen eine zweite Seite erstellt wird, zu der man dann wechseln kann), spielt es da eine Rolle, ob ich sie mit table, flexbox oder grid kreiert habe? Oder ist das egal?

Die Antwort fällt so aus wie die unter 1.

🖖 Живіть довго і процвітайте