Table Trouble And Table Tips

By John Pollock
Posted Sunday, May 12, 2002

Trouble with tables? Here are some common table issues, and some possible solutions for these situations when they arise.

Disappearing Tables

If you load your site and get blank space instead of your table, the first thing you'll want to look for is a missing </TABLE>, </TD>, or </TR> tag in your table code. Leaving these out can cause various problems, including the "disappearing table". If you find one missing, add it in and reload. If it still is not there, check for more. Hopefully once you have found them all your table will be visible again.

Unknown Space

If you seem to have lots of space for no reason, look for <BR> or <P> tags that may be in places you did not want them. Watch out for these outside of <TD></TD> tags, as they can cause weird spacing problems. So, avoid structures like this:

<BR>
<TR>
<TD>Write words etc.</TD>
<BR>
<TD>More content</TD>
<BR>

You'll notice there that the <BR> tags are in places they should not be for the table to work properly. To make the new table row, use only the <TR> and no <BR> tags. To break the content within a cell, be sure the <BR> is between the <TD> and </TD> tags and not outside of them.

Nesting Tables

Another thing to remember is to try and nest your tables (one table within another) as little as possible to avoid potential errors. The more you nest tables, the harder it is to find an error when you have problems. When you do need to nest your tables, try to use indentions to your favor so you will have an easier time when you look at the code. One option that may help is to indent a number of spaces each time you nest a new table, something like this:

<TABLE>
<TR>
<TD>
<TABLE>
<TR>
<TD>Content words etc.</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

This way, you can see both the inner and outer table more easily, and be able to discover problems more quickly.

Spacing Trouble

If your table shows up with too much spacing around the edges, try checking your cellspacing and cellpadding attributes with your <TABLE> tag. If you want no space around your table contents, both of these must be set to zero. The default leaves space there, so they must be set to zero rather than left alone.

Check them out, especially if you nest tables. You may have to do quite a bit of tinkering to get the spacing you want, including more nesting!

Percentages vs. Pixels

This topic alone has sparked many heated discussions on internet discussion lists and forums. Both have their advantages and drawbacks, so you'll need to consider them when designing your tables and your web site.

Tables defined with a percentage will expand and contract with the browser at different resolutions, or if the viewer changes the size of the browser window. These are often used on pages or sections containing mostly text, which may not need precise formatting. The advantage here is that you can fill the screen no matter what its size, so you don't have to worry about blank space. Also, when a browser is opened in a really small window, the viewer may still be able to read your text (depending on your layout). On the other hand, percentages can be risky as they may look bad in really high or low screen widths. If you use this method, be sure to test with as many widths as you can to ensure everything looks how you want it to appear. Also, you have to be careful using images and horizontal rules, as they can cause the table to expand beyond the percentage you set if they are too long in width.

Tables defined with a set pixel width will remain at that width no matter what the viewer does to the screen. In this way, you will know what your table looks like on all screen widths. On the bad side, you leave lots of blank space for those at high resolutions, or you may end up giving the dreaded horizontal scroll bars to those with smaller screen widths. Often these are set at about 600 pixels so those with 640x480 can view the page with a maximized browser. This keeps the page viewable for most everyone, but can leave blank space on one or both sides at high resolutions.

Yet There Still Could Be More

There are numerous other issues and potential problems with tables, but it is almost impossible to cover them all at once. Hopefully these tips and bits of information will help you get the most out of your tables until a sequel or two can be written!