Friedel: mehrere Spalten - Tabelle trennen

problematische Seite

Hallo

Ich schreibe gerade eine Registrierungsseite, auf der auch beschrieben wird, welche Daten von den Usern gespeichert werden. Das wird in einer Tabelle dargestellt. Die Seite hat (bei passendem Viewport) 3 Spalten. Da die Tabelle relativ viele Tabellenzeilen hat und vor der Tabelle nicht viel Text steht, möchte ich erreichen, dass die Tabelle über mehrere Spalten geht (bzw. gehen kann).

Ist sowas möglich? Wenn ja, wie? Ich möchte das ganze möglichst nicht mit Div oder ähnlichem bauen, denn da werden tabellarische Daten dargestellt und es sollte daher auch eine Tabelle sein. Außerdem habe ich noch nicht für alle Darstellungsarten (kleines Fenster, großes Fenster, Panorama, Print…) das Layout festgelegt.

Im Moment ist das ganze gerade auf http://bplaced4.bplaced.net/mfz/registrieren.php zu sehen, weil ich gerade ein Datenbank-Problem gelöst habe. Die Seite ist nicht fertig, aber man sieht das Problem (im Moment) recht gut.

Vielen Dank für Anregungen und Lösungen.

P.S. Ich brauche keine Tipps bezüglich https und Loginseiten. Dieser Host ist eine Test- und Entwicklungs-Umgebung.

  1. problematische Seite

    Hallo,

    Ich schreibe gerade eine Registrierungsseite, auf der auch beschrieben wird, welche Daten von den Usern gespeichert werden. Das wird in einer Tabelle dargestellt. Die Seite hat (bei passendem Viewport) 3 Spalten.

    bis hierher kann ich dir folgen.

    Da die Tabelle relativ viele Tabellenzeilen hat und vor der Tabelle nicht viel Text steht, möchte ich erreichen, dass die Tabelle über mehrere Spalten geht (bzw. gehen kann).

    Den Teil habe ich dagegen nicht verstanden.

    Im Moment ist das ganze gerade auf http://bplaced4.bplaced.net/mfz/registrieren.php zu sehen, weil ich gerade ein Datenbank-Problem gelöst habe. Die Seite ist nicht fertig, aber man sieht das Problem (im Moment) recht gut.

    Da fällt mir als erstes auf, dass das Registrierungsformular am rechten Fensterrand in die Tabelle hineinragt. Ich kann aber nicht erkennen, woran das liegt.

    Ich würde an deiner Stelle da gar keine Tabelle verwenden, sondern unter dem Formular eine dl:

    <dl>
     <dt>E-Mail-Adresse: Pflichtangabe, einmalig</dt>
     <dd>Jede Adresse kann nur ein mal benutzt werden. Es ist nicht möglich, ...</dd>
    
     <dt>Nickname: Pflichtangabe, einmalig</dt>
     <dd>Das ist der Name, der anderen Benutzern angezeigt wird, wenn ...</dd>
    
     ...
    
    </dl>
    

    So darf sich der Text dann gern etwas mehr in die Breite als in die Höhe ausdehnen, und das Layout wirkt dann für meinen Geschmack etwas ausgeglichener.

    Live long and pros healthy,
     Martin

    --
    Home is where my beer is.
    1. problematische Seite

      Hallo Der Martin. Danke für die Tipps.

      Die dl halte ich hier für semantisch auch sehr brauchbar. Allerdings imho besser nach dem Schema:

      Da die Tabelle relativ viele Tabellenzeilen hat und vor der Tabelle nicht viel Text steht, möchte ich erreichen, dass die Tabelle über mehrere Spalten geht (bzw. gehen kann).

      Den Teil habe ich dagegen nicht verstanden.

      Dafür, dass du gar nicht verstanden hast was ich machen will, ist deine Antwort sehr hilfreich.

      <dl>
       <dt>E-Mail-Adresse</dt>
       <dd>Pflichtangabe, einmalig</dd>
       <dd>Jede Adresse kann nur ein mal benutzt werden. Es ist …</dd>
      
       <dt>Nickname: Pflichtangabe, einmalig</dt>
       <dd>Pflichtangabe, einmalig</dd>
       <dd>Das ist der Name, der … </dd>
      
       …
      
      </dl>
      

      Schließlich ist "Pflichtangabe, einmalig" eine Beschreibung (dd), nicht das was beschrieben werden soll (dt). Das werde ich wohl so machen.

      Da fällt mir als erstes auf, dass das Registrierungsformular am rechten Fensterrand in die Tabelle hineinragt. Ich kann aber nicht erkennen, woran das liegt.

      Das war mir noch gar nicht aufgefallen. Das passiert bei mir bei normaler Fensterbreite auch nicht. Das muss ich natürlich noch ändern und auch an verschiedene Viewports anpassen. Die Inputfelder sind breiter als die Spalten…

      Ich würde an deiner Stelle da gar keine Tabelle verwenden, sondern unter dem Formular eine dl:

      Nein! Natürlich nicht unter dem Formular. Ich schreibe ja auch nicht in einer Routenbeschreibung: „Wenn die Rheinbrücke erreicht hast, hättest du vor zwei Kilometern abbiegen müssen.“ Natürlich erkläre ich vor dem Formular, was der User in die Felder eintragen soll.

      So darf sich der Text dann gern etwas mehr in die Breite als in die Höhe ausdehnen, und das Layout wirkt dann für meinen Geschmack etwas ausgeglichener.

      Das ist wohl Geschmacksache. Ich werde die dl so formatieren, dass sie wie eine Tabelle aussieht. Ich halte das für übersichtlicher. Natürlich muss die Spaltenbreite groß genug sein.

      1. problematische Seite

        @@Friedel

        Ich werde die dl so formatieren, dass sie wie eine Tabelle aussieht.

        Dazu dürfte es hilfreich sein, wenn die einzelnen Einträge gruppiert sind:

        <dl>
          <div>
            <dt>E-Mail-Adresse</dt>
            <dd>Pflichtangabe, einmalig</dd>
            <dd>Jede Adresse kann nur ein mal benutzt werden. Es ist …</dd>
          </div>
          <div>
            <dt>Nickname</dt>
            <dd>Pflichtangabe, einmalig</dd>
            <dd>Das ist der Name, der … </dd>
          </div></dl>
        

        😷 LLAP

        --
        „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
        1. problematische Seite

          @@ Gunnar Bittersmann:

          Kann man machen. Meine Idee ist, die dl als Flexcontainer zu formatieren. Aber vielleicht bleibe ich nicht dabei. Mal sehen.

          1. problematische Seite

            Lieber Friedel,

            Kann man machen. Meine Idee ist, die dl als Flexcontainer zu formatieren.

            das geht auch mit einer Tabelle...

            Liebe Grüße

            Felix Riesterer

            1. problematische Seite

              @ Felix Riesterer: Aber wie??? Darum geht es doch in diesem Thread.

              1. problematische Seite

                Liebe Friedel,

                Aber wie??? Darum geht es doch in diesem Thread.

                @Gunnar Bittersmann hatte da mal einen Codepen dazu verlinkt. Probiere den einmal aus, indem Du mit der Tastenkombination [Shift]+[Strg]+[M] in die Mobilansicht des Browsers schaltest!

                Liebe Grüße

                Felix Riesterer

                1. problematische Seite

                  Das hat jetzt wirklich gar nichts mehr mit dem Thema zu tun.

                  1. problematische Seite

                    Hallo Friedel,

                    Das hat jetzt wirklich gar nichts mehr mit dem Thema zu tun.

                    Das finde ich nicht.

                    Bis demnächst
                    Matthias

                    --
                    Du kannst das Projekt SELFHTML unterstützen,
                    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                2. problematische Seite

                  @@Felix Riesterer

                  Probiere den einmal aus, indem Du mit der Tastenkombination [Shift]+[Strg]+[M] in die Mobilansicht des Browsers schaltest!

                  Ich mach das so:

                  Animation: Quellcode in Codepen links, Verschieben des Balken zwischen Code und Viewport ändert Viewportbreite

                  😷 LLAP

                  --
                  „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
        2. problematische Seite

          Hallo,

          Ich werde die dl so formatieren, dass sie wie eine Tabelle aussieht.

          Dazu dürfte es hilfreich sein, wenn die einzelnen Einträge gruppiert sind:

          <dl>
            <div>
              <dt>E-Mail-Adresse</dt>
              <dd>Pflichtangabe, einmalig</dd>
              <dd>Jede Adresse kann nur ein mal benutzt werden. Es ist …</dd>
            </div>
            <div>
              <dt>Nickname</dt>
              <dd>Pflichtangabe, einmalig</dd>
              <dd>Das ist der Name, der … </dd>
            </div></dl>
          

          cool, ich wusste gar nicht, dass das zulässig ist. Ich dachte, zwischen dl und dt/dd gelte dieselbe direkte Eltern-Kind-Beziehung wie bei ol/ul und li.

          Warst du nicht derjenige, der irgendwann mal das Fehlen eines gruppierenden Elements bedauert und sinniert hat, dass es doch sinnvoll sei, li als Subcontainer auch als Kind von dl zuzulassen (mit dt und dd als dessen Kinder)?

          Live long and pros healthy,
           Martin

          --
          Home is where my beer is.
          1. problematische Seite

            @@Der Martin

            Warst du nicht derjenige, der irgendwann mal das Fehlen eines gruppierenden Elements bedauert [hat]

            Ja, der war ich.

            und sinniert hat, dass es doch sinnvoll sei, li als Subcontainer auch als Kind von dl zuzulassen (mit dt und dd als dessen Kinder)?

            XHTML2 hatte ein di-Element für description list items vorgesehen, IIRC.

            In HTML ist es nun div geworden. (Abwärtskompatibilität?)

            😷 LLAP

            --
            „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
      2. problematische Seite

        Mahlzeit,

        <dl>
         <dt>E-Mail-Adresse</dt>
         <dd>Pflichtangabe, einmalig</dd>
         <dd>Jede Adresse kann nur ein mal benutzt werden. Es ist …</dd>
        
         <dt>Nickname: Pflichtangabe, einmalig</dt>
         <dd>Pflichtangabe, einmalig</dd>
         <dd>Das ist der Name, der … </dd>
        
         …
        
        </dl>
        

        Schließlich ist "Pflichtangabe, einmalig" eine Beschreibung (dd), nicht das was beschrieben werden soll (dt). Das werde ich wohl so machen.

        ja okay, so geht's natürlich auch.

        Da fällt mir als erstes auf, dass das Registrierungsformular am rechten Fensterrand in die Tabelle hineinragt. Ich kann aber nicht erkennen, woran das liegt.

        Das war mir noch gar nicht aufgefallen. Das passiert bei mir bei normaler Fensterbreite auch nicht.

        Normale Fensterbreite mit Browser im Vollbildmodus sind bei mir 1600px (zwei 4:3-Monitore mit je 1600x1200).

        Ich würde an deiner Stelle da gar keine Tabelle verwenden, sondern unter dem Formular eine dl: Nein! Natürlich nicht unter dem Formular. Ich schreibe ja auch nicht in einer Routenbeschreibung: „Wenn die Rheinbrücke erreicht hast, hättest du vor zwei Kilometern abbiegen müssen.“ Natürlich erkläre ich vor dem Formular, was der User in die Felder eintragen soll.

        Von der Logik her ist das korrekt. Allerdings ist es IMO üblich, dass die Erläuterungen unter einer Tabelle oder Skizze stehen. Warum also nicht auch die Hinweise zum Ausfüllen eines Formulars?

        Live long and pros healthy,
         Martin

        --
        Home is where my beer is.
        1. problematische Seite

          OK. Die letzten Stunden waren wenig erfolgreich. Mit dl geht es auch nicht. Auch die dl wird nicht umgebrochen. Das hätte ich auch gleich am Anfang testen können.

          1. problematische Seite

            @@Friedel

            OK. Die letzten Stunden waren wenig erfolgreich. Mit dl geht es auch nicht. Auch die dl wird nicht umgebrochen.

            Doch, da wird umbrochen. Guckst du.

            Natürlich muss der Browser wissen, nach welchen Trennungsregeln, die ja von Sprache zu Sprache unterschiedlich sind. Wenn keine Sprache angegeben ist, darf der Browser nicht trennen.

            😷 LLAP

            --
            „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
            1. problematische Seite

              @@ Gunnar Bittersmann Falscher Thread. In diesem Thread geht es darum, ob die Tabelle bzw. die dl am Spaltenende in die nächste Spalte umgebrochen wird. Das hat nichts damit zu tun, ob in diesen Elementen eine Zeile umgebrochen wird und es hat auch nichts mit Rechtschreibregeln zu tun.

              In einem Block sind mehrere Spalten. Und darin steht am Anfang etwas Text und dann eine Tabelle oder eine dl, die nicht mehr komplett unter den Text in die Spalte passt. Dann rutscht diese Tabelle bzw. die dl im Firefox in die nächste Spalte und unter dem Text entsteht eine große freie Fläche. Im Chromium beginnt die Tabelle nach dem Text in der ersten Spalte und wird am Spaltenende in die nächste Spalte umgebrochen.

              Screenshot Chromium

              Screenshot Firefox

    2. problematische Seite

      Jetzt habe ich auch verstanden, wo dein Verständnisproblem ist. Offensichtlich machen einige Browser das so, wie ich es haben will. Z.B. Chromium. Aber warum??? Table ist ein Blockelement. Warum wir das am Spaltenende umgebrochen?

      Ich tesete normalerweise primär im Firefox. Und der bricht Tabelen normalerweise nicht um.

      Jedenfalls kann ich es nicht gebrauchen, wenn es nur in einigen Browsern funktioniert und ich noch dazu nicht weiß, warum.

      1. problematische Seite

        Hallo,

        Jetzt habe ich auch verstanden, wo dein Verständnisproblem ist.

        das glaube ich nicht. 😉

        Offensichtlich machen einige Browser das so, wie ich es haben will. Z.B. Chromium.

        Ups ... tatsächlich! Im Chromium sieht's ja völlig durcheinander aus!

        Ich tesete normalerweise primär im Firefox.

        Ich auch. Oder genauer: Mit seinem Halbbruder Pale Moon.

        Live long and pros healthy,
         Martin

        --
        Home is where my beer is.
      2. problematische Seite

        Darüber muss mal gründlich nachdenken. Aber nicht jetzt. Absätze werden an Spaltenenden umgebrochen. – Das sind auch Blockelemente. Tabellen werden in Chromium umgebrochen, aber nicht im Firefox. Wie ich gerade festgestellt habe, werden auch dd und dt im Chromium umgebrochen, aber nicht im Firefox.

        Das sollte man irgendwie steuern können. Und zwar für alle Browser einheitlich.