HTML layout


May 02, 2021 11:07 HTML


Table of contents


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.


HTML 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.

HTML layout 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:

<!DOCTYPE html>
<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;">
内容就在这里</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

Menu
Html
Css
Javascript

The content is here

Copyright © W3CSchool.cc


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.

HTML layout 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:

<!DOCTYPE html>
<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;">
内容就在这里</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

标签 描述
<div> 定义文档区块,块级(block-level)
<span> 定义 span,用来组合文档中的行内元素。