davesite.com / webstation / web site design tutorial

Dave's Web Site Design Tutorial

Chapter 6 . . .
. . . Using Tables for Layout

to Chapter 5

Using tables for layout is probably one of the most controversial subjects in web design. There are many people who believe that fixing the layout the way a table does shouldn't be done. I, on the other hand, love the ability it gives a designer to control where things will appear on a page.

Microsoft and Netscape both use tables on their sites. As does CNN. And even McDonald's. One of the most popular reasons for using tables for layout is that you can fit much more stuff in a smaller space, and it is easier to navigate.

You may be asking - doesn't using a table for layout make a site look awkward? No, because you set the border invisible in your table tag with border=0. So it looks as if there is no table there at all.

To use tables for layout you should first understand the way tables work, which I have chosen not to explain here, because it is such a lengthy subject. But if you are already familiar with tables, the following paragraphs should be relatively easy to understand.

The theory of using tables for layout is - normal tables have cells set in rows and columns separated by borders, so for layout, you just make the borders invisible.

table illustration

The image above shows a standard 2 rows x 2 columns table, containing four cells - one with a border, and one without. Without tables, there are no standard HTML codes to get two things lined up perfectly, one on the left side and one on the right.

There are two ways to design a table's width: fixed pixel amount or relative to screen width.

Say you just wanted a table with a single cell for layout, but only wanted it to take up 80% of the browser width, so that the text and graphics wouldn't bump up against the right side. The code is as follows:

<table border=0 width=80%>
<tr><td valign=top>


If you wanted the table to be centered, all you would need to do was add a <center> before the table, and a </center> after the table.

The example above is for a width relative to the browser's width. If you want a fixed pixel width of say... 500 pixels, you could do as follows:

<table border=0 width=500>
<tr><td valign=top>


Now say you want two columns in that table, one to take up the first 1/4 of the width, and the second to take 3/4 of the width.

<table border=0 width=500>
<tr><td valign=top width=25%>

</td><td valign=top width=75%>


Whatever you'd want to place in each cell, would go after the opening <td> and the closing </td> for that cell. I used percentages in cell widths instead of exact pixels for two reasons: it's easier for me to calculate, and in case I want to add a cellpadding in the future.

The cellpadding attribute in a table adds pixel margins between the cell borders (invisible borders in our case) and the content within each cell, keeping two cell contents from looking "too close" to each other. A cellpadding will set a margin for the right, left, top, and bottom of the cell all at once.

Say you want 5 pixels of padding in each cell in your layout table. All you need to do is add cellpadding=5 in the opening <table> tag, as follows:

<table border=0 cellpadding=5 width=YOUR_WIDTH_HERE>

This would cause all cells in the table to have a padding (margin) of 5 pixels each side.

Try different table styles until you find one you like. If you aren't familiar with tables, try searching for more information about them at a search engine.

[ TOP ]

to Chapter 7

Quick Index

Main Page

Glossary of Terms used in this Guide

Chapter 1
Getting Started

Chapter 2
General Design Considerations

Chapter 3
Layout Considerations

Chapter 4
Graphics, Backgrounds, and Colors

Chapter 5
Page Division, Legal Considerations, and Moving Your Site

Chapter 6
Using Tables for Layout

Chapter 7
Major Turnoffs in Web Design

Related Site Links

Copyright © 1997 Dave Kristula. All rights reserved.
Dave's Web Site Design Tutorial - Chapter 6: Using Tables for Layout