Einfache zweizeilige Tabelle Tabellen im Responsive Webdesign erstellen

Cipriani · #1 (**permalink**) 05.10.2021, 16:38

Hallo,

ich habe leider nicht genug Ahnung von CSS und brauche daher Eure Hilfe.
Ich möchte eine Tabelle erstellen mit zwei Zeilen und einer variablen Zahl von Spalten. In der ersten Zeile steht ein Text und in der zweiten Zeile ein Bild. aufgrößeren Displays soll das ganz normal wie eine Tabelle dargestellt werden: links text, rechts daneben das Bild. Auf dem handy soll das Bild aber unter dem Text stehen, also die zweite Zeile soll unter der ersten Zeile rutschen. Vielleicht noch einfacher gesagt: auf Handys soll aus einer zweizeiligen Tabelle eine einzeilige Tabelle werden in dem die zweite Zeile inter der ersten Zeile rutschen.
Es sieht einfach scheiße aus, wenn sich auf einem schmalen Handydisplay text und Bild nebeneinander quetschen. Kann mir da bitte jemand helfen und eventuell eine Vorlage erstellen? Ich selbst kriege das nicht hin trotz suche und habe angst, dass das am Ende was unsauberes wird.

Ich benutze ein Template für meine Webseite und ich kann CSS einfügen, aber die Tabelle nicht mit "<table class="XY">" benennen. Sie wird mit einem Editor erstellt. Daher müsste der Code der einfachheitshalber für alle Tabellen gelten.

Danke schon mal!

MrMurphy · #2 (**permalink**) 05.10.2021, 21:09

Für ein konkretes Beispiel müsste man den Quelltext (HTML, CSS) und die Bilder kennen sowie wissen, was möglich ist. Es ist schlicht frustrierend Beispiellösungen zu erstellen und als Antwort zu erhalten: Geht bei mir nicht.

Da du keine Tabellendaten hast ist das table-Element für deinen Wunsch sachlich falsch.

Allgemein: Du benötigst zwei Container, eventuell innerhalb eines dritten, die mit CSS-Grid (display: grid) angeordnet werden. Je nach Bild, Text und der Gesamtseite können unterschiedliche Container sinnvoll sein. Bei einem Bild mit zugehörigem Text bieten sich zunächst figure, img und figcaption an.

Cipriani · #3 (**permalink**) 05.10.2021, 21:46

okay danke erstmal. Also ist es etwas komplexer als ich dachte. Ich kann auch den Quelltext posten, falls sich jemand damit beschäftigen will.

MrMurphy · #4 (**permalink**) 06.10.2021, 09:12

Nein, komplex ist daran überhaupt nichts. CSS-Grid dient doch grade der Vereinfachung von Layouts, die früher überhaupt nicht möglich waren. Oder mit aufwendigen Java-Script Lösungen. So auch in diesem Fall.

Ich habe mal ein Beispiellayout erstellt.

Nach deinen bisherigen Angaben sehe ich eine Liste, in diesem Fall das dl-Element.

Code:

<dl>
</dl>

Innerhalb des dl-Elements dann für jede Bild-Text-Kombination

Code:

   <div>
      <dt><img src="" alt=""></dt>
      <dd></dd>
   </div>

Übersichtlicher geht's kaum.

Das entscheidende CSS dazu lautet

Code:

dl>div {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1rem;
}

Für die Bildschirmbreite, ab der der Text neben dem Bild erscheinen soll (hier: 800px) zusätzlich

Code:

@media only screen and (min-width: 800px) {
   dl>div {
      grid-template-columns: 1fr 1fr;
   }
}

Dazu einfach noch die altbekannten üblichen Abstände, Rahmen, Farben und so weiter.

Ein Online-Beispiel dazu:

https://www.w3schools.com/code/tryit...e=GV6LDPDOW9RG

Nach Anklicken des grünen Run-Buttons kann die Fensterbreite durch verschieben des Mittelstegs geändert werden.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Tabelle nach Vorlage erstellen	thebrain	(X)HTML	5	22.09.2010 11:22
tabelle wie auf beispielbild erstellen	Javajim	(X)HTML	3	12.12.2008 18:59
Tabelle erstellen	Chaosgoettin	(X)HTML	8	25.11.2007 11:43
tool zum erstellen von tabellen	otomo	(X)HTML	12	14.06.2005 02:02
Tabellenlose Tabelle mit CSS erstellen	stefan123	CSS	10	22.11.2004 20:53