Styling Headers, Paragraphs and Main Columns of DIV-Based CSS Tables - The complete source code of the three-column web page
(Page 4 of 4 )
As I anticipated in the previous section, below I included the complete source code of the web page built in the beginning, this time incorporating the additional CSS styles created before. Here it is:
<!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 (some elements are basically styled)</title>
<style type="text/css">
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;
}
</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>
A final reminder before you finish reading this tutorial: if you’re planning to test the above example on your own machine, don’t forget that it won’t work with Internet Explorer 7 and below, since it lacks adequate support for CSS tables. Naturally, Mozilla Firefox and other standards-compliant browsers will render the tables as expected.
Final thoughts
In this third part of the series, I demonstrated how to improve, at a basic level, the visual appearance of the previous web page, which was created with CSS tables. Obviously, this process is very simple to grasp, and doesn’t require additional explanation.
However, it’s possible that at this moment you’re wondering how to add a header and a footer sections to the web page. That’s a good question, but if you want to know the answer, you’ll have to read the upcoming article!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 3 
