If you use 'float' then the number of images per row will change depending on the width of the device's screen.
Code:
css:
img {float:left; height:240px; width:160px; padding:5px}
<div>
<img alt="" src="../Images/1.jpg"/>
<img alt="" src="../Images/2.jpg"/>
<img alt="" src="../Images/3.jpg"/>
<img alt="" src="../Images/4.jpg"/>
<img alt="" src="../Images/5.jpg"/>
<img alt="" src="../Images/6.jpg"/>
<img alt="" src="../Images/7.jpg"/>
<img alt="" src="../Images/8.jpg"/>
</div>
If you wish to add text between images, then insert the image tag inside the paragraph:
Code:
css:
img {float:left; height:240px; width:160px; padding:5px}
<p><img alt="" src="../Images/1.jpg"/> Take two deep breaths....</p>
You can certainly use a table to place images exactly where you want, but I don't recommend it. There are too many issues with getting tables to work, and look, right on all the different sized screens.
Cheers,