Using tables to
achieve advanced
new layout effects

One of the most useful and impressive extensions devised by Netscape was tables. As you would expect, these allow you to include conventional tables of information in your web pages, but they also serve another - far more vital - purpose: the ability to create columns and advanced page layouts. In fact, until style sheets are fully and properly supported by browsers, tables are still the only layout tool available to web page designers, and virtually all current web pages use them. Most pages, including this one, are in fact giant tables, with the table cells being entire areas of the page. Tables can be nested many levels deep. An example of page layout, based in this page's design, is given towards the end of this section of the guide.

Tables were ratified as part of the HTML 3.2 standard, and the techniques described here work all modern browsers, except Lynx of course. Since this part of the guide was written, HTML 4.0 has been made the new standard, and it contains an totally new table model. However, this is not even remotely supported by Netscape 4x, and the older table model is still by far the safest and most popular, so we have made no attempt to update this page yet, and it still describes the original model.

Because of their versatility, tables are slightly more complex to define than anything you've seen previously, but with a little practice, you'll soon be producing smart results. This section covers the basics with some examples.

<table> . . . </table>

This pair of tags defines that a table is being created. They must always enclose the entire chunk of HTML which represents the table. The tags pinpoints the beginning and end of the table to the browser, and all markup tags in between will be interpreted as part of the table. Do not try to include standard text within a table block, except inside table cells themselves (see next item)!

<tr> . . </tr>
<td> . . </td>
<th> . . </th>

The <tr> and <td> tags define table rows and cell entries. Within the <table> block, you can have as many pairs of <tr> tags as you want, and each pair will be rendered as a row within the table. Then, within each row block, you have as many pairs of <td> tags as you want: this will define the number of columns, and thus you must keep the same number within each row block! Anything you insert between the <td> tags will become the contents of an individual cell within the table. The <th> tag is an alternative to <td>, but produces bold text centered within the cell, and thus is useful for traditional table headings. This is best illustrated by a simple example of a data table:

<table border="2" bgcolor="#99CC99">
<tr>
<th>Header</th>
<td>COLUMN 2</td>
</tr>
<tr>
<td>One Cell</td>
<td>Another Cell</td>
</tr>
<tr>
<td>Last Row</td>
<td>Final Cell</td>
</tr>
</table>

There are quite a number of table attributes, which give you excellent control over the presentation of your tables. These are all implemented in Netscape and Internet Explorer, though these browsers have other nonstandard attributes too. The following attributes should all be placed within the <table> tag, and you can of course include as many as you want at once. Here's a list of the most common ones you'll need for normal presentation:

Similarly, there are lots of attributes which can be placed within the tags <tr> and <td>, in order to give you control over individual rows and cells within your table. Here are the most common attributes:

As stated before, almost all modern web pages use advanced table layout techniques to offer control their overall presentation. It's very common to see information and pictures neatly aligned against invisible vertical lines, or chunks of text positioned all over the place, with no obvious clue as to how it was done. The answer is simple: almost all of these effects can be produced using tables in specilised ways. This very guide features plenty of these techniques, as you should be able to see. The simplest example to start with is the creation of simple columns. To do this, simply use tables with particular attributes, in the way shown below. Modifying this basic syntax allows you to create any number and size of columns:

<table cols="2" border="0" cellspacing="5">
<tr valign="top">
<td width="50%"> . . . </td>
<td width="50%"> . . . </td>
</tr>
</table>

Remember that when using columns, all specified HTML effects will take place within the context of their own column only, rather than the entire browser window. For example, <hr> lines will only span the current column, and align=right attributes will align items to the right of the column, not the entire window. In effect, each column becomes an independent working space, within which you're arranging your information. The previous section of code could have been expanded to include another row, and this row could have had three columns of differing relative widths. This is the essence of nesting: you can have a giant table laying out the whole page, and within each cell of that table, further tables laying out their own areas. To achieve a certain effect, you might need quite a complex nested table structure, and it's easy to get confused, so go slowly as you're developing such pages!

For a more interesting example, let's take a look at how this very page is structured using tables. Because we wanted the upper and lower link sets to be in a column of their own, and a split column at that, we had to create a table with multiple rows and columns, but with one giant cell (the main body of the page text) that spanned two rows. Below, we've presented the outline code for the table structure of this page (with comments in green), along with a diagram highlighting the structure for you, with each cell in a different colour:

<table width="100%" border="0">

<tr>
<td> </td>
<td width="85%" align="right">
insert the logo (aligned RIGHT)
</td>
</tr>

<tr>
<td width="15%" valign="top">
upper links (vertically aligned TOP)
</td>

<td rowspan="2" width="85%" valign="top">
main body of the page occupies
this cell, which spans two rows,
and thus effectively occupies
the right cell of the NEXT row
</td>
</tr>

<tr>
<td valign="bottom">
lower links (vertically aligned BOTTOM)
occupy the ONLY cell in a new row,
because the right cell is already taken 
</td>
</tr>
</table>

footer and credits are added
at the bottom, outside the
page's layout table

So now the secret is out, and you can see that the flexibility is enormous. In theory, you'll be able to lay out your information almost exactly as you please, using just a small number of HTML elements, and probably quite a lot of testing as you go along! Indeed, it is hard to include further useful examples on this, so the best way to learn is to experiment yourself, or to go hunting for more comprehensive documentation on using tables and columns. The pointers in the "More Help" section will help you. Alternatively, look at the source of this document to see some relatively simple table layout in action.

<caption align="position"> . . . </caption>

Finally, this adds a name or title to a table, which is clearly more useful for "traditional" data tables, rather than those used to layout an entire page! By using top or bottom with the align attribute, you can put the title above or below the table itself. Caption text is automatically rendered in bold type, and centered horizontally with the table.