HTML TD Width

WIDTH="width expression"
HEIGHT="height expression"

Welcome to one of the most frustrating attributes in HTML.

The problem lies in the fact that browsers don’t countWIDTHas much more than a strong suggestion, not an absolute rule. That means that browsers often ignoreWIDTHaltogether. First let’s look at howWIDTH is generally supposed to work, then we’ll look at the problems.

WIDTH is supposed to set the width of the table cell. So, for example, the following code where the columns are 200 and 400 wide:

 

<TABLE BORDER>
 <TR> 
    <TD WIDTH=200>watermelon</TD>
    <TD WIDTH=400>Georgia</TD>
 </TR>
 <TR> 
    <TD>apples</TD> 
    <TD>Washington</TD>
 </TR>
 <TR> 
    <TD>blueberries</TD> 
     <TD>New Hampshire</TD>
 </TR>
</TABLE>

which gives us

 

watermelon	Georgia
apples	Washington
blueberries	New Hampshire

You can also use percentages. Be sure to enclose percents in quotes. For example, this code creates a table where the columns should be 80% and 20% wide

 

<TABLE BORDER>
<TR> <TD WIDTH="80%">watermelon</TD> <TD WIDTH="20%">Georgia</TD> </TR>
<TR> <TD>apples</TD> <TD>Washington</TD> </TR>
<TR> <TD>blueberries</TD> <TD>New Hampshire</TD> </TR>
</TABLE>

which gives us

 

watermelon	Georgia
apples	Washington
blueberries	New Hampshire

 

The concept seems simple enough. Unfortunately, until recent versions of Netscape, you had to explicitly set the width of every column in the table or the browser would disregard all width settings. This means that you can’t just set the left column to fit the width of your buttons or background graphic and let the rest of the table fill the remaining width. This is why you’ll often see pages where everything is crowded into the left 640 pixels and there’s a wide empty space on the right.

Netscape also still has problems with percentage widths. The example above still doesn’t work as expected in Netscape… the actual rendered widths are not 80% and 20%.

So how does a web designer work around these problems? There are two school of thought:

Set all widths explicitly

This is the most popular answer to the problem. For every cell in the first row, set every width explicitly. If you also use<TABLE WIDTH="...">then make sure that the cells widths add up to exactly the value of WIDTH. 

Don’t set any widths at all

This is becoming a more popular option. Just let the table itself to whatever width is most appropriate.