HTML Layouts

It is possible for the websites to be formatted to appear like a magazine or newspaper using HTML. Such formatting of HTML layouts is done commonly using tables.

Tables have for long been used as a popular method for developing advanced HTML layouts. These tables may contain any element or even another table. The common practice is to insert the complete web page inside a big table having different rows & columns for each of its main section.

Code

Results

Example:

<table width="200px" border="1" align="center" >

<tr>
<td colspan="2" style="background-color:red;">
Header
</td>
</tr>

<tr>
<td style="background-color:yellow;width:100px;text-align:top;">
Left menu<br />
Text 1<br />
Text 2….
</td>
<td style="background-color:#eeeeee;height:200px;width:300px;text-align:top;">
Main body
</td>
</tr>

<tr>
<td colspan="2" style="background-color:red;">
Footer
</td>
</tr>

</table>

Header
Left menu Text 1 Text 2….	Main body
Footer

Though using tables is an effective way of developing HTML layouts, for more advanced layouts it is better to use templates. Web templates are nothing but pre-built websites that offer a scope for customization as required.

HTML Tip 1

Use only hexadecimal #RGB values for colors. The behavior of named colors is browser-idiosyncratic and totally unpredictable.

HTML Tip 2

You can resize your images without a graphics program by changing the HEIGHT and WIDTH in your image tag.

Html Getting Started Guide

Advanced HTML

HTML Layouts

HTML Tip 1

HTML Tip 2

CSS Tutorial