Tables

Now, say you had an image, and you wanted to cut it up and put text around it. How would you align it all correctly? The simplest way would be with a table, because you can make the table itself invisible. An example:

border="1" text goes here

border="0" text goes here

There are two tables above. They are both exactly the same, except the border of the first one is set to 1, and the border of the second is set to 0.

There are four cells in the table. Three contain images, and one contains text. First you'd need to cut up an image in a graphics editor, then you would need to build a table to hold the parts of the image together. This is what the code for the above table looks like:

<table border="0" cellpadding="0" cellspacing="0" width="161" height="123">

<tr>
<td colspan="2" height="62"><img src="tabletop.gif" width="161" height="62"></td>
</tr>

<tr>
<td width="105" height="26">text goes here</td>
<td width="56" height="26"><img src="tablemid.gif" width="56" height="26"></td>
</tr>

<tr>
<td colspan="2" height="35"><img src="tablebot.gif" width="161" height="35"></td>
</tr>

</table>

Now, because there are two columns in the middle row, we put colspan="2" in the top and bottom rows. We also have the height and width of each cell the same as the height and width of the image that is in that cell. This is so there are no gaps between the images.

Using tables with images is also useful if the image is a big one that takes too long to download. Cutting it up into smaller parts will speed up the loading time.

There are also programs that will cut up the image for you, and a few even generate the HTML to put them together in a table. HTML Image Splitter and The Castle's SplitImage are two of them.