Comment puis-je optimiser le rendu le code HTML suivant

Question

<table> 
    <tr> 
    <td><img src="http://www.foo.com/a.img"></img></td> 
    <td><img src="http://www.foo.com/a.img"></img></td> 
    <td><img src="http://www.foo.com/a.img"></img></td> 
    <td><img src="http://www.foo.com/a.img"></img></td> 
    <td><img src="http://www.foo.com/a.img"></img></td> 
    </tr> 
</table> 

L'extrait de code ci-dessus montre 5 <td> éléments à l'intérieur d'un <tr>. Tous les contenus dans le <td> sont similaires. Existe-t-il un moyen d'optimiser cela afin que je puisse gérer cela à travers une certaine forme de répétition (par exemple beaucoup similaire à une boucle for).

Answer 1

<style type='text/css'> 
    .imageRepeat { 
     width: 200px; /* image width*/ 
     height:1000px; /* height times the number of images */ 
     background-image: url('http://www.foo.com/a.img'); 
    } 
</style> 

<div class='imageRepeat'> 
<!-- place holder for background image --> 

</div> 

la div vide tiendra l'endroit pour afficher les images x nombre de fois que vous voulez. C'est si vous essayez de répéter la même image;

Answer 2

Si toutes les images doivent être différentes (ou si vous ne pouvez pas utiliser l'image d'arrière-plan pour une raison quelconque), j'abreuverons les images:

<style> 
img.float { 
    float:left; 
    clear:right; 
} 
</style> 

<img src="http://placekitten.com/200/200" alt="" class="float" /> 
<img src="http://placekitten.com/200/200" alt=""class="float" /> 
<img src="http://placekitten.com/200/200" alt=""class="float" /> 
<img src="http://placekitten.com/200/200" alt=""class="float" /> 
<img src="http://placekitten.com/200/200" alt=""class="float" /> 

Cela permet d'afficher toutes les images de leur propre ligne.