Using Tables for Layout

When I first got on the internet several years back, I would frequently admire the layout of the big corporate media websites and wonder, "How do they do that?" So then I peeked at their source code and found a virtual morass of HTML tables as far as the eye could see. Then I discovered that they were not only using tables but they were also using tables nested inside more tables nested inside still more tables. So then the big question that hit me was "WHY?" Following this I spent innumerable hours plowing through and dissecting these layouts trying to find out what they knew that I didn't.

I have since discovered all the methods behind the madness and I am now writing this tutorial on using HTML tables to layout web pages largely in remembrance of having to learn all this the hard way.

Good Web Design Basics

The basic idea behind good web design is to partition your web page into various sections and columns to give it a professional allure and to make it more user friendly. This technique is also conducive to:

Creating a template that you can use on all your web pages to render a familiar look every time a visitor goes to a different part of your site. A website should be like your home in that you want visitors to feel welcome and at ease throughout their stay. You don't want them completely disoriented and wondering where the heck they are the minute they decide move around, i.e. move to another page on your site.
Creating a header section that runs across the top of your page in order to designate a prominent place for your website logo, slogan, cool graphic or whatever. The top of your web page is prime real estate in web design terms and is the part of the page that will have the greatest impact on your visitors. You want to make sure that you use this space wisely.
Creating multiple columns that clearly divide your web page into various logical sections such as:
- A menu column containing a list of links to other pages on your website. This will help your visitors get around regardless of what page they are on.
- A main content column (such as that which holds the text you are currently reading). This column renders the main text and graphics which define what your web page is about. This should be kept narrow enough to facilitate easy reading. A computer screen is typically much wider than a page in a book or a column in a newspaper or magazine. Lots of text spanning across the entire screen quickly becomes tiresome to read and comprehend.
Creating a footer section to hold copyright information and important links. This helps to create a visual ending to your web page and can help direct visitors to other important sections of your website.

Fundamentals

The easiest way to divide your web page into subsections is to start by rendering it as one big table that spans the entire width and at least the entire height (or more) of the web browser viewport. You can do this by inserting a table in between the <body>...</body> tags of your HTML document and then using the following code in the <table> start tag:

<table width="100%" style="height: 100%;">

Then everything on your web page goes inside this table. A distinct advantage of using this technique is your table design will automatically expand to the full height of the web browser viewport should your page fail to have enough content in any of the columns to accomplish this on its own.

You can then define table rows <tr>...</tr> and table cells <td>...</td> to create the rows and columns of your layout. If you want one table row to contain a single cell which spans the full page width then you can just use the colspan attribute.

To eliminate the default padding and margin that most browsers apply to the document body, you can put the following code in your <body> start tag:

<body style="margin: 0px; padding: 0px;">

All of this will be alot easier to visualize if we use some actual examples of table layouts along with the associated HTML source code to act as a study aid. This will be covered next...

Web Hosting 101

Learn about web hosting without the technobabble!

What is Web Hosting?
Best Free Web Hosting
Affordable Domain Names
Affordable Web Hosting