The ultimate quest for control over space on the Web involves using tables to place images in creative and original ways. Some of the challanges we run into include...

• Avoiding unwanted space around images in nested tables;
• Creating invisible and visible separation between elements in a Web page;
• Using gutters, shims, spacers, and margins;
• Using tables and shims to create precisely sized Web page elements;
• Using tables and images to create the appearance of curved and non-rectangular components.
• Overcoming differences in the way browsers render images in tables;

These are the topics to explore and experiment with in this module.

In addition to the HTML terms and concepts, design borrows words and ideas from printing and carpentry that we need to know:

• Gutter: Vertical white-space between columns of text and/or images.
• Shim: Small invisible image that serves as a wedge to force browsers to provide a certain minimum amount of space, either vertically or horizontally.
• Spacer: Any element used to create space between other elements.
• Margin: Empty space around the edges of elements, especially of pages.

Creating space between elements on Web pages can be done in several ways. The following involve using tables:

• Adding empty columns or rows of tables;
• Inserting new, empty tables to control width;
• Inserting colored rows, cells, or tables to produce lines of precise thickness;
• Inserting decorative separator images;
• Inserting "shims" - invisible images with precise width and height specifications.

Nobody likes feeling "boxed in", and that certainly includes Web designers. Techniques for avoiding a "boxy" appearance usually involve creating images with curved edges on transparent backgrounds. It's also possible to create non-rectangular effects by creating non-rectangular images, again with transparent backgrounds - and slicing them along rectangular lines so they can be distributed artistically in tables.

Example: Curved Edges

One popular non-rectangular effect is the "tab", designed to look like the curved tab on a file folder. Here's an image created to look like a tab. It was created on a transparent background and saved as a GIF:

The the image - like all images - is rectangular, the transparent parts give it the impression of being rounded. The same image is shown against three background colors to illustrate that its background is transparent.

Tabs are usually used as menu headers. Here's a brief illustration of how a menu would look dropped down under this tab. To keep the example brief, we're representing the whole menu with only one item, and it doesn't illustrate the code required to make the menu "drop down" from the tab.

Browser View
Code View
<tr valign="bottom"> <!-- No border for image --> <td><img alt="About" border="0" height="29" src="w24g_f01.gif" width="133" /></td> </tr> <!-- This row for first menu item, aligned to stay with image --> <tr valign="top"> <td> <!-- This table produces 1-pixel border --> <table bgcolor="#ffcc00" width="133" cellpadding="1" cellspacing="0" border="0"> <tr> <td width="100%"> <!-- This table holds top menu item --> <table bgcolor="#ffffff" border="0" cellpadding="4" cellspacing="0" width="100%"> <tr> <td bgcolor="#ffffff" valign="top" width="100%" align="center"> Location </td> </tr> </table> </td> </tr> </table> </td> </tr> <!-- Add more rows with double tables here for more menu items --> </table>

Example: Triangular Logo

Suppose you are given this logo to put in a page for a client.

How can you make a large enough rendition of it without wasting space on the Web page?

Notice how the space on the lower right side of the logo remains blank, even though the background shows through. That's because the image is rectangular, even though it appears to be a triangle.

The solution is to divide the image into four smaller rectangles, each of which can be put into a separate table. That will allow most of the unused area to be put to good use.

Slicing images is relatively easy with tools like Macromedia Fireworks and Adobe ImageReady. I used Fireworks for this example, and threw away the empty lower right quarter of the image. Instead, I put in some lines of text as headings for the page.

If I had intended to make a real page I would have extended the table to have more rows and columns, and put partial images in the transparent parts of the upper right and lower left quadrants as well.

It's important to make your code easy to read, and one of the best ways to do that is to put plenty of space - both horizontal and vertical - around elements of your code. However, spaces and lines in your code can cause problems in certain circumstances and in some browsers.

In this example, we're put our image tag on a separate line (in bold). The screen shots show the effect in three different browsers:

<table width="133" cellpadding="0" cellspacing="0" border="0"> <tr valign="bottom"> <td> <img alt="About" border="0" height="29" src="w24g_f01.gif" width="133" /> </td> </tr> <tr valign="top"> <td> <table bgcolor="#ffcc00" width="133" cellpadding="1" cellspacing="0" border="0"> <tr> <td width="100%"> <table bgcolor="#ffffff" border="0" cellpadding="4" cellspacing="0" width="100%"> <tr> <td bgcolor="#ffffff" valign="top" width="100%" align="center"> Location </td> </tr> </table> </td> </tr> </table> </td> </tr> </table>

Opera 6.0 Rendering: Looks as intended

Netscape 4.7 Rendering: gap appears between graphic and menu

Internet Explorer 6.0 Rendering: also has a gap

The intention was to have the menu item(s) appear as a part of the tab image. Although one browser renders it as intended, the others shown here introduce a gap, which is the result of the whitespace around the image tag. The solution is to remove the whitespace, restoring the code to the way it was in the previous example.

Overcoming differences in the way browsers render images in tables...