create an unordered list for each row and apply some CSS
<div id="container">
<ul class="photoAlbum">
<li><img src="row1image1" width="__width__" height="__height__" alt="__alt_description__"></li>
<li><img src="row1image2" width="__width__" height="__height__" alt="__alt_description__"></li>
<li><img src="row1image3" width="__width__" height="__height__" alt="__alt_description__"></li>
<li><img src="row1image4" width="__width__" height="__height__" alt="__alt_description__"></li>
</ul>
<ul class="photoAlbum">
<li><img src="row2image1" width="__width__" height="__height__" alt="__alt_description__"></li>
<li><img src="row2image2" width="__width__" height="__height__" alt="__alt_description__"></li>
<li><img src="row2image3" width="__width__" height="__height__" alt="__alt_description__"></li>
<li><img src="row2image4" width="__width__" height="__height__" alt="__alt_description__"></li>
</ul>
<ul class="photoAlbum">
<li><img src="row3image1" width="__width__" height="__height__" alt="__alt_description__"></li>
<li><img src="row3image2" width="__width__" height="__height__" alt="__alt_description__"></li>
<li><img src="row3image3" width="__width__" height="__height__" alt="__alt_description__"></li>
<li><img src="row3image4" width="__width__" height="__height__" alt="__alt_description__"></li>
</ul>
</div>
ul.photoAlbum {
display: block;
margin: 0 0 .5em 0;
padding: 0;
}
ul.photoAlbum li {
display: inline;
list-style-type: none;
padding: 0 1em 0 0;
}
ul.photoAlbum li img {
border: none;
}
ul.photoAlbum {
margin: 0 0 1em 0;
padding: 0;
}
provides "gutter" space between the rows. This will give a 1 capital M character spacing as rendered by the browser.
ul.photoAlbum li {
margin: 0;
padding: 0 1em 0 0;
}
provides "gutter" space between the images.
assigning the unordered lists a class, allows for 1 rule to be applied to all three of the rows, thus allowing for faster download, which consequently will mean your images will be shown faster.
I left out the width and height attributes because those will be automatically determined by the size of the images within.
Automating the process
if you would like to automate the process, or in other words make this more dynamic, you can create an array of photo values and auto parse the lists. This would allow you to have more control over how many rows there are and how many images are in each row.
If you have alot of images, you might want to look into a database, which you could than grab out using some server-side language like PHP to create the loop, but this would still be possible with a client-side script like JavaScript using just an array