Table Tips and Tricks

• Experiment! Don't be afraid to add other HTML Tags inside the table, such as links, font size/color, images, alignment, widths/heights, column/row spanning, colors, nested tables, borders, etc.
• Don't use pixel widths unless absolutely necessary, use percentages. People will be accessing your site with different screen resolutions. A 600 wide table would look OK on a 640x480 screen, but not as you intended on a 1280x1024 screen.
• Set border, cellpadding, and cellspacing all to 0 for the tightest tables, or tables with images that have only cell animated. This gives the impression of one big image but the loading speed is as fast as possible.
• If you switch between a text editor and a browser when adding and modifying Tables, the number one key is to write the HTML in a logical, separated manner. This will help you to catch problems and save time.
• This is a table I did for a client. This Table would've caused many headaches if I didn't lay it out in a separated manner.

<table border="1" cellpadding="0" cellspacing="1"><tr><td align="center"><a href="ndbpull.htmll" TARGET="_top">New Search</a></td><td align="center" colspan="8"><img src="nucoreds.gif" align="bottom" width="387" height="34"></td><td align="center"><a href="index.htmll" TARGET="_top">Nupor Home</a></td></tr><tr><td width="95">Description</td><td width="34">Grade</td><td width="42">Coating</td><td width="53">Keg Quan.</td><td width="72">Quantity Available Indiana</td><td width="72">Quantity Available Arkansas</td><td width="36">Next Order Date Ind.</td><td width="70">Next Shop Order Quantity Indiana</td><td width="35">Next Order Date Ark.</td><td width="80">Next Shop Order Quantity Arkansas</td></tr></table>

Looks like fun if you have to modify it, right?
No?
Try a layout like this:

<table border="1" cellpadding="0" cellspacing="1">
<tr>
 <td align="center">
  <a href="ndbpull.htmll" TARGET="_top">New Search</a></td>
 <td align="center" colspan="8">
  <img src	= "nucoreds.gif" 
  	align	= "bottom" 
	width	= "387"
	height	= "34"></td>
 <td align="center">
    <a href="index.htmll" TARGET="_top">Nupor Home</a></td>
</tr>
<tr>
 <td width="95">Description</td>
 <td width="34">Grade</td>
 <td width="42">Coating</td>
 <td width="53">Keg Quan.</td>
 <td width="72">Quantity Available Indiana</td>
 <td width="72">Quantity Available Arkansas</td>
 <td width="36">Next Order Date Ind.</td>
 <td width="70">Next Shop Order Quantity Indiana</td>
 <td width="35">Next Order Date Ark.</td>
 <td width="80">Next Shop Order Quantity Arkansas</td>
</tr>
</table>

Which do you prefer?

• Remember, only people browsing your site will be able to see the Tables as you designed them, this of course excludes Netscape and the other browsers. Netscape may however support these at any time as future versions "keep up" with Explorer. The sure-fire method of testing this is simply to view your site with as many browsers as possible, at minimum Netscape and Explorer.
• Font control must be done inside the Table Cells, for example, this will not work:

<strong><font size="2">
<table border="1" cellpadding="0" cellspacing="1">
<tr>
<td>Description</td>
<td>Grade</td>
<td>Coating</td>
<td>Keg Quan.</td>
<td>Quantity Indiana</td>
<td>Quantity Arkansas</td>
<td>Next Order Date IN</td>
<td>Next Shop Order Qty</td>
<td>Next Order Date AK</td>
<td>Next Shop Order Qty</td>
</tr>
</table>
</font></strong>

You'll have to specify <FONT> and <STRONG> in each cell, like this:

<strong><font size="2">
<table border="1" cellpadding="0" cellspacing="1">
<tr>
<td><strong><font size="2">Description</font></strong></td>
[...]
<td><strong><font size="2">Next Shop Order Qty</font></strong></td>
</tr>
</table>
</font></strong>