Question: How do you use a table to line up images like a "jigsaw" puzzle?
Answer:
If you have a large image that you want to display, or perhaps have an image map on part of it, you can cut the image into pieces and then put them together on the Web page using a table.
Make sure that you set the table width and height to exactly the same size as the final image and the cellspacing and padding to 0. Plus you'll want to set the border to 0. Here is some sample HTML that will create a picture of my cat from four separate images:
<table border="0" cellpadding="0" cellspacing="0" width="161" align="right">
<tr>
<td style="font-size : 10pt;" align="right">
<img src="http://webdesign.about.com/library/graphics/mali1.gif" width="82" height="85" vspace="0" hspace="0"></td>
<td style="font-size : 10pt;">
<img src="http://webdesign.about.com/library/graphics/mali2.gif" alt="Malika -- image courtesy Jennifer Kyrnin" width="79" height="85" vspace="0" hspace="0" alt="Malika -- image courtesy Jennifer Kyrnin"></td>
</tr>
<tr>
<td style="font-size : 10pt;" align="right">
<img src="http://webdesign.about.com/library/graphics/mali3.gif" width="84" height="70" vspace="0" hspace="0" alt="Malika -- image courtesy Jennifer Kyrnin"></td>
<td style="font-size : 10pt;">
<img src="http://webdesign.about.com/library/graphics/mali4.gif" width="77" height="70" vspace="0" hspace="0" alt="Malika -- image courtesy Jennifer Kyrnin"></td>
</tr>
</table>
