Tabella responsive

[iceberg]

Ciao a tutti, ho una tabella di questo tipo

<table>
        <tbody>
            <tr>
                <td><img src="img1.png" width="300" height="200" /></td>
                <td><img src="img2.png" width="300" height="200" /></td>
                <td><img src="img3.png" width="300" height="200" /></td>
                <td><img src="img4.png" width="300" height="200" /></td>
            </tr>
            <tr>
                <td>Text 1</td>
                <td>Text 2</td>
                <td>Text 3</td>
                <td>Text 4</td>
            </tr>
             <tr>
                <td><img src="img5.png" width="300" height="200" /></td>
                <td><img src="img6.png" width="300" height="200" /></td>
                <td><img src="img7.png" width="300" height="200" /></td>
                <td><img src="img8.png" width="300" height="200" /></td>
            </tr>
            <tr>
              <td>Text 5</td>
              <td>Text 6</td>
              <td>Text 7</td>
              <td>Text 8</td>
            </tr>
        </tbody>
    </table>

Quello che vorrei fare è renderla responsive.... facendo quindi in modo che da desktop abbia 4 colonne come ore.... e da mobile diventi

Immagine
Testo
[spazio]
Immagine
Testo
[spazio]
Immagine
Testo
[spazio]
....per 8 volte

quindi mostrando un elemento per righe da Smartphone e Tablet.

Ho guardato diversi esempi su Google ma non ne sono venuto a capo con la gestione delle immagini

Come posso fare?

Grazie in anticipo per l'aiuto!!

[carlomarangoni]

Per adattarsi la tabella non deve avere immagini con misure fisse e neanche immagini con misure sia in larghezza che in altezza ma solo in larghezza e non fisse

[Vincent.Zeno]

al di là del problema della dimensione delle immagini lasciati ispirare da questo esempio:
https://css-tricks.com/examples/Resp...responsive.php
o da questo:
https://codepen.io/AllThingsSmitty/pen/MyqmdM

[iceberg]

Grazie per le risposte!! La dimensione delle immagini non è un problema, il fatto che ci siano elementi fissi nel mio esempio era solo per mostrare la base di partenza.
Vincent, avevo visto esempi simili ma quando li applico:
- le immagini non vengono visualizzate
- visualizzo in colonna quello che vorrei vedere in riga (in modalità responsive)

Io invece vorrei:

Immagine
Testo
[spazio]
Immagine
Testo
[spazio]
Immagine
Testo
[spazio]
....per 8 volte


Mi potete aiutare a venirne a capo?

Grazie infinite!!!

[carlomarangoni]

Ci fai vedere la tavella originale? Altrimenti qui si va solo a naso!
Poi se invece di usare una tabella usassi dei div che è anche più opportuno semanticamente, le cose andrebbero meglio

[iceberg]

Grazie Carlo per la risposta!!

La mia tabella originale è proprio quella che ho inserito nel primo post.

Nessun problema da parte mia ad utilizzare i DIV o altro.

Diciamo che ho postato come è ora la tabella e spiegato come vorrei che venisse visualizzato quel contenuto da mobile.

<table>
        <tbody>
            <tr>
                <td><imgsrc="img1.png"width="300"height="200"/></td>
                <td><imgsrc="img2.png"width="300"height="200"/></td>
                <td><imgsrc="img3.png"width="300"height="200"/></td>
                <td><imgsrc="img4.png"width="300"height="200"/></td>
            </tr>
            <tr>
                <td>Text 1</td>
                <td>Text 2</td>
                <td>Text 3</td>
                <td>Text 4</td>
            </tr>
             <tr>
                <td><imgsrc="img5.png"width="300"height="200"/></td>
                <td><imgsrc="img6.png"width="300"height="200"/></td>
                <td><imgsrc="img7.png"width="300"height="200"/></td>
                <td><imgsrc="img8.png"width="300"height="200"/></td>
            </tr>
            <tr>
              <td>Text 5</td>
              <td>Text 6</td>
              <td>Text 7</td>
              <td>Text 8</td>
            </tr>
        </tbody>
    </table>

Grazie!!!

[iceberg]

Niente???

[carlomarangoni]

Prova a fare il tutto con i div

[KillerWorm]

Ciao, premettendo che con le tabelle puoi farci ben poco sulla questione responsive, se non impostando una tabella "schiacciabile" o scorrevole, oppure a meno di utilizzare stratagemmi come quelli sui link proposti da Vincent.Zeno o altri complicati metodi via JavaScript o, ancora, svariate altre soluzioni che puoi trovare online (vedi ad esempio qui, qua, ecc.), potresti comunque risolvere, forse in modo più opportuno, allestendo una griglia "flessibile" composta da contenitori (ad esempio dei div) come suggerito da carlomarangoni, e come tu stesso hai preso in considerazione.

Penso infatti che l'uso di una tabella, in questo tuo caso specifico, forse non sia così necessario.

Potrei provare a buttare giù qualcosa ma ho bisogno di alcuni chiarimenti:

- I diversi testi nelle celle, riportati su righe alternate, sono relativi alle singole immagini? Cioè sono in sostanza delle didascalie di quelle immagini?

In tal caso ritengo sia comunque inadeguata l'impostazione che hai usato per quella tabella. Sarebbe stato più opportuno inserire il testo all'interno di ogni <td> relativo all'immagine.

- Utilizzi HTML 5?

In tal caso, e in base al primo punto, si potrebbe usare una serie di elementi <figure>, cioè dei contenitori in cui inserire l'elemento <img> e il suo relativo <figurecaption>. In alternativa si potrebbero comunque usare dei semplici div, il discorso non cambia.

A questo punto sarà possibile organizzare tali contenitori come meglio si crede (ad esempio con float o con flexbox) in modo da ottenere la disposizione voluta, che si posso inoltre organizzare facilmente per la questione responsive.

Fammi sapere.

[carlomarangoni]

Oltre che usare i div e come suggerito da KillerWorm usare html5 è appunto sbagliato mettere il testo in celle separate inoltre quella tabella non potra mai funzionare in quanto è piena di errori semantici, tutte le espressioni sono attaccate esempio:
Così non va bene

<td><imgsrc="img4.png"width="300"height="200"/></td>

Così va bene

<td> <img src="img4.png" width="300" height="200" /> </td>