In the last few years, divs have became very popular with many web designers, particularly when it comes to building the layout of the many different pages that comprise a web site. And certainly, this table-less approach has proven to be quite successful over time. It permits developers to create both liquid and fixed designs with relative ease by using a standard methodology. Unfortunately, one aspect of the approach can cause web pages to display in very different ways on different browsers. This four-part series will show you an important workaround.
Even so, despite its numerous advantages, it’s fair to say that building web page layouts utilizing a few containing divs can also be painful, which you may have already discovered when you started developing web sites. As you know, most table-less web page layouts are built by floating some divs to the left and right sides of a web document, via the “float” CSS property -- and not all modern browsers will handle this in the same way.
Even when it’s perfectly possible to build div-based layouts that will be rendered consistently across a decent number of browsers, the truth is that this approach requires diving a bit deeper into the complexities of CSS. This can be quite challenging, particularly for inexperienced designers.
However, there’s a hidden treasure in this that could put a big smile in your face, because many modern browsers supports working with CSS tables in a straightforward fashion. In other words, it’s possible to use CSS to specify that certain divs will behave as table cells, table rows and even an entire wrapping table. Obviously, this approach allows us to create web page layouts much more easily than floating divs, while using HTML tables only for displaying tabular data. You get the best of both worlds!
The bad news in using CSS tables is that they’re not fully supported by Internet Explorer. Nonetheless, not all is lost. The release of the beta version of IE 8 has brought new hope to web designers, because it renders CSS tables correctly.
Apparently, you’ll have to wait until the final version of IE 8 reaches the streets to develop cross-browser CSS tables, but in the meantime it would be pretty useful to take a quick look at them. This way, you’ll be prepared to use them in that hopefully near future.
So, in the next few lines, I’ll be developing a group of code samples aimed at demonstrating how to use CSS tables to create some typical web document layouts. Now, let’s jump in!
Style Sheets 
/ 12 
Adding Headers and Footers with DIV-Based CSS Tables
