The best HTML layout Tutorial In 2024, In this tutorial you can learn Online examples,Site layout,HTML Layout - Using <div> element,Examples,HTML layout - using tables,Examples,HTML Layout - Useful Tips,HTML layout tags,
Page layout to improve the appearance of the site is very important.
Please carefully design your page layout.
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.
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.
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. |
div element is a block-level element used for grouping HTML elements.
The following example uses five div elements to create multi-column layout:
The above HTML code produces the following results:
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.
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:
The above HTML code produces the following results:
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).
标签 | 描述 |
---|---|
<div> | 定义文档区块,块级(block-level) |
<span> | 定义 span,用来组合文档中的行内元素。 |