Shulou(Shulou.com)05/31 Report--

This article mainly explains "what are the advantages of div css layout compared to table layout". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the advantages of div css layout versus table layout"?

Advantages: 1, in line with W3C standards, can ensure that the site will not be eliminated because of the upgrading of network applications; 2, to achieve the separation of page content and performance, which is conducive to the semantic structure of the document, easier to maintain and change; 3, the page size becomes smaller, the page loading speed becomes faster; 4, the page code is more concise, the text is more prominent, and it is easy to be collected by search engines.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

TableE layout is the rise of the early WEB when CSS does not exist, is the irregular use of TABLE tags, Table tags are tables, are used to display data, not used to layout web pages, although it is sometimes very simple to layout web pages. Now the vast majority of websites are laid out with DIV+CSS, and now web pages are more and more inclined to use DIV to lay out web pages.

DIV+CSS is the WEB design standard, it is a method of web page layout. Different from the traditional way of positioning through table layout, it can separate the content of the web page from the performance.

Advantages of div css layout over table layout

1. Comply with W3C standard.

This ensures that your website will not be eliminated because of the upgrade of web applications in the future.

2. Separation of content and performance of web pages

The separation of content, style, and behavior is conducive to the semantic structure of the document, making it easier to maintain and change. What are the advantages of semantic structure? to put it simply, it is conducive to search engine crawlers to better understand our web page, conducive to SEO optimization.

Let's take a look at the following example of how content, style, and behavior are separated:

Mixed writing of content, style and behavior

As you can see above, HTML content, css style, and javascript behavior are mixed together. Let's separate them.

Separation of content, style and behavior of web frontend div {border: 1px solid # ccc;} ul li {cursor: pointer;} mounui.commounui.commounui.comvar uls = document.getElementsByTagName ('ul') [0]; uls.onclick = function (ev) {var ev = ev | | window.event; / / compatible IE browser var uli = ev.srcElement | | ev.target / / determine whether the event source is liif (uli.nodeName.toLowerCase () = = 'li') {_ window.location.href =' http://mounui.com';}}

This separates content, style, and behavior. In the end, for ease of management, css and js are usually placed separately in the corresponding files and then loaded.

3. More affinity for visitors and browsers.

Because CSS is rich in styles and makes the page more flexible, it can achieve a unified display effect and no deformation according to different browsers. This supports the backward compatibility of browsers, that is, no matter what the future browser wars are, your website will be well compatible.

4. Make the page load faster (most importantly) (the content will not be displayed until the entire table is loaded in IE).

The page size becomes smaller, the browsing speed becomes faster, and the page volume becomes smaller because most of the page code is written in CSS. Instead of nesting tables, DIV+CSS separates the page into more areas, which are loaded layer by layer when the page is opened. Instead of wrapping the entire page in a large table like table nesting, the loading speed is very slow.

5. Keep the consistency of vision.

In the past, the production method of table nesting will make the display effect between the page and the page, or between the region and the region will be deviated. And the use of DIV+CSS production method, all pages, or all areas of unified CSS file control, to avoid different regions or different pages reflected by the effect of deviation.

6. It is more efficient to modify the design.

Due to the use of DIV+CSS production method, so that the content and structure are separated, it is easier to save time when modifying the page. According to the regional content tags, find the corresponding ID in CSS, which makes it more convenient to modify the page without destroying the layout style of other parts of the page, and makes it easier for the team to work together and reduce interrelationship.

7. Search engines are more friendly.

Compared with the traditional table, the web page using DIV+CSS technology writes most of the HTML code and content style into the CSS file, which makes the code in the web page more concise, the body part more prominent, and easy to be collected by search engines.

Extended knowledge: shortcomings of div css layout

Each div container needs to be controlled by defining css styles, and the production process is more complex than the table approach.

At this point, I believe you have a deeper understanding of "what are the advantages of div css layout compared to table layout". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.