adam's html planet - tutorials and tips on how to create websites using html

	Sign In Sign-Up

Table Manners
Back to the Tips n Tricks Page

This page will give you a few pointers on how to use tables in HTML to greater effect. It is not intended as the definitive guide - but should give you some ideas and demonstrate how versatile they are - I wouldn't be without 'em! All the Heading sections of my pages and the Navigation Bars are made using tables

Tables are not only for presenting information that requires a tabular format such as figures. They also have tremendous value for the web designer in overcoming some of the layout limitations of HTML.
With the border attribute set to "0" they can be used to place text or graphics on quite specific points of a page. When you consider the fact that tables can also be 'nested' - a table placed within a cell of another table - you can appreciate the uses to which they can be put.

Some examples

Example 1: A graphic in each corner of the screen and a text heading in the centre - as in a page header without using frames.

I've left the border setting to "1" so that it can be seen more clearly and, in fact, it's a good idea when working with tables to leave the border on until you've got the layout right.

The coding looks like this

<TABLE WIDTH="100%" ALIGN="CENTER" BORDER="1" BORDERCOLOR="#000000">
<TR>
<TD ALIGN="left" VALIGN="top"><img src="../images/frog1.gif" border="0" width="100" height="100"></TD>
<TD ALIGN="center" VALIGN="bottom"><FONT SIZE="+2">Frogs are Cool!</FONT></TD>
<TD ALIGN="right" VALIGN="top"><img src="../images/frog2.gif" border="0" width="100" height="100"></TD>
</TR>
</TABLE>

and it displays like this

Frogs are Cool!

without the border it looks so

Frogs are Cool!

Example 2: Two sides of a page with different content - separated by a vertical line

This is achieved by setting a background colour attribute and a specific width for the middle of three cells. If the content either side is in more than one row then you need to set a 'rowspan' attribute.
I've also used some alignment attributes to show how they might work in this sort of layout

The coding looks like this

<TABLE border="1" width="100%">
<TR>
<TD>Left side - top row contents</TD>
<TD rowspan="3" width="3" bgcolor="black"></TD>
<TD ALIGN="RIGHT">Right side - top row contents</TD>
</TR>
<TR>
<TD ALIGN="CENTER">Left side - middle row contents</TD>
<TD ALIGN="CENTER">Right side - middle row contents</TD>
</TR>
<TR>
<TD ALIGN="RIGHT">Left side - bottom row contents</TD>
<TD ALIGN="LEFT">Right side - bottom row contents</TD>
</TR>
</TABLE>

which displays like this

Left side - top row contents Right side - top row contents
Left side - middle row contents Right side - middle row contents
Left side - bottom row contents Right side - bottom row contents

and without the border ... very difficult to achieve without tables!

Left side - top row contents Right side - top row contents
Left side - middle row contents Right side - middle row contents
Left side - bottom row contents Right side - bottom row contents

Example 3: whatever, whatever, whatever

go up to the top of the page to choose where you go next

Left side - top row contents		Right side - top row contents
Left side - middle row contents		Right side - middle row contents
Left side - bottom row contents		Right side - bottom row contents