Liquid Tables

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.html

• Liquid 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:

1. give pixel widths to fixed columns

2. 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.htm

• Flexible Table Manners

  
  www.builder.com/Authoring/  Tagmania/102599/?tag=st.cn.sr1.dir

• Unpredictable Column Widths

  
  www.netmechanic.com/news/vol3/html_no2.htm

• Making 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)