The Dual Role Of Tables

Tables can be used to present information in an organized fashion, as in this example:

They can also be used to ensure perfect placement of objects on a page:

In the above case, I wanted to keep all of the Bradys in their proper place in the , so I trapped them in a table that I then rendered invisible (by setting the border width to 0).  

Here's what the same table looks like with the border width set to 1:

Preformatted Table Designs

It's pretty tough to work with the tables in Netscape Editor.  I would suggest that you might want to try one of these preformatted table-based designs.

Creating a table

A window will open that details the options available for a table:

The options available when you create a new table are:

Border Line Width

How thick you want the border line to be.  See the Brady Bunch Grid example above.

Cell Spacing

This is the amount of space you want between cells.  If you are trying to create a "tight" fit between cells, set this to 0.

Cell Spacing;

Cell Padding

This is how much space is added between the walls of a cell and the contents of the cell.

Merging Cells

You can make one cell span several rows or columns to aid with design.  In Netscape Editor, this gets kind of messy and requires some practice.

Let's say that you have a three by three table:

You want three images on each side of a middle column of text.  To do this, you must make the middle three cells one long cell.

The Table Properties window will open and will be directed to the cell properties section.  If it is not, click on the tab marked "cell" at the top of the window.

The resulting table will look something like this:

Close, but no cigar.  We need to "clean up" the extra cells that have been generated to the right.

Changing the background of a cell, row, or table

You can change the background color (or image) in any cell or table.  This can be used to create interesting layouts.

You will find a set of options that is common to the cell, row, and table properties:

Here is an example of a table with different background elements applied:

When we set the borders, cell padding, and cell spacing to 0, the cells become seamless:

You should note that, with Netscape, you must have some content in the cell before any changes to the background will show up.  So, if you want to have an empty cell that has a different background just for design purposes, put a period in it and then color the period the same as the background.

Using an image for the background of a cell or table

Cells can also have images as backgrounds, but Netscape Editor has no easy way of applying this, so you have to edit the HTML.

The tag for a cell is <td>.  Seek out the cell you are looking for by a efining characteristic.  In this case, I am changing the middle cell, so I am looking for the cell that spans 3 rows.

Add in the tag that sets the background image:

©2000 Harry Knight

Certain elements (software titles, search engine logos, etc.) are copyright and/or trademarks of the respective copyright owners.  Use of this material is restricted to educational use and is intended to promote both further understanding of the intellectual property discussed and, in effect, the product itself.