borisbaer: table oder flexbox ... oder grid?

problematische Seite

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!

akzeptierte Antworten

  1. problematische Seite

    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

    --
    sumpsi - posui - obstruxi
  2. problematische Seite

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

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

    --
    When the power of love overcomes the love of power the world will know peace.
    — Jimi Hendrix
    1. problematische Seite

      @@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.

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

      --
      When the power of love overcomes the love of power the world will know peace.
      — Jimi Hendrix
      1. problematische Seite

        @@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?
        1. problematische Seite

          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?

          eine Tabelle, z.B. hier

          1. 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?
          1. In welchen Fällen ist grid flexbox vorzuziehen?
          1. 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

          --
          Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
        2. problematische Seite

          @@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.

          1. 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.

          1. 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?

          1. 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.

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

          --
          When the power of love overcomes the love of power the world will know peace.
          — Jimi Hendrix