table oder flexbox ... oder grid?

[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?

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