I’ve noticed that all complex bulletin board software like vBulletin, phpBB, openBB, Ultimate BB and the like extensively use tables. Example vbulletin BB: http://www.vbulletin.com/forum/
>Good web designers seem to encourage the use of tables only for strictly tabular content (scores in a sports game, statistics, etc) and strongly discourage the use of tables for layout/design.
>So I was wondering what people on this list think about the usage of tables in BB software, is the contents of a bulletin board what would be regarded as tabular data and appropriate for laying out with tables? Or is it just because of laziness and/or because implementing a non-tabular layout is too difficult?
>If tables are not appropriate for bulletin board content, how would you design a bulletin board system that uses no tables for layout and strictly CSS for styling?
> Even some time we need to create tables for simple websites which are designed as tablesless. The following codes will create tables with <div> tags .
<div>
<div>
stuff here
</div>
<div>
stuff here
</div>
<div>
stuff here
</div>
<hr />
</div>
Then repeat.
CSS:
div.wrapper {
width:600px;
}
div.left_column {
width:150px;
float:left;
text-align:center;
vertical-align:middle;
}
div.content {
width:300px;
float:left;
text-align:right;
}
div.rightcolumn {
width:150px;
float:right;
text-align:center;
vertical-align:middle;
}
hr {
clear:both;
display:block;
visibility:hidden;}
If your backgrounds have color, then simply make a 1 pixel tall gif the width of the “table” and set it as the background for “wrapper”.
Note I also used “classes” instead of “id”-s, because you can reuse classes many times throughout a page. ID’s can only be used once per page.
If anyone wants to create a page layout with div tags he should follow the following instructions:
It’s time to build a basic two-column layout with fixed sizes.
Here is the code for styling our DIVS:
<style type=”text/css”>
<!–
#header {
background: #0f0;
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: absolute;
top: 100px;
left: 0px;
width: 150px;
height: 500px;
}
#content {
background: #fff;
position: absolute;
top: 100px;
left: 150px;
width: 700px;
height: 500px;
}
#footer {
background: #0f0;
position: absolute;
top: 500px;
left: 0px;
width: 800px;
height: 100px;
}
–>
</style>
And here’s the HTML code:
<div id=”header”>Header Section</div>
<div id=”leftcol”>Left Section</div>
<div id=”content”>Content Section</div>
<div id=”footer”>Footer Section</div>
The complete code is as follows:
<html>
<head>
<title>TWO-COLUM FIXED LAYOUT WITH FIXED BOXES</title>
<style type=”text/css”>
<!–
#header {
background: #0f0;
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: absolute;
top: 100px;
left: 0px;
width: 150px;
height: 500px;
}
#content {
background: #fff;
position: absolute;
top: 100px;
left: 150px;
width: 650px;
height: 500px;
}
#footer {
background: #0f0;
position: absolute;
top: 500px;
left: 0px;
width: 800px;
height: 100px;
}
–>
</style>
</head>
<body>
<div id=”header”>Header Section</div>
<div id=”leftcol”>Left Section</div>
<div id=”content”>Content Section</div>
<div id=”footer”>Footer Section</div>
</body>
</html>
Let’s see what’s happening here. We have given fixed dimensions and absolute positions to all our DIVS. Widths and heights are expressed in pixels, as well as top and left coordinates.
For the sake of this article, CSS code is within the same Web page, but it should always be attached as an external file. Please remember, separating content from visual presentation is a key concept that makes websites easily maintainable and accessible. With little additions to the code I have provided here we can Easily build a three-column fixed layout .
Thanks man. You tutorial saved me a lot of time.