The difference between div+css and table layout in HTML and HTML5 newly added structure label

Source: Internet
Author: User

    • The difference between a div and a table layout
      1. div and table loading method is different, the div loading mode is read and load, encountered <div> did not encounter </div> when the content of the same load div, read how much load; Table loading method is completed after loading, encountered <tab After le>, the contents of the table are not loaded or loaded when the transmission is interrupted before reading </table>, because the table involves multiple rows of multiple columns, so the browser will know how to display it only if all the contents of the table are loaded.
      2. The amount of code used to work with the DIV and CSS is streamlined.
      3. Div development time may be a little longer, but the maintenance is relatively intuitive and convenient.
    • Advantages and disadvantages of table
      1. Table Advantages: Short development time (using DW development speed); Pure table browsers do not have compatibility issues
      2. Table disadvantage: If the layout changes, you need to re-develop; if there is div ul in table, there may be browser compatibility issues; slow loading; nested Table maintenance headaches
    • Advantages of using DIV with CSS
      1. Structure and performance separation, with Div to complete the structure, with CSS control performance, this brings a lot of benefits, Div streamlined page, improved flexibility. CSS designers can avoid the repeated nesting of Div, which greatly improve the page loading speed, as well as the maintenance of the site.
      2.   Use Div to match the reason of CSS, the core of CSS is "box model", and no label can better than div interpretation "box model" essence, table structure is too complex, and can not do this very well, although TABLE+CSS is also a choice, But don't forget the div there is another advantage, floating cascade, and table layout of the site can not be verified by the Internet.
      3.   In fact, the benefits of div far more than these, such as flexible layout, user-defined layout, Div shows incredible flexibility, and the rich semantic structure of the search engine is more friendly than table, not to mention cross-platform applications. DIV+CSS provides us with an elegant and prescriptive technical framework that allows us to achieve more aesthetically pleasing pages with minimal duplication of effort, thereby improving the efficiency of the entire team and even changing the long-standing inability of web designers and web programmers to work synchronously.

  However, using div layout, when the search engine to crawl the content of the page, it can only guess the content of one of your div is the content of the article container, or the navigation module container, or the author introduced the container and so on. That is to say, the whole HTML document structure is not clear, HTML5 in order to solve this problem, specifically added: header, footer, navigation, article content and other structure-related structural element tags, so that the layout of more standardized standards.

The difference between div+css and table layout in HTML and HTML5 newly added structure label (RPM)

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.