Some Helpful Table Tricks

Although tables were never meant to be used for layout purposes, many will agree that they are one of the most useful tools in our web design arsenal - at least, until stylesheets take over and become universally accepted. Even then, tables will still be useful for certain applications.

Here are a number of useful tricks found while working with tables:

Use TR to save extra code

First of all, you don't need to declare certain attributes in all of your <TD> tags. Instead, just put it in your <TR> tag and all of the cells within that <TR> tag will inherit those attributes. For example:

<TR VALIGN="top" ALIGN="center" BGCOLOR="white">
<TD>Cell 1</TD>
<TD>Cell 2</TD>
</TR>

is the same as:

<TR>
<TD VALIGN="top" ALIGN="center" BGCOLOR="white">Cell 1</TD>
<TD VALIGN="top" ALIGN="center" BGCOLOR="white">Cell 2</TD>
</TR>

Width inheritance

You don't need to declare widths for all of your cells, either. This one is a little more tricky, since Netscape and MSIE render tables slightly differently. I'd suggest only doing this for absolute width tables, where you're declaring widths in pixels. For example:

<TABLE WIDTH="200">
<TR>
<TD WIDTH="100">Cell 1</TD>
<TD WIDTH="100">Cell 2</TD>
</TR>
<TR>
<TD>Cell 3</TD>
<TD>Cell 4</TD>
</TR>
</TABLE>

is the same as:

<TABLE WIDTH="200">
<TR>
<TD WIDTH="100">Cell 1</TD>
<TD WIDTH="100">Cell 2</TD>
</TR>
<TR>
<TD WIDTH="100">Cell 3</TD>
<TD WIDTH="100">Cell 4</TD>
</TR>
</TABLE>

If your cell widths aren't working out correctly, just throw in a transparent .gif set to the needed width, and it will force the cell open.

Don't ignore the defaults

The normal defaults are: ALIGN=left, VALIGN=middle, BGCOLOR=the background color of the page. In other words, there's no need to put ALIGN="left" in your <TD> tag, since it will default to that. Don't waste your time and the users' with unnecessary code.

Watch it with the nested tables!

Avoid nesting more than 3 tables. Of course, this number depends on the complexity and size of each of the tables, but the more nested tables you have, the longer it'll take the browser to render the table; not to mention the fact that all of that code will be harder to read. Also, if you're nested tables aren't rendering, it's a safe bet that you're missing a closing tag somewhere (eg, Netscape won't render a table at all if you forgot the </table>. If a browser can't render an internal table, it can't render the surrounding tables and you'll just get a messed up layout.

Right aligned text in a cell

If you've got text aligned right within a <TD> tag, and you notice a little space after the last character, just add a <br> tag. this will force a carriage return and make the text flush right.

Tables are the chief cause of bloat in most HTML documents, simply because a lot of people think you need to declare everything, when you don't have to. If your pages are taking a long time to render, check them and see if you can take out some of the unneeded code. This is why it pays to code pages by hand, because all of the HTML editors I've worked with will insert _every_ single tag and attribute.

If you have any more table tips, please add a comment below. :)