HTML Tables (Nested-Intro)

Author: * Laurels Curius - 12 Posts on this thread out of 2,713 Posts sitewide.
Date: Jul 21, 2004 - 10:44

SIMPLE NESTED TABLES
This is the first post in a(n eventual) four post tutorial. There was just far too much to cover to stuff it into one. If you have any questions at any step of the way, please post them to this thread. More than likely, if you have questions left unanswered, it is because it is beyond my somewhat limited knowledge. I'm certain another Arachne member will be happy to answer them or point you in the right direction.
What are Nested Tables?
A nested table is one (or more) complete table within (nested) another. Only 4.0 or higher browsers can currently view them, but since that is most, I don't bother to worry about it myself.
What are Nested Tables for?
I'm sure the use is endless, but here we will be discussing how to use them for:

BASIC NESTED TABLES
TOP BORDERED WEB PAGES
FULL BORDERED WEB PAGES

It is necessary to understand how a simple table is made, and basic understanding of HTML commands. If you do not already know, or think you may have forgotten a bit, please review here first. (Link goes to JMarshalls' HTML made easy, and has a test bed that could come in handy for practicing throughout this tutorial.)
Before we start, there are a few simple HTML commands and tips I want to remind us of.

Table attributes. We will be using several in the next posts, but mainly:

BACKGROUND WIDTH

CELLPADDING HEIGHT

TD ALIGN BGCOLOR (RGB)

Any of these you are not familiar with, please follow this link. (link goes to webmonkey, complete master reference for all HTML tags.)

As with all HTML commands, always use closing tags in the order that you opened them, last to first. Not closing a tag in a nested table will render the rest of the table inaccurate.

To simplify things (and to avoid missing closing tags!) try creating each table seperately, largest to smallest/nested, then cut and paste the nested table into the larger where it belongs.

Practice makes perfect. If you have an HTML editor (I use Notetab Pro~very cheap, very handy and has a free 30 day trial download) that has browser viewing capabilities, practice your table layouts there first..adjusting the cellpadding and borders as needed.
If you do not have an editor, and cannot afford the diskspace, use a testbed like at J.Marshalls. (link above).

Next we will go over how to create basic nested tables.