Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

HTML

Learn step by step



HTML Layouts

Web page layout is very important to give uniform and better look to your website. Webpage layout should be designed very carefully.

You may have noticed in various websites that have placed their content in multiple columns - they are formatted like a magazine or newspaper. It can be easily achieved using tables or div or span tags. CSS is also used to position various elements or to create backgrounds or colorful look for the pages.

HTML Layout - Using Tables:

The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.

For example, the following HTML layout is achieved using a table having 3 rows and 2 columns - but the header and footer column spans entire columns using colspan attribute:


<table width="100%" border="0">
<tr>
<td colspan="2" style="background-color:#CC99FF;">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFCCFF;
width:100px;text-align:top;">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td style="background-color:#eeeeee;height:200px;
width:300px;text-align:top;">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#CC99FF;">
<center>
Copyright ©2014 orianaitsotutions.com
</center>
</td>
</tr>
</table>
Run

Multiple Columns Layouts - Using Tables

A webpage can be designed to place web content over multiple pages. You can keep your main content in middle column and use left column to have navigation menu and right column to put advertisement or some other stuffs. It will be very similar to our tutorial pages http://tuton.orianaitsolutions.com/html/html_layout .

Here is an example to create three column layout:


<table width="100%" border="0">
<tr valign="top">
<td style="background-color:#FFCCFF;width:20%;
text-align:top;">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td style="background-color:#eeeeee;height:200px;
width:60%;text-align:top;">
Technical and Managerial Tutorials
</td>
<td style="background-color:#FFCCFF;
width:20%;text-align:top;">
<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>
<table>

Run

HTML Layouts - Using DIV, SPAN

The div element is a block level element used as a container for grouping HTML elements. While the div tag is a block-level element, span tag is an inline level element.

Although we can achieve good design layouts with HTML tables, but tables weren't really designed as a layout element. Tables are more suited for presenting tabular data.

You can achieve same result using div whatever we have achieved using <table> tag in previous example.


<div style="width:100%">
<div style="background-color:#CC99FF;">
<b style="font-size:150%">This is Web Page Main title</b>
</div>
<div style="background-color:#FFCCFF;
height:200px;width:100px;float:left;">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</div>
<div style="background-color:#eeeeee;
height:200px;width:300px;float:left;">
Technical and Managerial Tutorials
</div>
<div style="background-color:#CC99FF;clear:both">
<center>
Copyright ©2014 orianaitsotutions.com
</center>
</div>
</div> Run



Related Videos