Creating a Web Layout using HTML Table

Before we go on to CSS i would like to share with you how a basic web page is created in HTML using table.


Note :- Tables should be avoided while developing webpage as they are not SEO friendly and instead DIV tag should be should be used.

Following is the code with the output of how a simple web layout is created using <table> tag in HTML.


<html>


<head>


<title> Delta Omega Org.- Search Engine Optimization ,Pay Per Click ,SSM and ORM </title>


</head>


<body>


<table width ="800"  align="center" border=0 cellspacing ="0">


<tr>


<td width ="800" height = "100" bgcolor="#cccccc"> 


</td>


</tr>


<tr>


<td width ="800" height = "50" bgcolor="#999999"> 


<table width="100%" border="0" cellspacing ="1">


<tr align="center">


<td width="100" height="50" bgcolor="#aaaaaa" >Home </td>


<td width="100" height="50" bgcolor="#aaaaaa" >About Us </td>


<td width="100" height="50" bgcolor="#aaaaaa" >Services </td>


<td width="100" height="50" bgcolor="#aaaaaa" >Careers </td>


<td width="100" height="50" bgcolor="#aaaaaa" >Feedback </td>


<td width="100" height="50" bgcolor="#aaaaaa" >Clients </td>


<td width="100" height="50" bgcolor="#aaaaaa" >Contact Us </td>


<td width="100" height="50" bgcolor="#aaaaaa" >FAQ's </td>


</tr>


</table>


</td>


</tr>


<tr>


<td width ="800" height = "100" bgcolor="#cccccc">


<table width="100%" border="0" cellspacing ="0">


    <tr>


<td width="600" height="100" bgcolor="#caaccc"> </td>


<td width="200" height="100" bgcolor="#aaccaa"> </td>


</tr>


</table>


</td>


</tr>


<tr>


<td width ="800" height = "350" bgcolor="#cccccc">


<table width="100%" border="0" cellspacing ="0">


    <tr>


<td width="200" height="350" bgcolor="#aaaaaa"> </td>


<td width="400" height="350" bgcolor="#777777"> </td>


<td width="200" height="350" bgcolor="#999999"> </td>


</tr>


</table>


</td>


</tr>


<tr>


<td width ="800" height = "40" bgcolor="#cccccc"> 


</td>


</table>


</body>


</html>