Home > Computer & I'net > Tables Vs. CSS positioned D...

Browse by title articles:

What is hot:

Deprecated Tags - What does it...

HTM or HTML - What is the diff...

Tables Vs. CSS positioned DIVs

Title & Body

	HTM or HTML - What is the difference?
	Arrays
	Buzzwords vs Effective SEO Keywords
	Absolute VS Relative

Tables Vs. CSS positioned DIVs

Tables Vs. CSS positioned DIVs

by David Stanley

Some people are talking about using DIV and CSS to create layouts instead of tables or iframes. What is that all about?

Welcome to the new age of designing a web page. This is really nothing new, but rather a different way of doing things. The page you are currently looking at does not contain any tables at all. Each section is a DIV area being positioned by CSS. This central area may look like an IFRAME, but really it is a scrolling DIV.

For many years, people have been using a TABLE or nested tables to create a desired layout. That is designing and putting content into specific spots or areas. FRAMES and IFRAMES appeared and they expanded the creative abilities for web page designers. Now it is time to go onto the next evolutionary step... CSS positioning and DIV areas.

The first step to take is to separate the two major factors in a web page. Layout and Content (also known as tabular data). Layout is the act of placing an object in a specific place. Content is all the stuff being shown on your webpage.

Easy so far? Good. You don't have to go overboard and kill all of your tables. Just the ones you are using to create a layout effect. Tables are still great tools when it comes to showing a set of values in that type of layout. Basically though, tables are supposed to be used for organizing data, not for the entire content of a webpage.

So now what? You have a bunch of content stuff just laying around in a jumble. Some navigation area, some title or logo, some information data...

Start by creating a DIV area. The DIV is a block level container. It will hold a specific batch of your stuff. Lets put some navigation links into this first one.

This DIV should be placed within the BODY section of your page coding, like any other normal coding. The DIV is a container, similar to the P (Paragraph) container. We put some links into this one for now. The important part to note in the above coding is the ID property. We will use that value to place this block onto the webpage and decorate it as desired.

The next step is to apply a bit of CSS to this DIV. Remember that ID property? The follwing coding will be placed within the HEAD section of your page coding.

Tables were used to place things into specific spots. CSS positioning will help with that now.

OK, so you have that stuff positioned 50 pixels from the left and 100 pixels from the top. How about adding some real styling to that area? Well, if you've read over our CSS section, you probably have a great knowledge on how to do this already. For examples sake though, lets do a bit here...

Now that was a bit more impressive. You can apply whatever other css styles you want to that container. After you're done, create another DIV area and plunk in your next batch of coding like a title bar area or the main contents part.

To learn about creating a scrolling DIV area, click on the HOW DO YOU navigation or click here... Scrolling Divs

One lingering question you may have is why we used ID instead of CLASS to create this effect. Essentially, the class property can be used instead of id. The id property is used in cases when the effect will be applied only once to an object. The class property is used when the effect will be applied to many objects or areas.

In the case of a layout, you will be applying a specific position and style to only one specific div, otherwise you will have a total overlap. You will use a new ID value for your second DIV area, another new ID value for your third DIV area and so forth...

In the case of content being shown, a CLASS would be more appropriate. Have a look at our example coding spots. There are usually more than one of those types on each page. ID would be overloaded since there is more than one instance. CLASS is used to describe the example styles and may easily be used more than once per page coding.

-----------------

Article by David Stanley. Visit his site http://www.htmlite.com. Reprinted with permission.

Articles