Building a Three-Column Web Page Layout with DIV-Based CSS Tables

Introduction

With the release of the beta version of Internet Explorer 8, it seems that the dreams of many web designers will come finally true, since Microsoft’s browser will offer good support for CSS tables. And it's about time, too; such support has been available for a long time from other products, such as Mozilla Firefox and Safari.

But what are CSS tables, actually? Well, if you read the first part of this series, you may remember that I demonstrated how to take advantage of the functionality of CSS to build a basic web page layout comprised of a two-column CSS table.

In plain words, a CSS table is simply a group of divs which are rendered as common table elements, including cells, rows and even entire wrapping tables. By taking this approach, it’s possible to build entire div-based layouts, without having to deal with the complexities of utilizing floating divs.

Unfortunately, CSS tables aren’t fully supported by Internet Explorer 7 and below, which limits the current use of this technique. However, having such a promising future thanks to the improvements incorporated into the beta version of IE 8, it’s time to take a close look at the functionality of CSS tables, even when there’s a long wait ahead of us.

Now, speaking more specifically, in this second chapter of the series, I’ll be showing you how to use this useful approach, in order to create a typical three-column web page layout, without having to code any floating divs!

Are you ready to learn how to use the power of CSS tables to create this typical web design? Let’s get going!