HTML `Layout`

Webpage layout is crucial for improving the appearance of your website.

Please design your webpage layout carefully.

Online Examples

Website Layout

Most websites arrange content into multiple columns (similar to magazines or newspapers).

Most websites can create multi-column layouts using <div> or <table> elements. CSS is used for positioning elements or creating backgrounds and colorful appearances for the page.

| | Although we can design beautiful layouts using the HTML table tag, the table tag is not recommended for layout purposes - tables are not layout tools. | | --- | --- |

HTML Layout - Using <div> Elements

The div element is a block-level element used to group HTML elements.

The following example uses five div elements to create a multi-column layout:

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
</head>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Web Title</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 © tutorialpro.org</div>

</div>

</body>
</html>

The above HTML code will produce the following result:

HTML Layout - Using Tables

Using the HTML <table> tag is an easy way to create a layout.

Most sites can create multi-column layouts using <div> or <table> elements. CSS is used for positioning elements or creating backgrounds and colorful appearances for the page.

| | Even though you can create beautiful layouts with HTML tables, the purpose of designing tables is to present tabular data - tables are not layout tools! | | --- | --- |

The following example uses a three-row, two-column table - the first and last rows use the colspan attribute to span across two columns:

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
</head>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Web Title</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 © tutorialpro.org</td>
</tr>
</table>

</body>
</html>

The above HTML code will produce the following result:

HTML Layout - Useful Tips

Tip: The biggest advantage of using CSS is that if you store the CSS code in an external style sheet, your site becomes easier to maintain. By editing a single file, you can change the layout of all pages. To learn more about CSS, visit our CSS Tutorial.

Tip: Since creating advanced layouts can be time-consuming, using templates is a quick option. You can find many free website templates through search engines (you can use these pre-built website layouts and optimize them).

HTML Layout Tags

Tag	Description
<div>	Defines a block of the document, block-level
<span>	Defines a span, used to group inline elements in the document.

❮ Html Tag Name Html5 New Element ❯