Frage TABELLE Responsive, wie erstellen? 6 Felder Smartphone Webseite

[Maxibieber]

Hallo,

würde gerne auf meiner Startseite folgende Tabelle integrieren wie auf dem Bild. Die Felder sollen aus Bildern bestehen. Also 6 Bilder, 3 in einer Reige mit leichtem Abstand. Das hatte ich soweit mit TR und sowass hinbekommen, aber wie mache ich dieses responsive? Weil auf dem Handy, sehen die Bilder dann schrecklich aus.

Grüße!

 

[Sailor]

Was bedeutet ... 'sehen die Bilder dann schrecklich aus'? Sind sie verzerrt, unscharf, passen von der Größe nicht?
Um die Anzeige auf dem Display für alle Bildschirmgrößen passend zu machen nutzt man CSS und Media-Queries.
So ein Layout mit einer Tabelle ist vielleicht nicht die ideale Lösung für dein Vorhaben, ich denke, mit Flex-Box kommst du schneller ans Ziel.

 

[MrMurphy]

Hallo

Tabellen (das table-Element) soll nur für Tabellendaten verwendet werden. Bilder sind keine Tabellen.

Ein Grund ist, dass korrekte Tabellen von sich aus nicht responsive sein können.

Deshalb solltest du für Bilder die dafür vorgesehenen figure-Elemente verwenden. Für eine Bildersammlung werden die figure-Elemente dann von einer Box umschlossen, zum Beispiel dem section-Element.

Das HTML könnte dann so aussehen:

      <section class="bilder-anordnen">
         <figure>
            <img src="pfad/dateiname.endung" alt="Beispielbild">
         </figure>
         <figure>
            <img src="pfad/dateiname.endung" alt="Beispielbild">
         </figure>
         <figure>
            <img src="pfad/dateiname.endung" alt="Beispielbild">
         </figure>
         <figure>
            <img src="pfad/dateiname.endung" alt="Beispielbild">
         </figure>
         <figure>
            <img src="pfad/dateiname.endung" alt="Beispielbild">
         </figure>
         <figure>
            <img src="pfad/dateiname.endung" alt="Beispielbild">
         </figure>
      </section>

Das passende CSS mit ein paar sinnvollen Grundangaben dazu:

      * {
         min-width: 1px;
      }
      figure {
         min-width: 1px;
         max-width: 100%;
         margin: 0rem;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         border: 0;
      }
      .bilder-anordnen figure {
         margin: 0.5rem;
      }
   }
   @media only screen and (min-width: 400px) {
      .bilder-anordnen {
         display: flex;
         flex-wrap: wrap;
      }
      .bilder-anordnen figure {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(50% - 1rem);
      }
   }
   @media only screen and (min-width: 800px) {
      .bilder-anordnen figure {
         flex-basis: calc(33.333% - 1rem);
      }
   }
   @media only screen and (min-width: 1200px) {
      .bilder-anordnen figure {
         flex-basis: calc(16.666% - 1rem);
      }
   }

Die einzelnen Werte kannst du natürlich noch deinen Vorstellungen anpassen. Ich habe mal ein praktisches Beispiel zum Testen auch gleich in Smartphones erstellt:

http://boratb.bplaced.net/index83.html

Gruss

MrMurphy

 

[Jacob57]

Lies dir mal eine Anleitung zu Grid Layout durch;)

https://css-tricks.com/snippets/css/complete-guide-grid/