Using Tables for Web Page Layout

by Janette B. Bradley
axsWave Software, Inc.™

Design is Communication--Not Decoration

Graphic design of a web site is the visual equivalent of a jigsaw puzzle.

Tables allow you to lay your puzzle out in a set of defined and consistent grids.

Never design pages in a multi-page site as single pages. Your visitors see them as part of the whole site and significant departures from a consistent style can leave visitors confused and lost.

Use grids to organize the page's content

Grid are an essential part of effective web design.

Tables in HTML allow for specific placing of text, headings and artwork to match the grid design you have developed.

Use the same grid or set of grids throughout your site.

Consistent grid use can help the user navigate more effectively

Tables allow your to "chunk" text on a web page

Beware of using columns that are too narrow

Readers scan groups of words rather than individual letters

Narrow columns cause reading difficulties because they require the reader's eyes to shift to the next line more often.

Beware of using columns that are too wide

Wide columns make it difficult for the reader's eyes to make a smooth transition from the end of one line to the beginning of the next without getting lost.

Not all columns have to be the same width

Varying column widths can add interest to your design

But, keep your overall grid in mind when creating columns of varying widths

Use Table Width, Border, Cell Spacing and Cell Padding definitions in your table tags to provide enough white space.

Width can be in percentage terms, where the table will resize to the browser window

TABLE WIDTH="100%" BORDER="1" CELLSPACING="1" CELLPADDING="1"

Cell 1	Cell 2
Cell 3	Cell 4

It is best for design to get in the habit of defining of your table exactly using pixels

TABLE WIDTH="200" BORDER="1" CELLSPACING="1" CELLPADDING="1"

Cell 1	Cell 2
Cell 3	Cell 4

Use the spacing, padding and border tags to vary the look of your tables

Spacing makes the column grid wider

TABLE WIDTH="200" BORDER="1" CELLSPACING="10" CELLPADDING="0"

Cell 1	Cell 2
Cell 3	Cell 4

 

Padding makes the cell space larger

TABLE WIDTH="200" BORDER="1" CELLSPACING="0" CELLPADDING="10"

Cell 1	Cell 2
Cell 3	Cell 4

Border makes the outside border space larger, if you increase it

TABLE WIDTH="200" BORDER="10" CELLSPACING="2" CELLPADDING="2"

Cell 1	Cell 2
Cell 3	Cell 4

Use 0 to make your border disappear

TABLE WIDTH="200" BORDER="0" CELLSPACING="2" CELLPADDING="2"

Cell 1	Cell 2
Cell 3	Cell 4

Feel free to contact me with questions or to talk about how the axsWave Software team can help you with your Web site:

Janette B. Bradley (janette@metronet.com)