Tables: Overview

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 HTML 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).

Table Terms

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

Uses of the Table

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.

Tables and Navigation Bars

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.

Assign a different color to each table cell.

Type in your link terms and create hyperlinks to other pages in your web site.

Example:

Personal Home Page

Eng 295 Class

Web Design Center

Borderless tables are even more versatile. You might:

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

Myth

Hercules
Odysseus
Eros and Psyche

Fairy Tales

Snow White
Cinderella
Sleeping Beauty

Fantasy

Alice in Wonderland
Lord of the Rings
Wizard of Earthsea

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.

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, both Microsoft and Netscape interpret table codes in different ways.

Therefore it is especially important for you to preview your pages that contain tables in both Microsoft Internet Explorer and Netscape Navigator.