EchoEcho.Com : D-Zine : Precision Design

D-Zine - Precision Design :

TABLES

WORKING WITH TABLES

Tables are the most widely used method for laying out web pages.

In this D-zine it is assumed that you have these basics of HTML tables in place. Otherwise visit our tutorial.

Plain tables have default settings for cellspacing and cellpadding. In order to control this space you need to overrule these defaults. This is done with the use of the cellspacing and cellpadding attributes.

The above table will have no spacing between the cells.

Now lets assume that you want a table that has 3 cells. You want 10 pixels space between cell 1 and 2 and 20 pixels space between cell 3 and 4. How can you do that?

You can�t specify a cellspacing for the table since the cellspacing can only hold one value that is used for the entire table. Instead, you can define cellspacing to be zero � then add empty cells wherever you want the spacing.

For example:

<TABLE cellspacing="0" cellpadding="0" border="1">
<TR>
<TD>Column 1</TD>
<TD width="10"></TD>
<TD>Column 2</TD>
<TD width="20"></TD>
<TD>Column 3</TD>
</TR>
</TABLE>

We simply added empty cells as spacers between the cells with content.
Browsers seem to have a tendency to overrule the settings for single cells if the table as a whole does not fit on the page. Therefore we need to prevent the browser from collapsing the empty cells.

This can only be done by adding content to the cells. But how do we add content to a cell that is precisely 10 or 20 pixels wide? Easy! We simply add a transparent GIF image with the desired width and height.

<TABLE cellspacing="0" cellpadding="0" border="1">
<TR>
<TD>Column 1</TD>
<TD width="10"><img src="p.gif" width="10" height="1"></TD>
<TD>Column 2</TD>
<TD width="20"> <img src="p.gif" width="20" height="1"></TD>
<TD>Column 3</TD>
</TR>
</TABLE>

In the above example, we assume that the invisible GIF image is called "p.gif".
If you do not own a 1x1 pixel invisible GIF of your own, you can right click the center of the blue table below and choose "save image" from the menu.

Note: The 1x1 pixel transparent GIF has been stretched to 50x50 pixels to make it easier for you to hit it with your mouse.

THE INVISIBLE GIF TRICK

The invisible GIF trick is one of the most widely used techniques in precision design.

Of course the invisible GIF trick is not just relevant to empty cells. You could also add invisible GIFs to cells with content in order to prevent the browser from shrinking the width.

Assume that you have two images, image1.jpg and image2.jpg, and you want them positioned with exactly 37 pixels between them. Using the invisible p.gif you could do it this way:

Let's assume that you have two tables in a menu, and that you want to have exactly 7 pixels space between the upper and lower table.
You could do it this way:

<table>
<tr><td>THIS IS THE UPPER TABLE</td></tr>
</table>

<img src="p.gif" width="1" height="7"><br>

<table>
<tr><td>THIS IS THE LOWER TABLE</td></tr>
</table>

FAKE BORDERS ON TABLES

It�s really easy to add a border to your tables, all you need to do is add border="5" to the table tag � and the table will have a 5 pixel border.
However, it is rare that you see these plain HTML borders on professional pages these days.

There could be many reasons for this, but one is probably that these plain borders are so widely used on pages with bad design, that they look cheap even when added to well designed pages.

Another reason might be that it�s quite difficult to customize the borders so you end up with a similar look in both Netscape and Microsoft browsers.

Finally � it might be � that the fancy 3 dimensional view of the plain borders just isn't always what the designer wanted.

In any case � a very simple technique for creating "flat" borders is to place a borderless table inside another table.
The outer table will serve as the border � with the border width being the cellpadding of the outer table while the border color is the background color set for the outer table.

Look at this example:

This is the inner table

And the code for it:

<html>
<body>
<table cellspacing="1" cellpadding="0" bgcolor="#000000"><tr><td>

<table bgcolor="#FFCC00">
<tr>
<td>
This is the inner table
</td>
</tr>
</table>

</td></tr></table>
</html>

ADVICE ON NESTED TABLES

As stated above, it is a widely used technique to layout entire pages with invisible tables.
Usually there is an outer table that defines the width of the page as a whole. This outer table is then divided into columns that define the menu and content areas.
Tables that are within tables are called "nested tables".

There are a few things you should keep in mind while doing so:

First:
The browser will not show the table until it knows what is in it. This means that of you have a table that spans over the entire page � then nothing will appear until the entire page is loaded.

The user will end up with the impression that the page loads slow, simply because nothing happens when she jumps to a new page. After 15 seconds �slam! There is the page. Unfortunately 15 seconds feels like a decade when waiting for a web page to load -�so the advice is this:

Make sure to break huge tables wherever you can. That is: end the table and start a new table right under it.

In particular you should layout your pages so that there is a natural horizontal division where the "above the fold" area ends.

If you press reload on this page you can see how we added a table break right under the top navigation menu.

Second:
It is strongly advised that you add comment lines to the tags in your outer table.
An outer table that contains other tables within it will often have several hundred lines of HTML between the <table> and the </table> tags.

Furthermore there might be 50-60 lines between the <td> and </td> tags.

If you don�t help yourself by placing small remarks next to the tags that belong to the outer table it will be almost impossible to keep an overview of the page once you get all the inner tables filled with info.

Below is an example of the outer table being coded with small remarks for easier reading of code:

<html>
<body>
<table cellspacing="1" cellpadding="0" bgcolor="000000"><tr>
<td> 

<table bgcolor="FFCC00" width="100%">
<tr>
<td>
This is an inner table
</td>
</tr>
</table>

</td><td>

<< PREVIOUS