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 - Structural markup for the two-column web page design (Page 3 of 4 )
As I expressed in the earlier section, the CSS styles coded previously would look rather incomplete if I didn’t link them to the corresponding structural markup by means of a single (X)HTML file. Keeping this idea in mind, below I included the complete definition of this file. It is tasked with rendering a basic web page composed of two main columns, along with the header and footer sections.
Here’s the signature of the aforementioned file:
<!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 (2 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;
}
#maincol, #sidebar{
display: table-cell;
}
#header{
padding: 10px;
background: #ffc;
}
#maincol{
width: 70%;
padding: 10px;
}
#sidebar{
width: 30%;
padding: 10px;
background: #eee;
}
#footer{
padding: 10px;
background: #ffc;
}
</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="maincol">
<h2>This is the main column of the web page</h2>
<p>Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main column go here.</p>
<p>Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main column go here.</p>
<p>Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main column go here. Contents for main 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>
Undoubtedly, the above example is not going to change your life as web designer, but it should give you an idea of how to take advantage of CSS tables to build a typical two-column web page layout with header and footer sections.
Below I included an illustrative image to show you the visual appearance of this sample web document:
So far, so good, right? At this stage, I've taught you how to incorporate a header and a footer into an existing two-column layout. Next, I’m going to teach you how to implement the same approach to construct a layout composed of three main containers.
Want to see how this will be achieved with CSS tables? Click on the link below and read the following section.
Style Sheets 
Creating Web Page Layouts with Negative Margins
