Main Page Content
Liquid Tables
Rated 4.17 (Ratings: 15) (Add your rating)
Log in to add a comment
(12 comments so far)
Want more?
- More articles in Site Development
- More articles by r937
rudy limeback
User since: December 13, 1998
Last login: July 10, 2007
Articles written: 12
How do you make a web page that looks good no matter how wide the browser window is? Use liquid tables, a technique that lets you "pour" your content into the page so that it flows to the margins, even if the window is resized.
Wait a sec, doesn't the good old HTML <p> tag allow content to flow? Yes, but the problem is, you often need parts of the page to remain fixed, such as a navigation bar down one side. The challenge is to have both a fixed and a flexible portion of the page. This is where liquid tables will help you.
Let's start with some definitions:
ice: fixed width
jello: somewhat flexible, often centered
liquid: flexible width
Here are a couple of good explanations of the basic differences between these three techniques:
ice, jello, and liquid
http://whatis.techtarget.com/
WhatIs_Definition_Page/0,4152,212307,00.htmlLiquid Web Design: Build it right and it will work no matter what the container
http://www.digital-web.com/ tutorials/tutorial_1999-10.shtml
The problem with an "ice" design, which might use a fixed table width of, say, 600 pixels, is that if the browser window is narrower than 600, you get a horizontal scrollbar, and if the browser window is very much wider than 600, you get a lot of white space.
One type of "jello" design also uses a fixed width table, but centered in the window -- this looks somewhat better when the browser window is substantially wider than the table. Another type uses a table that is a certain percentage of the browser window, say 80%. This allows the table to expand or contract depending on the width of the browser window, and it minimizes the amount of white space at all widths. But it doesn't allow for a fixed portion, that stays fixed -- for that, you need to use a liquid table.
The general approach to creating a liquid table is this:
give pixel widths to fixed columns
give percentage widths to liquid columns
However, you may still run into problems. Some browsers will disregard the pixel widths and try to "balance" the widths of the columns. Therefore you need some way to "force" the liquid columns to expand as much as possible.
Let's take a look at some techniques. The following resources give detailed explanations for how to build liquid tables:
Simply - Liquid Tables
www.kallback.co.za/simply/float.htmFlexible Table Manners
www.builder.com/Authoring/ Tagmania/102599/?tag=st.cn.sr1.dirUnpredictable Column Widths
www.netmechanic.com/news/vol3/html_no2.htmMaking a Wild Card Column Width
www.netmechanic.com/news/vol3/html_no3.htm
Note that one of the resources suggests that you not specify a percentage width for the table. Does this work? Yup, but it assumes the liquid column has enough content to push the table out to the window margins, otherwise the fixed column tends to expand beyond its specified pixel width. Remember, browsers regard column widths only as a recommendation, usually a minimum. And they will happily override the stated width if necessary, and make the fixed column either narrower or wider.
Another approach does not use percentage widths for the liquid columns, but rather an "absurd" fixed column width such as 2000 pixels. This forces the liquid column to "squeeze" the fixed column, thereby keeping it to its minimum width. This technique assumes a table percentage width, which most browsers (Opera is an exception) will honour -- specifying width=100% for the table will "override" the absurdly large column width. This technique probably dates back to HTML 3.2 when percentages were not allowed on columns -- see the W3C HTML 3.2 table specs. Percentages for columns are valid in the HTML 4 table specs, so it now makes sense to give the liquid column a cell width of 90% or 100%. But be warned that older browsers may disregard these percentages if they were written for HTML 3.2.
In either case you will probably need to ensure that the fixed columns do not get squeezed narrower than their minimum pixel widths, and the most reliable way seems to be to use a transparent spacer gif.
Finally, with a truly liquid table, you will still have the problem of long lines of text at very wide window widths. One way to deal with this is to use a table width of less than 100% -- say 80%. This does not eliminate the problem of long lines of text, it just reduces it.
The bottom line on liquid tables is that you have to test your design. Create a test page like this one --
Flexible Table test
www.sam-i-am.com/misc/TestSuite/tables/flexible_width.html
Test your design in several browsers. Test it at different resolutions. Resize the window. Try to break the design. Bump your fonts up a few notches. Ask for a site critique on your favourite web developer discusion list.
And don't forget to have fun. ;o)
