|
HTML Tip:
Unpredictable Column Widths
by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.
Have you ever wasted time wrestling with an HTML table, trying to set column widths the way you want? That can be a real headache under Netscape Navigator, because Netscape interprets WIDTH attributes differently than you might think.
Life with HTML means working with tables. Until all browsers comply with 100% of the Cascading Style Sheet specification, tables will remain the only reliable way to control the layout of your page.
We use the term "reliable" loosely here, because tables cause more frustration than perhaps any other part of HTML. Probably the most common problem is the unpredictable nature of table column widths. You define a table with a series of columns, setting the WIDTH attribute for your TABLE and TD tags. But when you view the table under Netscape Navigator, the column widths aren't what you wanted at all.
To understand the problem, take a look at this code for a simple table:
<table border=1 cellspacing=0
cellpadding=0 width=300>
<tr>
<td width=100> cell 1</td>
<td width=100> cell 2</td>
<td> cell 3</td>
</tr>
</table>
|
This should create a 300 pixel-wide, three-column table. We've explicitly set the width of the first two columns to 100 pixels each. Since these two columns together take up 200 pixels, the third column should end up being 100 pixels wide, right? Well, it won't work that way under Navigator.
Figure 1 shows our table as rendered by Microsoft Internet Explorer 5.0. MSIE sets the width of all three columns to 100 pixels, as you would expect.
|
|
Figure 1 - Table Viewed Under MSIE 5.0
|
Now look at Figure 2, which shows our table as rendered by Netscape Navigator 4.02. The results are three unbalanced columns, not at all what you'd expect.
|
|
Figure 2 - Table Viewed Under NN 4.02
|
The reason for this is that Netscape interprets the TD WIDTH attribute as the minimum width of the table column; the cell's actual width is determined by a complex algorithm. Though we've tried repeatedly to reverse engineer this algorithm, the results are…well, unpredictable.
The bottom line: you can't trust Netscape's column width algorithm.
To get predictable column width, you have three options:
- Set the width of every column in your table, but don't set width inside your TABLE tag.
- Set the overall table width inside your TABLE tag, but don't set the width of any columns.
- Use a transparent image to force the width of each of your columns.
|
The last of these approaches requires you to put an invisible GIF inside each column, with the image's WIDTH attribute set to whatever minimum column width with you want. This is an interesting technique, and next month we'll show you how to use it to set a "wildcard" column width.
|
