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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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.
Next: Styling main divs, paragraphs, and headers >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 3 
