zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Einfache zweizeilige Tabelle Tabellen im Responsive Webdesign erstellen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.10.2021, 17:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.10.2021
Beiträge: 2
Cipriani befindet sich auf einem aufstrebenden Ast
Standard Einfache zweizeilige Tabelle Tabellen im Responsive Webdesign erstellen

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!

Geändert von Cipriani (05.10.2021 um 17:55 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.10.2021, 22:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.10.2021, 22:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.10.2021
Beiträge: 2
Cipriani befindet sich auf einem aufstrebenden Ast
Standard

okay danke erstmal. Also ist es etwas komplexer als ich dachte. Ich kann auch den Quelltext posten, falls sich jemand damit beschäftigen will.
Mit Zitat antworten
  #4 (permalink)  
Alt 06.10.2021, 10:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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.

Geändert von MrMurphy (07.10.2021 um 00:51 Uhr)
Mit Zitat antworten
Antwort

Stichwörter
css, handy, mobile geräte, resposive, tabelle

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:58 Uhr.