HTML LAYOUT

You may have noticed that many websites have multiple columns in their layout - they are formatted like a magazine or newspaper. Many websites achieved this HTML layout using tables.

Web page layout is very important to make your website look good.

Design your webpage layout very carefully.

HTML layout with tables

---

Tables have been a popular method for achieving advanced layouts in HTML. Generally, this involves putting the whole web page inside a big table. This table has a different column or row for each main section.

For example, the following HTML layout example is achieved using a table with 3 rows and 2 columns - but the header and footer column spans both columns (using the 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:orange;width:100px;text-align:top;"*> *Left menu<*br /> *Item 1<*br /> *Item 2<*br /> *Item 3... <*/td> <*td style="background-color:#eeeeee;height:200px;width:300px;text-align:top;"> Main body <*/td> <*/tr> <*tr> <*td colspan="2" style="background-color:yellow;"> Footer <*/td> <*/tr> <*/table> PLEASE Remove Firstly All Asterics *

Result:

Header Left menu Item 1 Item 2 Item 3... Main body Footer

HTML layout with DIV, SPAN and CSS

---

Although we can achieve pretty nice layouts with HTML tables, tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data.

The div element is a block level element used for grouping HTML elements. Once grouped, formatting can be applied to the div element and everything contained within it. While the div tag is a block-level element, the HTML span element is used for grouping elements at an inline level.

Using our previous HTML layout, we can use DIV and CSS to achieve a similar effect.

HTML code:

<*div style="width:400px"*> <*div style="background-color:yellow"*> Header <*/div> <*div style="background-color:orange;height:200px;width:100px;float:left;"*> *Left menu *Item 1 *Item 2 *Item 3... <*/div> <*div style="background-color:#eeeeee;height:200px;width:300px;float:right;"*> *Main body <*/div> <*div style="background-color:yellow;clear:both"*> Footer <*/div> <*/div> PLEASE Remove Firstly All Asterics *

Result:

Header Left menu Item 1 Item 2 Item 3... Main body Footer

One change to this that I'd recommend is that you place the CSS into an external style sheet.

One major benefit of using CSS is that, if you place your CSS in a separate location (i.e. an external style sheet), your site becomes much easier to maintain.

HTML Layout - Useful Tips

---

Tip: The biggest advantage of using CSS is that, if you place the CSS code in an external style sheet, your site becomes MUCH EASIER to maintain. You can change the layout of all your pages by editing one file. To learn more about CSS, study our CSS tutorial.

Tip: Because advanced layouts take time to create, a quicker option is to use a template. Search Google for free website templates (these are pre-built website layouts you can use and customize).

HTML Layout Tags

---

Tag       Description

<*table> Defines a table
<*div>       Defines a section in a document

PLEASE Remove Firstly All Asterics *

THANK YOU