Attributes for <TD ...>
WIDTH = "width expression"
HEIGHT = "height expression"
Welcome to one of the most frustrating attributes in HTML. Because of limitations in Netscape,
WIDTH has provoked more ugly code and contorted pages than any other element in the language.
The problem lies in the fact that browsers don't count WIDTH as much more than a strong suggestion, not an absolute rule. That means that browsers often ignore WIDTH altogether. First let's look at how WIDTH 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.
