|
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
|