In this tutorial you will learn about the HTML Layouts and its application with practical example.
Presenting information on a HTML Document in organized manner is all about the HTML Document Layout. HTML Layout is more about defining the structure of the web page. HTML document layout plays very important role in presenting the information. Its upto the web designers skill how best layout for the web page then can deliver.
There are lots layout option available now a days, most common part of the standard layout includes the banner space, header,footer,navigation, left pane,right pane etc.
HTML layout with tables
HTML Table is the most common and easy method to create layouts, with a proper use of table rows ,columns and their attribute like colspan and rowspan we can achieve good layouts.
Take a look at following HTML layout, this can be achieved using a table having 3 rows and 2 columns. Header and footer column spans full columns (using the colspan attribute).
Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<table style="width:100%;border:0;" border="0"> <tr> <td colspan="2" style="background-color:#ccc;">Header</td> </tr> <tr> <td style="background-color:#ccc;width:30%;text-align:top;">Left menu</td> <td style="background-color:#eeeeee;height:200px;width:70%;text-align:top;">Main body</td> </tr> <tr> <td colspan="2" style="background-color:#ccc;">Footer</td> </tr> </table> |
Output:
| Header | |
| Left menu | Main body |
| Footer | |
HTML layout with DIV, SPAN and CSS
We can achieve same layout using block elements like DIV or SPAN with the help of CSS.
Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div style="width:100%"> <div style="background-color:#ccc"> Header </div> <div style="background-color:#ccc;height:200px;width:30%;float:left;"> Left menu </div> <div style="background-color:#eeeeee;height:200px;width:70%;float:right;"> Main body </div> <div style="background-color:#ccc;clear:both"> Footer </div> </div> |
Output:
