The difference between a div and a table

1 : Differences in speed and loading modes

The difference between Div and table is not speed, but loading mode, speed only refers to network speed, if fast enough, there is no difference:

div loading method 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 <table> after reading to </t Before able>, the contents of the table are not loaded, or the transmission is interrupted (Document.onload () event) when loaded, because table involves multiple rows of multiple columns, so only when the table all content is loaded, IE will know how to display

2 : Differences in Web Applications

If the page is added to the table, it must wait until the entire page has finished reading before loading

If the page has a Div, no effect

3 : Comparison of the availability of div and table layouts on large sites

div and table itself does not have any advantages and disadvantages, so-called web standards are only recommended is the correct use of tags, like: div for the layout, and table is the two-dimensional data. Let table do the thing, not to say that the page does not appear to be how much cow.

The advantage of using div for typesetting is that I don't say that everyone should be more clear. Div is the standard, is the trend, but does not mean that all the pages are suitable to use it to do.

China's portal and foreign countries have a very big difference, Chinese netizens do not like the information of less pages, Yahoo to the Chinese page content on more than a lot, and the last time to a concise page after the decline in access to a strong so that not a few days and then changed back. Officially because of China's national conditions have created Sohu, Sina such portals.

Why are div not suitable for them? Let me explain in a few ways:

Thin Code:

Everyone says that Div's layout is streamlined, but the code saved by using a div instead of table is used by CSS (styles), which are mostly for controlling the layout of the Div. Then you will say, CSS can be put on the external reuse ah, to get the answer to this question, please look down.

reusability and Download Volume:

Unified use of a. CSS style sheet file can be modified once, the effect of the whole station modification, so that the cost of maintenance is lower. But please change a point of view, if all the pages in the load to access a file, then the daily download of the file, especially in the Sohu, Sina website platform will reach hundreds of millions of times, which requires a lot of front end of the Web server to do support, the background of the cost of virtually also improved a lot. If the background support is not done, then the page will appear a flower screen, the previous work is also wasted. Many people will ask that the odds are too small. The work we do is to avoid these one or two accidents, and if it happens, the consequences for the portal will be disastrous.

HTTP communication:

A unified stylesheet file takes the form of an external call, so that each time a single page is loaded, the server's HTTP request server is incremented one more time, which can be a significant drain on the front-end Web server. And the original long time is the CSS and JS written in the front of the page (you can see Sohu and Sina pages, mostly in this form), rather than as an external call form, but also to try to avoid the server to increase consumption.

Page cache:

Every time a user accesses a page, it will be saved in the browser cache for a certain amount of times to ensure that the next time the user accesses the page, it will greatly improve the page display speed. And each modification will make the page re-download, for each external imported style file is also the case, if the CSS file modification, then the visit to each page of the site will be re-downloaded, and the previous way to write style on the page, only the modified page needs to be re-downloaded.

Compatibility:

For CSS (style sheets) Not all versions of all browsers are supported well, such as IE5 's previous browser support for CSS is not very good. And now there are a few users of the previous version of IE5 browser, so that in the process of page production needs to be tested for different browser versions to ensure compatibility, and virtually add a lot of work (at least I touch the developer to make a DIV page than the table page standard time longer).

Crosscutting and ductility:

Crosscutting-the traditional layout in order to make the page download faster, the page into a number of blocks from top to bottom, but often using div layout of the page will appear such a situation, because each block of the middle column or other columns of the content of the column is not fixed at the same time the two columns are not self-adaptive, and appear to stay white.

Above we are just discussing the availability of a particular technology in a particular area, not the technology itself.

Saying so much is not to say that Div is a bad layout, but rather that we should look at the role of table in a large, content-based portal, rather than in the same way. The reason for the layout of the div is not in the large Web site application, not to say that the portal does not use Div is technologically backward, is the person inside is not forward-looking, but a variety of reasons to decide. NetEase uses div all the way because the content is not their main direction. For other portals, such decisions are time-tested. It's just that the time is not ripe yet.

4:div+css

And now I think that Div +css is not as simple as the literal meaning, but with a twofold intrinsic meaning:

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 , the use of Div to match the reason of CSS , the core of CSS is "box model", and no label can be better than div interpretation of the essence of "box model", 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.

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.

In my own experience, the team using DIV+CSS has reduced the duration by 30%-50% compared to the team using TABLE+CSS.

The difference between a div and a table