tutorials : tables

Lesson 1.3 : Piecing Together Images

So, what do you do when you pick up some linkware, but one of the images is actaully several different pieces that need to be put together to make one image?

The image above is an example of something like this. You see, the guestbook image is actually three smaller images pieced together in a table to make one large image. Below you'll see what it would look like as separate images.

 

Obviously the problem here is how to seamlessly put these three together to make one. As with everything we have done in this lesson, this is done with a table.

You see. It's a table with one row and three colums, the only diffrence with this table is that we have to define the cell padding and cell spacing so that there is no space between the cells and our pieces fit together seamlessly.

<table border="0" cellspacing="0" cellpadding="0" align="center" width="203">
<tr>
<td><img src="sign.gif" width="51" height="112"></td>
<td><img src="guestmid.gif" width="93" height="112"></td>
<td><img src="view.gif" width="59" height="112"></td>
</tr>
</table>

See the part of the code that is in black? That's where you define that you want no spacing what so ever in your table. That allows you to put your pieces together seamlessly.

With this knowledge you can do almost anything with a table. Good luck, and have fun!