1. Home
  2. HTML layout

HTML layout

Page layout to improve the appearance of the site is very important.

Please carefully design your page layout.

Examples

Online examples

Page layout using the <div> element
How to use the <div> element to layout.

Use page layout <table> element
How to use the <table> element to layout.

Site layout

Most sites will content into a plurality of columns (like a magazine or newspaper that).

Most sites can use the <div> or <table> elements to create multiple columns. CSS is used to position elements, or create a background and colorful appearance of the page.

lamp Although we can use the HTML table tag to design a beautiful layout, but the table tag is not recommended for use as a layout tool - not a table layout tools.

HTML Layout - Using <div> element

div element is a block-level element used for grouping HTML elements.

The following example uses five div elements to create multi-column layout:

Examples

<! DOCTYPE html> <Html> <Head> <Meta charset = "utf-8"> <Title> This tutorial (w3write.com) </ title> </ Head> <Body> <Div id = "container" style = "width: 500px"> <Div id = "header" style = "background-color: # FFA500;"> <H1 style = "margin-bottom: 0 ;"> The 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;"> Text Here </ div> <Div id = "footer" style = "background-color: # FFA500; clear: both; text-align: center;"> Copyright © w3write.com </ div> </ Div> </ Body> </ Html>

The above HTML code produces the following results:

HTML layout - using tables

Use HTML <table> tag is to create a layout in a simple manner.

Most sites can use the <div> or <table> elements to create multiple columns. CSS is used to position elements, or create a background and colorful appearance of the page.

lamp Even if you can use HTML tables to create a nice layout, but the purpose is to present the design table tabular data - not table layout tool!

The following example uses three rows of two tables - the first and the last line uses colspan attribute to span two:

Examples

<! DOCTYPE html> <Html> <Head> <Meta charset = "utf-8"> <Title> This tutorial (w3write.com) </ title> </ Head> <Body> <Table width = "500" border = "0"> <Tr> <Td colspan = "2" style = "background-color: # FFA500;"> <H1> main page title </ h1> </ Td> </ Tr> <Tr> <Td style = "background-color: # FFD700; width: 100px;"> <B> Menu </ b> <br> HTML <br> CSS <br> JavaScript </ td> <Td style = "background-color: #eeeeee ; height: 200px; width: 400px;"> Text Here </ td> </ Tr> <Tr> <Td colspan = "2" style = "background-color: # FFA500; text-align: center;"> Copyright © w3write.com </ td> </ Tr> </ Table> </ Body> </ Html>

The above HTML code produces the following results:


HTML Layout - Useful Tips

Tip: the biggest benefits of using CSS is that if the CSS code is stored in an external style sheet, then the site will be easier to maintain.By editing a single file, you can change the layout for all pages. To learn more about CSS, visit our CSS tutorial .

Tip: Due to create advanced layout is very time consuming, using a template is a quick option.Through a search engine you can find a lot of free website templates (You can use these prebuilt site layout, and optimize them).

HTML layout tags

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

Online Tutorial

Web Tools

Hot Tools

Website Navigation