Use DIV tags with CSS for laying out the web pages and use TABLE for representing data.Tabular data represented using html table tag.
Div tags are generally used to layout web page elements without using tables, because tables are heavy wighted than div tags. The traditional way of laying out web pages was to place them inside invisible tables as demonstrated below. This way of laying out is more complicated to do, harder to maintain and makes the web pages to load very slowly.
Bad: Laying out with nested TABLE tags and CSS
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<title>Table Layout</title>
<style type=”text/css”>
table {
width: 100%;
height: 1000px;
}
td.header {
width: 100%;
text-align: center;
background-color: yellow;
}
td.contents {
width: 80%;
text-align: center;
background-color: orange;
}
td.rhsmenu {
width: 20%;
text-align: center;
background-color: green;
}
td.footer {
width: 100%;
text-align: center;
background-color: blue;
}
</style>
</head>
<body>
<table>
<tbody>
<tr height=”15%”>
<td class=”header” colspan=”2″>Header Information</td>
</tr>
<tr height=”65%”>
<td class=”contents”>Contents go
here</td>
<td class=”rhsmenu”>RHS Panel</td>
</tr>
<tr height=”20%”>
<td class=”footer” colspan=”2″>Footer Information</td>
</tr>
</tbody>
</table>
</body>
</html>
The newer way to lay out your page elements is using DIVs and CSS. It can do everything tables can do and much more, and as an added bonus it loads a lot faster than tables ever did. It is easier to maintain, if you don’t go overboard with nested DIVs. Use DIV for the conatainer and then use other elements SPAN, P, etc with CSS.
Good: Laying out with DIVs and CSS tag
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<title>Div Layout</title>
<!– This can be defined outside in its own file and included into an html file –>
<style type=”text/css”>
body {
display: block;
width: 400px;
height:400px;
text-align: center;
}
/* main content container floated to the left*/
#content {
position: relative;
width: 80%;
height: 65%;
float: left;
background-color: orange;
width: 320px;
}
/* rhs menu container floated to the left*/
#rhs-menu {
position: relative;
width: 20%;
height: 65%;
float: left;
background-color: green;
}
/* header container floated to the left*/
#header {
position: relative;
width: 100%;
height: 15%;
float: left;
background-color: yellow;
}
/* footer with “clear”” to ensure that the footer is always below content and rhs-menu */
#footer {
position: relative;
width: 100%;
height: 20%;
clear: both;
background-color: blue;
}
/* align text vertically*/
#content p,#rhs-menu p,#header p,#footer p {
position: absolute;
top: 50%;
left: 50%;
height: 50%;
width: 50%;
margin: -15% 0 0 -25%;
}
/* position the logo using absolute (from top left corner) or relative*/
.logo-text {
position: absolute;
top: 5px;
left: 10px;
}
</style>
</head>
<body>
<div id=”header”><span class=”logo-text”>logo goes here </span>
<p>Header Information</p>
</div>
<div id=”content”>
<p>Contents go here</p>
</div>
<div id=”rhs-menu”>
<p>RHS Panel</p>
</div>
<div id=”footer”>
<p>Footer Information</p>
</div>
</body>
</html>