What are the advantages of web design using div compared to table?

Source: Internet
Author: User
Keywords Web Design

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

A few years ago Div began to become the preferred way of web design, at present, Div has become the standard of web design, the domestic very many sites in these years have completed from table to div reconstruction. The author is also a preference for this way web designer, has been working for 3 years has been using Div way to provide customers with design. So what are the advantages compared to table? Here are some personal experience and understanding, I hope to help colleagues and related personnel.

Web Design using div, the biggest advantage is to achieve the standardization of Web code, discard the outdated form layout, achieve the content, performance and behavior of the separation between the 3, HTML code structure better, reading and maintenance easier, while the size of the Web page file is smaller. For example, recently to a customer's website refactoring, the page file size is less than half the original, so occupy less space, the site opened faster.

div and table in the design of the difference is very large, the page began to design before the need for careful planning, such as the composition of the various parts of the Web page naming, convenient in the CSS style definition, the public attribute part of the best use of class name definition. The common style of the entire site can be placed in a separate CSS file, Common properties are: Web page width, background color, background picture, font default size, color, link style, and so on, each page has a different style in the CSS file is best to centralize a piece, and in the block before the description of which page or which part of the page, This will simplify the size of the CSS file, and avoid confusion, maintenance is also more convenient. It is worth mentioning that the Web page code does not embed style, completely realize the separation of content and style.

Do a good job of div web design, the individual must have three points need to focus on understanding.

1, Float properties: DIV (layer) By default is to occupy a whole row, for the common two or more columns of the layout of the design, you need to be able to set the float and width properties to achieve the effect. If you follow a layer that occupies banner after a multiple-column layout, you need to set the Clear property cleanup layer float.

2, Box mode: The layer has width, height, border border, padding spacing and margin, and other attributes, and the actual space occupied by the above attribute value of the sum of the size, the rational use of these attributes can achieve a compact and beautiful page layout.

3, Layer nesting: Experienced web designers know that the layer should not be nested too much, generally no more than 3 layers, nesting too much will lead to complex code redundancy, maintenance difficulties and slow running problems. In addition, the multiple-column layout can be fully implemented with layer float, do not need a whole set of IE layer to embed.

Separate browser-compatible topics. Div is more prone to multiple browser incompatibilities than table layouts, mainly because different browsers have different Web-standard defaults. Domestic mainstream is ie,firefox and chrome used less, in the compatibility test, first of all need to ensure that in IE multiple versions do not have problems, here design to some methods and techniques, can be specific problems in the site to find solutions.

Summary: div compared to table has a lot of advantages, web designers should be early abandon table way, so more conducive to urge themselves to further study div knowledge. Learning and using div web design is not difficult, as long as you know some basic knowledge, and then do a few more cases can gradually understand mastery. by http://www.swjns.com webmaster [hippie] Original, reprint please keep the URL

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.