Gestione responsive di 6 immagini a coppie

[bobrock4]

Non sono per niente un web designer avanzato, ma per poche immagini sto cercando una soluzione in autonomia.

In questa pagina Ho messo sei piccole immagini 200x100 a coppie in una tabella. Tra l'altro l'avrei evitata volentieri, mi sa di obsoleto, ma non avrei saputo crearla solo con i CSS.

Sull'iphone sembra che sia responsive. Ma non so se questa soluzione lo sarà su display di diverse risoluzioni e dimensioni.

<div align="center">
<table border="0" cellspacing="10" cellpadding="10">
<tbody>
<tr>
<th>Prima</th><th>Dopo</th></tr>
<tr>
<td><img src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-prima-1.jpg" alt="" /></td>
<td><img src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-dopo-1.jpg" alt="Lumineers dopo caso 1" /></td>
</tr>
<tr>
<td><img src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-prima-2.jpg" alt="" /></td>
<td><img src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-dopo-2.jpg" alt="Lumineers dopo caso 2" /></td>
</tr>
<tr>
<td><img src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-prima-3.jpg" alt="" /></td>
<td><img src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-dopo-3.jpg" alt="Lumineers dopo caso 3" /></td>
</tr>
</tbody>
</table>
</div>

Come l'avreste gestita?

Grazie
Ciao

[carlomarangoni]

<style type="text/css">.ts-1 {
    border: none;
    height: auto;
    text-align: left;
    width: auto;
}

.ts-1-1 {
    border: none;
    display: inline;
    float: left;
    height: 7.81%;
    line-height: 36px;
    margin-left: 10px;
    margin-top: 10px;
    padding: 1px;
    text-align: center;
    width: 46.38%;
}

.ts-1-3 {
    border: none;
    display: inline;
    float: left;
    height: 24.51%;
    margin-left: 10px;
    margin-top: 10px;
    padding-bottom: 1px;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 10px;
    width: 46.38%;
}

.gen-1 {
    clear: both;
}
</style>
-------------------------------------------------------------------------------
        
        <div align="center">
            
            <div class="ts-1">
                <div class="ts-1-1">Prima</div>
                <div class="ts-1-1">Dopo</div>
                <div class="ts-1-3"><img alt="" src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-prima-1.jpg"></div>
                <div class="ts-1-3"><img alt="Lumineers dopo caso 1" src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-dopo-1.jpg"></div>
                <div class="ts-1-3"><img alt="" src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-prima-2.jpg"></div>
                <div class="ts-1-3"><img alt="Lumineers dopo caso 2" src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-dopo-2.jpg"></div>
                <div class="ts-1-3"><img alt="" src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-prima-3.jpg"></div>
                <div class="ts-1-3"><img alt="Lumineers dopo caso 3" src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-dopo-3.jpg"></div>
                <div class="gen-1"></div>
            </div>
            
        </div>