Welcome to Our Free Tutorial!

Html Layout

Tables have been a popular method for achieving advanced layouts in HTML. The table has a different column or row for each main section.

The following example: HTML layout using a table with 3 rows and 2 columns but the header and footer column spans (using colspan attribute).

HTML CODE:

<table width="400px" border="0">
<tr>
<td colspan="2" style="background-color:yellow;">
Header
</td>
</tr>
<tr>
<td style="background-color:red;width:100px;text-align:top;">
Left menu < br />
Item 1 <br />
Item 2 <br />
Item 3...
</td>
<td style="background-color:silver;height:200px;width:300px;
text-align:top;">
Main body
</td>
</tr>
<tr>
<td colspan="2" style="background-color:green;"> Footer
</td>
</tr> </table>

Result

Header
Left menu
Item 1
Item 2
Item 3...
Main body
Footer

HTML layout with DIV, SPAN and CSS

We can achieve pretty nice layouts with HTML tables. The div element is a block level element used for grouping HTML elements. Applied to the div element and everything contained within it.

HTML CODE

<div style="width:400px">
<div style="background-color:silver">

Header
</div>
<div style="background-color:green; height:200px;width:100px;float:left;">">
Left menu <br />
Item 1 <br />
Item 2 <br />
Item 3...
</div>
<div style="background-color:red; height:200px;width:300px;float:right;">
Main body
</div>
<div style="background-color:yellow;clear:both">
Footer
</div>
</div>

Result:-

Header
Left menu
Item 1
Item 2
Item 3...
Main body
Footer