Pa2sw0rd HTML layout
HTML layout
Web page layout is very important to improve the appearance of your website.
Please design your web page layout carefully.
Online Instance
Web Layout Using the <div> Element
How to use the <div> element to add layout.
Web Layout Using the <table> Element
How to use the <table> element to add layout.
网站布局
Website Layout
Most websites arrange their content into columns (like a magazine or newspaper).
Most websites use <div> or <table> elements to create multiple columns. CSS is used to position elements or create backgrounds and colorful appearances for the page.
Although we can use HTML table tags to design beautiful layouts, it is not recommended to use table tags as layout tools – 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:
Examples
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>It Res(it-res.com)</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Titile</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © it-res.com</div>
</div>
</body>
</html>The HTML code above will produce the following result:
HTML Layout – Using Tables
Using the HTML <table> tag is an easy way to create layouts.
Most sites use <div> or <table> elements to create multiple columns. CSS is used to position elements or create backgrounds and colorful appearances for the page.
Even though you can use HTML tables to create beautiful layouts, tables are designed to present tabular data – they 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 both columns:
Examples
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>It Res(it-res.com)</title>
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © it-res.com</td>
</tr>
</table>
</body>
</html>The HTML code above will produce the following result:
HTML Layout – Useful Tips
Tip: The biggest benefit of using CSS is that your site is easier to maintain if you store your CSS code in an external style sheet. By editing a single file, you can change the layout of all your pages. To learn more about CSS, visit our CSS tutorial .
Tip: Since creating advanced layouts is 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> | Define document blocks, block-level. |
| <span> | Define spans to combine inline elements in a document. |
IT Resource Hub » HTML layout
