| | |
Variable width tables are always created by using percentage values in the WIDTH property of the TABLE tag; this percentage represents some percentage of the browser window. Unless otherwise specified, a table is always aligned left. At 100%, obviously, the table would fill the entire width of the browser window. At lesser percentages, you might want to set the ALIGN attribute of the TABLE tag equal to "center".
Example:
<table border="0" width="90%" align="center"> <tr> <td bgcolor="#99FFFF"> <p>Some Content...</p> </td> </tr> </table>
Displayed:
|
Some Content... |
If you want your variable width table to extend right up to the edge of the browser window, of course, you will need to set the WIDTH attribute of the TABLE tag to 100%, as well as to set the MARGINHEIGHT, MARGINWIDTH, LEFTMARGIN, and TOPMARGIN attributes of the BODY tag equal to 0.
Multiple column variable width tables require special handling. In most ways, you should treat them as you would a fixed width table. There are certain differences to be aware of, however.
Firstly, no column can retain a fixed width. In other words, you can NOT have one column which remains the same size while other columns grow or shrink. All columns will distort to take up some given percentage of the available table width.
To get columns to have SOME stability, you must decide upon a MINIMUM width for each column in the table. As a browser window grows narrower, at some point the table will become too squashed; when is that point? What is the minimum width to which your table may safely collapse?
Once you have decided upon a minimum table width and a minimum width for each column, you must create graphics for each of the cells in the FIRST row of the table; these graphics must define the minimum width of EVERY column. As the browser window widens, the columns will expand proportionally to one another based on the size of the graphics in the first row of the table. In addition, by placing graphics of a certain size in the first row, you will prevent the table from collapsing any single column beyond the width of the graphic in that column.
You may then create the rest of your table, just as you would a fixed width table. 100% graphics layouts beyond the first row, however, are not advisable, as graphics may separate irregularly as the table expands. Most "liquid" tables rely heavily on text for column content, as text is infinitely more malleable and forgiving than graphical content. Remember: graphics can NOT be resized on the fly as the table expands! Experiment, too, with nested tables; I have seen some very interesting effects created with fixed and variable width tables nested within cells of a variable width table.
My home page, http://www.michaelmasumoto.com/, uses some variable width tables to provide stretchy banners between other fixed width table layouts; you might want to look at my code. http://www.amazon.com/ also uses variable width tables to very good effect; their code is not particularly clean or well written, but it demonstrates good variable width table design of the sort I've been talking about.
It is VERY important when experimenting with HTML to test your creations on both Macintosh and Windows computers, preferably on several versions of Netscape Communicator and Internet Explorer. You should even consider testing on AOL (which uses Internet Explorer software versions which are not identical to the regular releases), and Opera. There are significant differences in behavior between Mac and PC (and Linux/UNIX) versions of the same software, let alone different versions of different software. Variable width tables may prove somewhat dicey as far as consistency of appearance goes, so proceed with caution.
In general, as a web professional, you should test your websites using at least Netscape versions 4.0x, 4.5x, 4.7x, and 6, as well as Internet Explorer 4.0x, 4.5, 5.0x, 5.5, etc. You should also test using AOL versions 4, 5, and 6 (if you can), and Opera versions 3.x and 4 (if desired). Most of these browser versions are still available from their respective manufacturers.
You may want to test on multiple sub-version numbers of browsers (say Netscape 4.72 vs. 4.75, etc), as well as main version numbers, as there can be substantial differences even between sub-versions. First versions of major browser revisions (Netscape 4.50 and 4.70 and Internet Explorer 5.00, for instance) are often fatally flawed, so don't worry TOO much about them.
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.