Adding Headers and Footers with DIV-Based CSS Tables
Welcome to the concluding article of a four-part series on creating DIV-based CSS tables. In previous parts, you learned how to construct some basic web page layouts made up of two and three columns with the help of CSS tables. In this article, you will learn how to add header and footer sections to these layouts.
Adding Headers and Footers with DIV-Based CSS Tables - Adding a header and a footer to an existing three-column web page layout (Page 4 of 4 )
If you found if easy to add header and footer sections to an existing two-column web page layout built with CSS tables, then you’ll see that it’s even simpler to perform the same task on a web document that includes three main containers.
To demonstrate that my claim is true, below I coded a brand new (X)HTML file. It is responsible for displaying a three-column web page layout that also incorporates the corresponding header and footer sections. Here’s the file in question:
<!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 with header and footer sections)</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;
}
#tablewrapper{
border-collapse: collapse;
display: table;
table-layout: fixed;
}
#navbar, #maincol, #sidebar{
display: table-cell;
}
#header{
padding: 10px;
background: #ffc;
}
#navbar{
width: 500px;
padding: 10px;
background: #eee;
}
#maincol{
width: 50%;
padding: 10px;
}
#sidebar{
width: 30%;
padding: 10px;
background: #eee;
}
#footer{
padding: 10px;
background: #eee;
}
</style>
</head>
<body>
<div id="header">
<h2>This is the header of the web page</h2>
<p>This is the content of the header section. This is the content of the header section. This is the content of the header section. This is the content of the header section. This is the content of the header section. This is the content of the header section. This is the content of the header section. This is the content of the header section. This is the content of the header section. This is the content of the header section. This is the content of the header section. This is the content of the header section.</p>
</div>
<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>
<div id="footer">
<h2>This is the footer of the web page</h2>
<p>This is the content of the footer section. This is the content of the footer section. This is the content of the footer section. This is the content of the footer section. This is the content of the footer section. This is the content of the footer section. This is the content of the footer section. This is the content of the footer section. This is the content of the footer section. This is the content of the footer section.</p>
</div>
</body>
</html>
Definitely, the definition of the above (X)HTML file is very simple to grasp. As you can see, the main columns have been laid out with CSS tables, while the header and footer have been included in the web document simply by coding two additional divs, located at the top and the bottom sections.
The following screen shot should give you a good idea of the visual appearance of the web document:
And with this last hands-on example, we come to the end of my quick overview on using CSS tables to create div-based web page layouts. As usual with my articles on web development, feel free to use all of the code samples included in this tutorial to give you a solid foundation in utilizing CSS tables.
Final thoughts
Finally, we’ve come to the end of this series. As you saw earlier, CSS tables are great for building table-less layouts and are much more intuitive than using floating divs and negative margins. Of course, you should remember that Internet Explorer in its current version doesn’t support working with them, so you’ll have to wait for the final release of IE 8 before implementing these tables in a true cross-browser fashion.
See you in the next web development tutorial!
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.
Style Sheets 
Creating Web Page Layouts with Negative Margins
