mehrere Spalten - Tabelle trennen

[Friedel]

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.

[Der Martin]

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

[Friedel]

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.

[Gunnar Bittersmann]

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

[Friedel]

@@ Gunnar Bittersmann:

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

[Felix Riesterer]

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

[Friedel]

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

[Felix Riesterer]

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

[Friedel]

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

[Matthias Apsel]

Hallo Friedel,

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

Das finde ich nicht.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Felix Riesterer

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

Ich mach das so:

😷 LLAP

[Der Martin]

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

[Gunnar Bittersmann]

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

[Der Martin]

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

[Friedel]

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.

[Gunnar Bittersmann]

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

• Warum man Sprachattribute verwenden sollte
• Angabe der Sprache in HTML

😷 LLAP

[Friedel]

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

[Friedel]

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.

[Der Martin]

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

[Friedel]

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.