A Template for 'liquid' Table Layout:

(intermediate)
     


'Liquid' tables flow and expand with the size of the open browser window. The dimensions of such a table are set in percentages (relative).

A well-designed liquid page has, generally speaking, at least one or two table cells with a fixed or absolute width (set in pixels), and a relative or flowing cell that expands or contracts without any loss of content and without forcing the viewer to scroll sideways.

In the table below, the area that contains the navbar is coded to an absolute dimension, as are the two cells that mimic 'white space'. The cell that holds the main page content is the only one that is not static.

header here

link 1

link 2

link 3

link 4

link 5

 

texttext text text text texttext text text texttexttext text text text texttext text text text texttext text text texttexttext text text texttexttext text text texttext text text text texttexttext text text texttext text text text texttext text text text texttexttext text text texttexttext text text texttexttext text text texttexttext text text texttexttext text text text texttext text text text texttext text text text texttext text text text

texttext text text texttexttext text text text

 

Copy the code below. Change the width dimensions of the table cells according to your needs.

<TABLE WIDTH="95%" BORDER="0" CELLSPACING="0" CELLPADDING="3" ALIGN="CENTER">

<TR ALIGN="CENTER" BGCOLOR="#99CC33">
<TD COLSPAN="4">header here</TD>
</TR>

<TR>
<TD ALIGN="RIGHT" WIDTH="80" BGCOLOR="#66CC99" VALIGN="TOP">
<P>link 1</P>
<P>link 2</P>
<P >link 3</P>
<P>link 4</P>
<P >link 5</P>
</TD>
<TD WIDTH="20">&nbsp;</TD>

<TD VALIGN="TOP">
<P>texttext text text text texttext text text texttexttext text text
text texttext text text text texttext text text texttexttext text
text texttexttext text text texttext text text text texttexttext
text text texttext text text text texttext text text text texttexttext
text text texttexttext text text texttexttext text text texttexttext
text text texttexttext text text text texttext text text text texttext
text text text texttext text text text</P>
<P>texttext text text texttexttext text text text</P>
</TD>

<TD WIDTH="20">&nbsp;</TD>
</TR>

</TABLE>