HTML Layouts

## HTML Basic

HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Formatting HTML Links HTML Head HTML CSS HTML Images HTML Tables HTML Lists HTML Blocks HTML Layout HTML Forms HTML Iframes HTML Colors HTML Colornames HTML Colorvalues HTML JavaScript HTML Entities HTML URL Encode HTML Quick List HTML Summary HTML XHTML

## HTML5 News

HTML5 Intro HTML5 New Elements HTML5 Canvas HTML5 SVG HTML5 Drag/Drop HTML5 Geolocation HTML5 Video HTML5 Audio HTML5 Input Types HTML5 Form Elements HTML5 Form Attributes HTML5 Semantic HTML5 Web Storage HTML5 App Cache HTML5 Web Workers HTML5 SSE

## HTML Media

HTML Media HTML Object HTML Audio HTML Video HTML YouTube

## HTML Examples

HTML Examples HTML Quiz HTML5 Quiz HTML Certificate HTML5 Certificate

## HTML References

HTML Tag List HTML Attributes HTML Events HTML Canvas HTML Audio/Video HTML Doctypes HTML Colornames HTML Colorpicker HTML Colormixer HTML Character Sets HTML ASCII HTML ISO-8859-1 HTML Symbols HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods Keyboard Shortcuts

# HTML Layouts

« Previous
Next Chapter »

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

Design your webpage layout very carefully.

## Try it Yourself - Examples

Web page layout using <div> elements
How to add layout using <div> elements.

Web page layout using <table> elements
How to add layout using <table> elements.

## Website Layouts

Most websites have put their content in multiple columns (formatted like a magazine or newspaper).

Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.

| Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!

## HTML Layouts - Using <div> Elements

The div element is a block level element used for grouping HTML elements.

The following example uses five div elements to create a multiple column layout, creating the same result as in the previous example:

## Example

<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>
Try it yourself »

The HTML code above will produce the following result:

# Main Title of Web Page

Menu
HTML
CSS
JavaScript
Content goes here
Copyright © W3Schools.com

## HTML Layouts - Using Tables

A simple way of creating layouts is by using the HTML <table> tag.

Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.

| Using <table> to create a nice layout is NOT the correct use of the element. The purpose of the <table> element is to display tabular data!

The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute:

## Example

<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>
</body>
</html>
Try it yourself »

The HTML code above will produce the following result:

# Main Title of Web Page

Menu HTML CSS JavaScript | Content goes here
Copyright © W3Schools.com

## 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
--- | ---
<div> | Defines a section in a document (block-level)
<span> | Defines a section in a document (inline)

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE