Table Tutor - Lesson 16

Here's a situation where a table can solve a problem. Say you've got this great idea for an animated gif. But the picture you want to use is pretty big. Since you know that an animated gif is basically a series of gifs displayed one after another, you cringe at the size this thing is going to be. Your viewers won't be too happy about a 700Kb clodhopper coming down the pike at them. Not only that, but because of its size, their browser is going to choke trying to display it. One solution? Cut it up and display it as a table.

Here's an example:

Netscape vs. Microsoft?

Artwork by Boris Vallejo

<hr size=1 width="100%" noshade color="#cccccc" align=center>

---

Here is the same table with the cellspacing set to 3.

Netscape vs. Microsoft?

The only part of the picture that is animated are the eyes.

Here is the html code for that table. (The caption is just something I added for my own amusement. It is not required nor does it have any impact on the rest of the table)

 
<table cellspacing="0" cellpadding="0">
<caption align="top">
<font size="6"><b><i>Netscape vs. Microsoft?</i></b></font>
</caption>
 
<tr>
<td rowspan=3><img src="dragon4.gif" width="250" height="406"></td>
<td><img src="dragon3.gif" width="122" height="109"></td>
<td rowspan=3><img src="dragon5.gif" width="219" height="406"></td>
</tr>
 
<tr>
<td><img src="anidrag.gif" width="122" height="50"></td>
</tr>
 
<tr>
<td><img src="dragon2.gif" width="122" height="247"></td>
</tr>
 
</table>

I'm often asked what I used to cut up the above image. I used Paint Shop Pro 3. No, there's no "cutter-upper" button in PSP 3... I did it by hand using the simple select and cut tools.

This is the layout.

FAQ: Why are there spaces in my tables (or between my images)? How can I make image A sit flush up against image B?

A: This is a common problem. What's worse is it sometimes only shows up on certain browsers, thus leading to thoughts that the offending browser may be "faulty". There are a few possible causes and cures, all of which are outlined here.

Well that's about it for the table tags. Used to be that this was the end of the tutorial, but since I cannot stress enough the important role table tags can play in the creation of high quality web pages, I've added a few more examples. Try to reproduce them yourself.

<< BACK