HTML Layout
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 create backgrounds and colorful appearances for pages.
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>HackerThik</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main page 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 is here
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
copyright © hackerthink.com
</div>
</div>
</body>
</html>The above HTML code will produce the following result:
Main page title
HTML layout-using tables
Using HTML <table> tag is an easy way to create layout.
Most sites can use <div> or <table> elements to create multiple columns. CSS is used to position elements or create backgrounds and colorful appearances for pages.
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 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).