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

Using CSS tables for constructing a web page layout composed of three primary columns is actually a no-brainer process. The whole creation process is very similar to the approach that I used in the previous section.

In simple terms, apart from defining the CSS selectors corresponding to each main column of the web document, the only additional step that must be performed consists of specifying, via the “display” CSS property, that each of these columns must be displayed as normal table cells.

Based on this concept, below I created the CSS styles that construct the aforementioned three-column web page design. Here they are:

#navbar, #maincol, #sidebar{

display: table-cell;

}

#tablewrapper{

border-collapse: collapse;

display: table;

table-layout: fixed;

}

#navbar{

width: 500px;

padding: 10px;

background: #eee;

}

#maincol{

width: 50%;

padding: 10px;

}

#sidebar{

width: 30%;

padding: 10px;

background: #eee;

}

See how easy it is to build a web page design composed of three columns, with the assistance of CSS tables? I bet you do! As shown above, the columns will be rendered as cells of a regular HTML table, in accordance with the following declaration:

#navbar, #maincol, #sidebar{

display: table-cell;

}

Other than that, the rest of the CSS styles declared above are fairly easy to follow, so I’m not going to waste your time explaining how they work. However, as you may guess, it’s necessary to tie the previous set of CSS styles to the corresponding markup of the web document; this way, you’ll quickly grasp how these two layers can be linked.

Thus, if you’re interested in seeing the full source code that renders this three-column web page layout, then read the following section.