HTML Layout
Web page layout is very important to improve the appearance of the website.
Please carefully design your web page layout.
Online Examples
Web page layout using the <div> element
How to use the <div> element to add layout.
Web page layout using the <table> element
How to use the <table> element to add layout.
Site Layout
Most websites will arrange content into multiple columns (just like magazines or newspapers).
Most websites can use <div> or <table> elements to create multiple columns. CSS is used to position elements, or to create a background and colorful appearance for the page.
 | Although we can use the HTML table tag to design beautiful layouts, the table tag is not recommended as a layout tool. A table is not a layout tool. |
|---|
HTML Layout - Use the <div> Element
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>Tutorial Fish (tutorialfish.com)</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#177cb0;">
<h1 style="margin-bottom:0;">Main page title</h1>
</div>
<div id="menu" style="background-color:#1755b0;height:200px;width:100px;float:left;">
<b>menu</b><br>
the HTML<br>
the CSS<br>
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content is here
</div>
<div id="footer" style="background-color:#177cb0;clear:both;text-align:center;">
Copyright © tutorialfish.com
</div>
</div>
</body>
</html>The above HTML code will produce the following result:
HTML Layout - Use Table Element
Using the HTML <table> tag is an easy way to create a layout.
Most sites can use <div> or <table> elements to create multiple columns. CSS is used to position elements, or to create a background and colorful appearance for the page.
| Even though HTML tables can be used to create beautiful layouts, the purpose of designing tables is to present tabular data-tables are not a layout tool! |
|---|
The following example uses a table with three rows and two columns-the first and last rows use the colspan attribute to span two columns:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wonderful Tutorials (tutorialfish.com)</title>
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#177cb0;">
<h1> Main page title </h1>
</td>
</tr>
<tr>
<td style="background-color:#1755b0;width:100px;">
<b>menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
Content is here
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#177cb0;text-align:center;">
Copyright © tutorialfish.com </td>
</tr>
</table>
</body>
</html>
The above HTML code will produce the following results:
HTML Layout - Useful Tips
Tip: The biggest advantage of using CSS is that if you store the CSS code in an external style sheet, the site will be easier to maintain. By editing a single file, you can change the layout of all pages. To learn more about CSS, please visit our CSS Tutorial .
Tip: Since creating advanced layouts is very time consuming, using templates is a quick option. Many free website templates can be found through search engines (you can use these pre-built website layouts and optimize them).
HTML Layout Tags
| Label | Description |
|---|---|
| <div> | Define document blocks (block-level) |
| <span> | Define span, used to combine inline elements in the document. |