Creating DIV-based CSS Tables - Structural markup for a two-column web document layout
(Page 4 of 4 )
I’m sure that the utilization of CSS tables to create a basic web page design will be better understood if you’re provided with the full CSS styles, along with the corresponding structural markup of this example. So, below I defined a single (X)HTML file that’s tasked with displaying this two-column layout:
<!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 (2 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;
}
#maincol, #sidebar{
display: table-cell;
}
#tablewrapper{
border-collapse: collapse;
display: table;
table-layout: fixed;
}
#sidebar{
width: 20%;
padding: 10px;
background: #eee;
}
#maincol{
width: 80%;
padding: 10px;
}
</style>
</head>
<body>
<div id="tablewrapper">
<div id="sidebar">
<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>
</body>
</html>
In addition to studying the source code listed above, you mat want to have a look at the following screen capture, which shows the visual appearance of sample web document:
And finally, as usual with many of my articles on web development, feel free to use all of the code samples included into this tutorial, so you can arm yourself with a thorough grounding in using CSS tables.
Final thoughts
In this first chapter of the series, I walked you through the development of a simple web page layout with CSS tables, which was comprised of two main columns. As you saw earlier, this approach permits us to easily place the containers of a web document as true table elements, which can be much more intuitive than using floating divs.
In the upcoming article, I’ll be teaching you how to use the functionality of CSS tables, this time for building a three-column web page layout. Thus, now that you know what this forthcoming tutorial will be about, you don’t have any excuses to miss it!
| 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. |
/ 7 
