Web Design in a Nutshell, 2nd Edition

Tips and Tricks

This section provides a few tricks of the trade for working with tables.

<font> and Tables

Unfortunately, placing <font> tags around a table will not affect the font of all the text contained within the table. You need to repeat the <font> tag and its attributes around the content in every cell of the table. For complex tables with lots of cells, the repetitive <font> tags can actually add significantly to the size of the HTML file (not to mention the visual clutter).

Cascading style sheets are the proper and much more efficient way to apply style information to the contents of a table. They result in smaller files and make life much easier when you need to make changes to the design.

Waiting for Tables to Display

Using the basic table tags, the browser must wait until the entire contents of a table have downloaded before it can begin rendering the page. Any text and graphics outside the table display quickly while the browser works on the table.

You can use this phenomenon to your advantage by placing elements you want your viewers to see first outside the table (can anybody say “banner ads”?).

Note that careful use of row and column groups can give the browser enough information to display the contents of the table incrementally, before all the data has downloaded.

Baseline Alignment Trick

If you want to align the first lines of text by their baselines across a row, you should be able to use valign=baseline; in reality, this setting is too unpredictable ...