SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Table Techniques
By Scott Isaacs

We present two quick and dirty HTML table techniques that give you greater control over your layout. We show you how to position contents at the four corners of your screen as well as the center of the page and how to flow your text around other arbitrary text blocks. Both of these approaches do not use any CSS positioning. Instead they are standard HTML tables with carefully set attributes.

Controlling the Corners

With this technique you can position elements at any corner of your screen. This solution is useful when you want complete control over your page when if is intended to fit on the screen. Since it does not use positioning, if the contents do not fit on the screen, the browser automatically adds any needed scrollbars. Click here to see a simple demonstration. The HTML for this demonstration is listed below: 

<BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<TABLE WIDTH=100% HEIGHT=100% CELLSPACING=0 CELLPADDING=2 BORDER=0>
<TR>
<TD VALIGN=TOP ALIGN=LEFT>
  Top Left
</TD><TD WIDTH=100%></TD>
<TD ALIGN=RIGHT VALIGN=TOP>
  Top Right
</TD></TR>
<TR>
<TD COLSPAN=3 align=center>
  Centered
</TD></TR>
<TR>
<TD VALIGN=BOTTOM ALIGN=LEFT>
  Bottom Left
</TD><TD WIDTH=100%></TD>
<TD ALIGN=RIGHT VALIGN=BOTTOM>
  Bottom Right
</TD>
</TR>
</TABLE>
</BODY>

Controlling the Flow

This example takes advantage of the TABLE align property. If you align a table left or right and supply a width on the table, all other content automatically wraps around the table. You can even align one table left immediately followed by a right aligned table and have the remaining contents flow in between the two blocks of text. Click here to see a demonstration of flowing around table blocks. Below is an abbreviated version of the HTML used (view the demos source for the complete HTML): 

<TABLE ALIGN=LEFT BORDER WIDTH=100>
<TR><TD>Information in the Left Box</TD></TR></TABLE>

<TABLE ALIGN=RIGHT BORDER WIDTH=100>
<TR><TD>Information in the right Box</TD></TR></TABLE>
This flows in the middle and then continues to flow beneath two aligned tables.
We can event put text in the bottom and have the text flow back inside
<TABLE ALIGN=LEFT BORDER WIDTH=100>
<TR><TD>Information in the Left Box</TD></TR></TABLE>

<TABLE ALIGN=RIGHT BORDER WIDTH=100>
<TR><TD>Information in the right Box</TD></TR></TABLE>
of the columns. You can create some fancy layouts with standard HTML tables. 
This technique works on both browsers with minor rendering differences.

If you have any other HTML layout tricks, let us know in the Discussion Forums

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.