How do I optimize rendering the following HTML snippet - html

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>
The above code snippet shows 5 <td> elements inside a <tr>. All contents within the <td> are similar. Is there a way to optimize this so that I can handle this through some form of a repetition (e.g. much similar to a for loop).

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>
the empty div will hold the place to display the images x number of times you want.
That is if you are trying to repeat the same image;

Answer 2

If all the images need to be different (or if you can't use background-image for some reason), I'd float the 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" />
This will display all the images on their own line.