Tableless web-designing Very important aspect

Rethinking How You Build a Page

When you build a site using tables, you have to think in a "tabular" format. In other words, you're thinking in terms of cells and rows and columns. And your Web pages will reflect that. When you move to a CSS-P design, you'll start thinking of your pages in terms of the content.

For example, the page for this article can be considered to have five content parts:

1. the header
   This is where my photo is, the top banner ad, and basic navigation.
2. the left navigation
   This is the left side of the page, with the subjects and essentials.
3. the right navigation
   This is where the tower ads and other information is.
4. the content
   The text of this article.
5. the footer
   The bottom navigation, copyright information, lower banner ad, and so on.

Rather than putting those elements in a table, I can use the

tag to define the different portions of the content, and then use CSS-P to place the content elements on the page.

For the sake of this article, I'm going to pretend there are just three columns on the page, and ignore the header and footer.

Identifying Your Sections

Once you've defined the different content areas of your site, you need to write them in your HTML. While you can, generally, place your sections in any order, it's a good idea to place first items you'd like less advanced browsers to see first.

For my three column layout, I'm going to have three sections:

1. leftnavigation
2. rightnavigation
3. content

These will be defined using div tags with the id attribute. Remember, when you use the id attribute, you need to have a unique name for each id.

Positioning

This is the fun part. Using CSS you can define the position for your id'ed divs. Store your position information in a style call like this:
#content {

}

Content within a div tag will take up as much space as it can, namely 100% of the width of the current location, or the page. So, to affect the location of a section without forcing it to a fixed width, you can change the padding or the margin elements.

For this layout, I set the two navigation columns to fixed widths and then set their position absolute, so that they wouldn't be impacted by where they are found in the HTML.

#leftnavigation {
position : absolute;
left : 0;
width : 150px;
margin-left : 10px;
margin-top : 20px;
color : #000000;
padding : 3px;
}
#rightnavigation {
position : absolute;
left : 80%;
top : 20px;
width : 140px;
padding-left : 10px;
z-index : 3;
color : #000000;
padding : 3px;
}

Then for the content row, I set the margins to be somewhat relative to the outer columns.
#content {
top : 0px;
margin : 0px 25% 0 165px;
padding : 3px;
color : #000000;
}

While the page won't look wonderful in non-CSS-P browsers, as you can see, it is possible to define how your page will look without any table tags. See the HTML. See the CSS.