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 - Styling main divs, paragraphs, and headers (Page 3 of 4 )
As I explained in the previous section, my intention here is simply to add some additional CSS styles to certain elements of the sample web page created earlier to improve its visual appearance. In simple terms, I’m going to style the <h2> headers, paragraphs and main divs of the page in question, a process that’s performed by the following CSS code:
body{
padding: 0;
margin: 0;
background: #fff;
}
h2{
margin: 0;
font: bold 14pt Arial, Helvetica, sans-serif;
color: #036;
}
p{
font: normal 11px Tahoma, Arial, Helvetica, sans-serif;
color: #333;
}
#tablewrapper{
border-collapse: collapse;
display: table;
table-layout: fixed;
}
#navbar, #maincol, #sidebar{
display: table-cell;
}
#navbar{
width: 20%;
padding: 15px;
background: #ccf;
}
#maincol{
width: 50%;
padding: 15px;
background: #eee;
}
#sidebar{
width: 30%;
padding: 15px;
background: #9cf;
}
As you can see, in this case I modified the styles that correspond to the <h2> headers, paragraphs and main divs of the sample layout created previously, making its visual presentation a bit more appealing.
The final result of this styling process can be seen more clearly in the following image:
That wasn’t rocket science, right? However, now the web document constructed with CSS tables looks a bit more appealing! Of course, there’s plenty of room to experiment here, and naturally you’re free to style each element of this sample web page to suit more specifically your personal preferences.
Well, at this point, I have shown you how to apply a few basic CSS styles to certain elements of this basic web document, which has been laid out with CSS tables. Next I will show you how to tie the styles to the structural markup of the document.
This last hands-on example will be developed in the section to come, so jump forward and keep reading.
Style Sheets 
/ 3 
Adding Headers and Footers with DIV-Based CSS Tables
