table oder flexbox ... oder grid? – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self table oder flexbox ... oder grid? Wed, 08 Jun 22 19:58:44 Z https://forum.selfhtml.org/self/2022/jun/08/table-oder-flexbox-oder-grid/1799661#m1799661 https://forum.selfhtml.org/self/2022/jun/08/table-oder-flexbox-oder-grid/1799661#m1799661 <p>Hallo,</p> <p>ich bin mir unsicher, ob ich für einen bestimmten Inhalt (siehe problematische Seite) besser table oder flexbox verwenden soll.</p> <p>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).</p> <p>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. <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles" rel="nofollow noopener noreferrer">Dieser Artikel</a> zu ARIA roles sagt, man solle lieber direkt <code><table></code> verwenden statt z.B. <code><div role="table"></code>, was aber irgendwie automatisch ausschließt, flexbox oder grid für klassische Tabellen zu verwenden.</p> <p>Mich würde eure Sicht interessieren. Vielen Dank schon mal!</p> table oder flexbox ... oder grid? Wed, 08 Jun 22 20:21:37 Z https://forum.selfhtml.org/self/2022/jun/08/table-oder-flexbox-oder-grid/1799662#m1799662 https://forum.selfhtml.org/self/2022/jun/08/table-oder-flexbox-oder-grid/1799662#m1799662 <p>Hallo borisbaer,</p> <p>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.</p> <p>Geht es dir um das Seitenlayout? Dann ist flexbox oder grid vermutlich richtig. Oder was ganz anderes.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> table oder flexbox ... oder grid? Thu, 09 Jun 22 06:23:32 Z https://forum.selfhtml.org/self/2022/jun/08/table-oder-flexbox-oder-grid/1799668#m1799668 https://forum.selfhtml.org/self/2022/jun/08/table-oder-flexbox-oder-grid/1799668#m1799668 <p>@@borisbaer</p> <blockquote> <p>ich bin mir unsicher, ob ich für einen bestimmten Inhalt (siehe problematische Seite) besser table oder flexbox verwenden soll.</p> </blockquote> <p>Du fragst, ob du die Wand besser aus Rigips bauen oder rot streichen sollst.</p> <blockquote> <p><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles" rel="nofollow noopener noreferrer">Dieser Artikel</a> zu ARIA roles sagt, man solle lieber direkt <code><table></code> verwenden statt z.B. <code><div role="table"></code>.</p> </blockquote> <p>Ja, du verletzt die <a href="https://www.w3.org/TR/using-aria/#firstrule" rel="nofollow noopener noreferrer">erste Direktive</a>.</p> <blockquote> <p>Prinzipiell kann ich diesen Inhalt, denke ich, auch gut über eine klassische table darstellen</p> </blockquote> <p>Ja. Für tabellarische Daten die entsprechenden HTML-Elemente: <code>table</code>, <code>tbody</code> usw. Wobei die jeweils ersten Zellen in jeder Tabellenzeile als <code>th</code> (Kopfzellen) auszuzeichnen sind.<br> ☞ Beispiel: <a href="https://codepen.io/gunnarbittersmann/pen/LYQgOyw" rel="noopener noreferrer">table</a></p> <blockquote> <p>doch ich weiß nicht, ob das irgendwann womöglich backfired</p> </blockquote> <p>Ob das <em>was</em> tut?</p> <blockquote> <p>wenn es um responsiveness geht</p> </blockquote> <p>Man kann tabellarische Daten auf kleinen Viewports auch anders darstellen.<br> ☞ Beispiel: <a href="https://codepen.io/gunnarbittersmann/pen/BmjPGr" rel="noopener noreferrer">responsive table with custom properties</a></p> <p>(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.)</p> <p>In deinem Fall bietet sich auch die Auszeichnung als Beschreibungsliste <code>dl</code> an, die du mit verschiedenen Techniken layouten kannst.</p> <blockquote> <p>table, flexbox und grid</p> </blockquote> <p>Du sagst es.<br> ☞ Beispiel: <a href="https://codepen.io/gunnarbittersmann/pen/vYdVWgO" rel="noopener noreferrer">description list, display: table</a><br> ☞ Beispiel: <a href="https://codepen.io/gunnarbittersmann/pen/dydgZpx" rel="noopener noreferrer">description list, display: flex</a><br> ☞ Beispiel: <a href="https://codepen.io/gunnarbittersmann/pen/VwQErmZ" rel="noopener noreferrer">description list, display: grid</a></p> <p>Wobei Grid wohl am besten geeignet ist. Bei den anderen Varianten dürfte es schwierig werden, bei mehreren <code>td</code> zu einem <code>th</code> diese untereinander zu bekommen.</p> <blockquote> <p>(von Letzterem habe ich am wenigsten Ahnung).</p> </blockquote> <p>Da hab ich eine gute Nachricht für dich: <a href="https://forum.selfhtml.org/self/2018/feb/1/hausaufgabe-tabelle/1713105#m1713105" rel="noopener noreferrer">Grid ist einfach.</a> Und <a href="https://forum.selfhtml.org/self/2018/feb/1/hausaufgabe-tabelle/1713562#m1713562" rel="noopener noreferrer">Vasilis bestätigt das.</a></p> <p>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.</p> <blockquote> <p>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</p> </blockquote> <p>Es ist jedenfalls gar nicht klug, eine Tabelle mit <code>div</code> nachzubauen anstatt den im Browser implementierten Tabellenlayout-Algorithmus seine Arbeit tun zu lassen.</p> <blockquote> <p>was aber irgendwie automatisch ausschließt, flexbox oder grid für klassische Tabellen zu verwenden.</p> </blockquote> <p>Nein, das tut es nicht. Aber warum sollte man das wollen?</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="en">When the power of love overcomes the love of power the world will know peace.</em><br> — Jimi Hendrix </div> table oder flexbox ... oder grid? Sat, 18 Jun 22 18:30:19 Z https://forum.selfhtml.org/self/2022/jun/08/table-oder-flexbox-oder-grid/1799885#m1799885 https://forum.selfhtml.org/self/2022/jun/08/table-oder-flexbox-oder-grid/1799885#m1799885 <p>@@Gunnar Bittersmann</p> <blockquote> <p>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.</p> </blockquote> <p>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.</p> <p>Aber die Folien und Links zu Beispielen gibt’s zu sehen: <a href="https://noti.st/gunnarbittersmann/Fr7o03/grid-to-the-future-part-ii" rel="nofollow noopener noreferrer">Grid to the Future, Part II</a>.</p> <p><a href="https://noti.st/gunnarbittersmann/fWGWR2/grid-to-the-future" rel="nofollow noopener noreferrer">Teil I</a> lief schon vor ein paar Jahren.</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="en">When the power of love overcomes the love of power the world will know peace.</em><br> — Jimi Hendrix </div> table oder flexbox ... oder grid? Sun, 26 Jun 22 18:20:13 Z https://forum.selfhtml.org/self/2022/jun/08/table-oder-flexbox-oder-grid/1800051#m1800051 https://forum.selfhtml.org/self/2022/jun/08/table-oder-flexbox-oder-grid/1800051#m1800051 <blockquote> <p>@@Gunnar Bittersmann</p> <blockquote> <p>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.</p> </blockquote> <p>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.</p> <p>Aber die Folien und Links zu Beispielen gibt’s zu sehen: <a href="https://noti.st/gunnarbittersmann/Fr7o03/grid-to-the-future-part-ii" rel="nofollow noopener noreferrer">Grid to the Future, Part II</a>.</p> <p><a href="https://noti.st/gunnarbittersmann/fWGWR2/grid-to-the-future" rel="nofollow noopener noreferrer">Teil I</a> lief schon vor ein paar Jahren.</p> <p lang="uk"> Живіть довго і процвітайте</p> </blockquote> <p>Hallo Gunnar,</p> <p>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.</p> <p>Einige Fragen sind bei mir noch offen:</p> <ol> <li>Wenn ich eine Tabelle mit JavaScript sortierbar machen möchte, brauche ich dann zwangsläufig grid oder flexbox?</li> <li>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?</li> <li>In welchen Fällen ist grid flexbox vorzuziehen?</li> <li>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?</li> </ol> table oder flexbox ... oder grid? Sun, 26 Jun 22 18:29:48 Z https://forum.selfhtml.org/self/2022/jun/08/table-oder-flexbox-oder-grid/1800052#m1800052 https://forum.selfhtml.org/self/2022/jun/08/table-oder-flexbox-oder-grid/1800052#m1800052 <p>Servus!</p> <blockquote> <blockquote> <p>@@Gunnar Bittersmann</p> <blockquote> <p>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.</p> </blockquote> <p>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.</p> <p>Aber die Folien und Links zu Beispielen gibt’s zu sehen: <a href="https://noti.st/gunnarbittersmann/Fr7o03/grid-to-the-future-part-ii" rel="nofollow noopener noreferrer">Grid to the Future, Part II</a>.</p> <p><a href="https://noti.st/gunnarbittersmann/fWGWR2/grid-to-the-future" rel="nofollow noopener noreferrer">Teil I</a> lief schon vor ein paar Jahren.</p> <p lang="uk"> Живіть довго і процвітайте</p> </blockquote> <p>Hallo Gunnar,</p> <p>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.</p> <p>Einige Fragen sind bei mir noch offen:</p> <ol> <li>Wenn ich eine Tabelle mit JavaScript sortierbar machen möchte, brauche ich dann zwangsläufig grid oder flexbox?</li> </ol> </blockquote> <ul> <li><a href="https://wiki.selfhtml.org/wiki/HTML/Tabellen#Wann_sollte_man_eine_Tabelle_verwenden.3F" rel="nofollow noopener noreferrer">HTML/Tabellen#Wann_sollte_man_eine_Tabelle_verwenden?</a></li> </ul> <p>eine Tabelle, z.B. hier</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Tabellen_dynamisch_sortieren" rel="nofollow noopener noreferrer">JavaScript/Tutorials/Tabellen_dynamisch_sortieren</a></li> </ul> <blockquote> <ol start="2"> <li>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?</li> </ol> </blockquote> <ul> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Grid-Items#feststehender_Footer" rel="nofollow noopener noreferrer">CSS/Tutorials/Grid/Grid-Items#feststehender_Footer</a></li> </ul> <blockquote> <ol start="3"> <li>In welchen Fällen ist grid flexbox vorzuziehen?</li> </ol> </blockquote> <ul> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Einf%C3%BChrung#Flexbox_oder_Grid_Layout" rel="nofollow noopener noreferrer">CSS/Tutorials/Grid/Einführung#Flexbox_oder_Grid_Layout</a></li> </ul> <blockquote> <ol start="4"> <li>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?</li> </ol> </blockquote> <p>Wenn es tabellarische Daten sind, siehe 1.</p> <blockquote> <p>Oder ist das egal?</p> </blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> table oder flexbox ... oder grid? Mon, 27 Jun 22 07:31:05 Z https://forum.selfhtml.org/self/2022/jun/08/table-oder-flexbox-oder-grid/1800058#m1800058 https://forum.selfhtml.org/self/2022/jun/08/table-oder-flexbox-oder-grid/1800058#m1800058 <p>@@borisbaer</p> <blockquote> <ol> <li>Wenn ich eine Tabelle mit JavaScript sortierbar machen möchte, brauche ich dann zwangsläufig grid oder flexbox?</li> </ol> </blockquote> <p>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.</p> <blockquote> <ol start="2"> <li>Ist es heutzutage en vogue das Seitenlayout mit grid zu erstellen?</li> </ol> </blockquote> <p>Kommt drauf an, wie das Seitenlayout aussieht. Aber ja, für viele Layouts dürfte Grid das geeignete Werkzeug zur Umsetzung sein.</p> <blockquote> <p>Sollte z.B. der header in der mobilen Ansicht auf fixed umgestellt werden, schießt grid da quer?</p> </blockquote> <p>Kommt drauf an, wie das Headerlayout aussieht. So wie auf <a href="https://noti.st/gunnarbittersmann/Fr7o03/grid-to-the-future-part-ii#sM5mSYo" rel="nofollow noopener noreferrer">Folie 19</a>: gleich viel Abstand links und rechts des Logos? Dann <a href="https://codepen.io/gunnarbittersmann/pen/MWQxGeE" rel="noopener noreferrer">Umsetzung mit Flexbox</a>.</p> <p>Oder so wie auf <a href="https://noti.st/gunnarbittersmann/Fr7o03/grid-to-the-future-part-ii#syPVGRD" rel="nofollow noopener noreferrer">Folie 20</a>: Logo zentriert? Dann <a href="https://codepen.io/gunnarbittersmann/pen/YzegLzg" rel="noopener noreferrer">Umsetzung mit Grid</a>.</p> <p>Siehe auch <a href="https://noti.st/mbarker84/yGiO0I/creative-css-layout-the-flexible-web#sZrpzDw" rel="nofollow noopener noreferrer">Folien 12 bis 15</a> des in den Ressourcen angegebenen Vortrags <em lang="en">Creative CSS Layout & the Flexible Web</em> von Michelle Barker.</p> <blockquote> <ol start="3"> <li>In welchen Fällen ist grid flexbox vorzuziehen?</li> </ol> </blockquote> <p>In allen, in denen es um ein zweidimensionales Raster geht.</p> <p>Flexbox wirkt nur in eine Dimension. Nachfolgende Flexitems wissen nichts über die Anordnung ihrer Vorgänger, und dann kommt sowas raus wie auf <a href="https://noti.st/gunnarbittersmann/Fr7o03/grid-to-the-future-part-ii#sGVARAn" rel="nofollow noopener noreferrer">Folie 14</a> gezeigt.</p> <p>Grid hingegen ist 2D; alle Griditems auf <a href="https://noti.st/gunnarbittersmann/Fr7o03/grid-to-the-future-part-ii#ssotF3C" rel="nofollow noopener noreferrer">Folie 15</a> haben dieselbe Größe.</p> <p>Und außerdem in Fällen wie dem unter 2.</p> <p><a href="https://noti.st/mbarker84/yGiO0I/creative-css-layout-the-flexible-web#se8cu2Q" rel="nofollow noopener noreferrer">Ab Folie 38</a> widmet sich Michelle Barker dem Thema <em lang="en">Flex or Grid?</em></p> <blockquote> <ol start="4"> <li>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?</li> </ol> </blockquote> <p>Die Antwort fällt so aus wie die unter 1.</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="en">When the power of love overcomes the love of power the world will know peace.</em><br> — Jimi Hendrix </div>