The content is here, the content is here in the HTML layout
Web layout is important to improve the appearance of your site.
Please carefully design your web layout.
Online instance
The layout of the page using the element
How to add a layout using the .lt;div.gt; element.
The layout of the page using the element
How to add a layout using the .lt;table.gt; element.
The layout of the site
Most websites put content in multiple columns (just like magazines or newspapers).
Most websites can create multiple columns using the .lt;div> or the .lt;table?gt; element. CSS is used to position elements or to create a background and colorful appearance for a page.
|
Although we can use html table tags to design beautiful layouts, table tags are not recommended for use as layout tools - tables are not layout tools. |
|---|
HTML layout - Use the elements of the .lt;div
Div elements are block-level elements that are used to group HTML elements.
The following example uses five div elements to create a multi-column layout:
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">网页的主标题</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;">
The content is here </ div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Cschools.com</div>
</div>
</body>
</html>
Try it out . . .
The HTML code above produces the following results:
The main title of the page
Html
Css
Javascript
The content is here
HTML layout - Use tables
Using HTML and table tags is an easy way to create a layout.
Most sites can create multiple columns using the elements of the .lt;div> or .lt;table?gt; CSS is used to position elements or to create a background and colorful appearance for a page.
|
Even if you can use HTML tables to create beautiful layouts, the purpose of designing tables is to present tableized data - tables are not layout tools! |
|---|
The following example uses three rows of two-column tables - the first and last rows use the colspan property to span two columns:
<html>
<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;">
The content is here </ td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Cschools.com</td>
</tr>
</table>
</body>
</html>
Try it out . . .
The HTML code above produces the following results:
The main title of the page |
|
|
Menu
Html Css Javascript |
The content is here |
| Copyright © W3CSchool.cc/td> | |
HTML layout - useful tips
Tip: The biggest benefit of using CSS is that if you store CSS code in an external style sheet, the site is easier to maintain. B y editing a single file, you can change the layout of all pages. To learn more about CSS, visit our CSS tutorial .
Tip: Because creating advanced layouts is time-consuming, using templates is a quick option. Search engines can find many free site templates (you can use these pre-built site layouts and optimize them).
HTML layout labels
| Label | describe |
|---|---|
| <div> | Define document blocks, block levels (Block-Level) |
| <span> | Define the span to combine the in-line elements in the document. |