Styling Headers, Paragraphs and Main Columns of DIV-Based CSS Tables
If you’re a web designer who uses a few divs to create the layouts of the pages that comprise your web sites, then this group of articles might be useful to you. You'll be particularly interested if you want to keep up with the new trends of modern web development. In this article series, you’ll find an approachable guide to using CSS tables to build table-less web document layouts, without floating containers or negative margins.
Styling Headers, Paragraphs and Main Columns of DIV-Based CSS Tables - Review: building a basic three-column web page layout with CSS tables (Page 2 of 4 )
Before I start demonstrating how to improve the visual presentation of the sample web page developed in the previous installment of the series, I’d like you to recall how this particular example was created with CSS tables.
Here’s the complete source code required for building a basic three-column web page layout with CSS tables. Have a look at it, please:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Example of div-based web page layout using CSS tables (3 columns)</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h2{
margin: 0;
font: bold 18px Arial, Helvetica, sans-serif;
color: #000;
}
p{
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
#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;
}
</style>
</head>
<body>
<div id="tablewrapper">
<div id="navbar">
<h2>This is the left column of the web page</h2>
<p>Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here.</p>
</div>
<div id="maincol">
<h2>This is the center column of the web page</h2>
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
</div>
<div id="sidebar">
<h2>This is the right column of the web page</h2>
<p>Contents for right column go here. Contents for right column go here. Contents for right column go here. Contents for right column go here. Contents for right column go here.</p>
<p>Contents for right column go here. Contents for right column go here. Contents for right column go here. Contents for right column go here. Contents for right column go here.</p>
<p>Contents for right column go here. Contents for right column go here. Contents for right column go here. Contents for right column go here. Contents for right column go here.</p>
</div>
</div>
</body>
</html>
Even though the above hands-on example looks pretty simplistic, it demonstrates in a nutshell how to use CSS tables to construct the layout of a basic web page. In this example, the page is comprised of three main columns, identified as “navbar,” “maincol” and “sidebar” respectively.
In this case, it’s clear to see that the aforementioned columns are rendered as cells of a regular HTML table, according to the following CSS declaration:
#navbar, #maincol, #sidebar{
display: table-cell;
}
In addition, you may want to have a look at the following screen shot, which depicts how the previous web document is displayed by Mozilla Firefox:
Bear in mind that this example simply won’t work as expected in Internet Explorer 7 and below, since these browsers do not support the use of CSS tables. However, things hopefully will look much more promising with the final release of IE 8, since this version of the Microsoft’s browser will work with CSS tables as well.
So far, so good, right? At this level, you hopefully recalled how to create a three-column web page layout with CSS tables, so I think it’s time to start improving certain visual aspects of this sample web document.
Therefore, in the next few lines I’ll be polishing the styles of the principal columns that compose the previous web page, as well as its paragraphs and <h2> headers, in this way improving its visual appearance.
To see how this styling process will be performed, click on the link below and keep reading.
Style Sheets 
/ 3 
Adding Headers and Footers with DIV-Based CSS Tables
