Real World Tables Introduction

Most professional page layouts using tables are built around outwardly simple column structures, using one, two, or three main columns. Here is a very simple three column table, with filler content in each cell:

<table width="500">
<tr>
<td valign="top">
<!-- Begin Left Column -->

<h2 align="center">Left Column</h2>
<p>Left column text, which goes on and on, filling up the cell with information.</p>

<!-- End Left Column -->
</td>
<td valign="top">
<!-- Begin Main Area -->

<h1 align="center">Main Area</h1>
<p>Main area text, which goes on and on, filling up the cell with information.</p>

<!-- End Main Area -->:
</td>
<td valign="top">
<!-- Begin Right Column -->

<h2 align="center">Right Column</h2>
<p>Right column text, which goes on and on, filling up the cell with information.</p>

<!-- End Right Column -->
</td>
</tr>
</table>

Here's the way that table looks:

Left Column

Left column text, which goes on and on, filling up the cell with information.

Main Area

Main area text, which goes on and on, filling up the cell with information.

Right Column

Right column text, which goes on and on, filling up the cell with information.

This oversimplified layout should give you a general feeling for the basic manner in which professional tables are constructed; one cell for each column in the layout. Real world tables, of course, are much more complex than this one. For an example, take a look at this template for one of the sub-areas in the 1999 Beatnik website, which I programmed. Feel free to analyze the code at your leisure, if you wish; I'm going to cover the salient points of its construction, in a general way, in the following sections.

Main Menu