HTML Layouts

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:

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:

Output:

Header
Left menu
Main body
Footer

In this tutorial we have learn about the HTML Layouts and its application with practical example. I hope you will like this tutorial.