Overview

Tables are the key to successful web page design; as a way to affect layout they are much more useful and versatile than frames.

Tables are:

• accessible to all graphical browsers
• easier than frames to create and control
• easier than frames to navigate to and from
• easier than frames to copy and print

You will want to use tables when you present content in a grid.

But the power of tables is more obvious when you eliminate the table borders.You can use tables to align text in columns.You can use tables to force the browser to align text and images the way you want them to appear on a page.

You can exert even more control on your layout with nested tables (i.e., tables within tables).

Here are some common table terms:

• table: the entire table
• table border: the line around the entire table
• cell: the smallest individual cross section of a table
• cell border: the line around a particular table cell
• table row:  a horizontal group of cells
• table column:  a vertical group of cells
• cell spacing: the width of the border between table cells
• cell padding: the amount of white space around the data within each cell
• table data: the content of a particular cell

You can easily think of many ways to use a table on a web page.

• You can use a table to create a calendar or a weekly or monthly schedule.
• You can use a table to simulate the look of newspaper columns; simply code a table with one row and two or more columns. Enter the text for each column in a single cell. The cell will expand downward to accommodate the text.

Web developers often use tables to organize their navigation bars.  Here is the easiest way to turn a table into a nav bar:

• Create a one-row table with or without a border.
• If you wish, assign a different color to each table cell.
• Type in your link terms and create hyperlinks to other pages in your web site.

Example:

• Use a borderless table to align lists.
• Create a borderless table of internal links at the top of a web page to help the reader browse through a long document

Example:

More importantly, you can use borderless tables to help you align text and graphics on your page.  By placing text in one table cell and a graphic in another, you can exert more control over your layout than you would with the ALIGN attribute in the IMG SRC tag.

You can also use borderless tables to force margins around your web page.

I generally create a one-cell borderless table and set the width at about 90-95% of the monitor screen. Then I center the table. I will often put a table within this table to better control my layout.

When you are using tables to force a particular layout, you will need to tinker with your file by adjusting the table and cell properties.

Save and preview the file after every adjustment.

Unfortunately, different browsers and even different versions of the same browser often interpret table codes in different ways. 

Therefore it is especially important for you to preview your pages that contain tables in more than one browser.

Web Design Center
Mozilla Composer Tutorials
© Agatha Taormina
Last Revised: October 2, 2006