HTML Layout
Web page layout is very important to improve the appearance of the website.
Please design your web page layout carefully.
Website Layout
Most websites will arrange content into multiple columns (just like a magazine or newspaper).
Most websites can use the <div> or <table> elements to create multiple columns. CSS is used to position elements or create backgrounds and colorful looks for pages.
Although we can use the HTML table tag to design a beautiful layout, the table tag is not recommended to be used as a layout tool - Tables are not layout tools.
HTML Layout - Using 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:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#container{width:500px}
div#header {background-color:#cc6666;}
div#menu {background-color:#99CCFF; height:200px; width:100px; float:left;}
div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;}
div#footer {background-color:#99bbbb; clear:both; text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0; font-size:14px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>网站头部图片，标题</h1>
</div>
<div id="menu">
<h2>菜单</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">内容</div>
<div id="footer">底部</div>
</div>
</body>
</html>HTML Layout - Using Tables
Using the HTML <table> tag is an easy way to create layouts.
You can use <div> or <table> elements to create multiple columns. CSS is used to position elements or create backgrounds and colorful looks for pages.
Tip: Even though you can use HTML tables to create beautiful layouts, tables are designed to present tabular data - tables are not layout tools!
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>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#99bbbb;">
<h1>网站头部图片，标题</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#ffff99;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
内容</td>
</tr>
<tr>
<td colspan="2" style="background-color:#99bbbb;text-align:center;">
标题</td>
</tr>
</table>
</body>
</html>
The two methods are different, but the effect is the same.
HTML Layout - Helpful Tips
Tip: The biggest benefit of using CSS is that the site will be easier to maintain if the CSS code is stored in an external style sheet. By editing a single file, you can change the layout of all pages. To learn more about CSS, visit our CSS tutorials.
Tip: Since creating advanced layouts can be time-consuming, using templates is a quick option. There are many free website templates available through search engines (you can use these pre-built website layouts and optimize them).
Next Section