Div vs. table Two page layouts for usability comparisons on large Web sites

div and table itself does not have any advantages and disadvantages, the so-called web standards are recommended is the correct use of tags, such as: div for layout, and table is the two-dimensional data. Letting table do what you do is not to say how much a table is without appearing on the page.

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

China's portal and foreign has a very big difference, Chinese netizens do not like the page of less information, Yahoo to the Chinese page content on a lot more, and the last change to a concise page after the volume of the visit dropped so bad that in a few days and then changed back. Officially because of China's national conditions created Sohu, Sina such a portal.

Why aren't div for them? Here are a few ways to explain:

Thin Code:

Everyone says DIV's layout is streamlined, but the code saved with Div instead of table is occupied by CSS (style), which is mostly used to control the layout of 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 Downloads:

Unified use of a. CSS style sheet file, can be modified once, the effect of total station modification, so that maintenance costs lower. But please think about it from a different angle, if all the pages in the load to access a file, that this file every day download, especially in Sohu, Sina website platform will reach hundreds of millions of times, which requires a lot of front end of the Web server in support, that the cost of the backstage has also improved a lot. If backstage support does not do well, then the page will appear the flower screen, before the work is in vain. A lot of people will ask, the odds are too small. Our work is to avoid these one or two accidents, if the accident happened, the consequences for the portal will be unthinkable.

HTTP communication:

The unified stylesheet file takes the form of an external invocation, so that each time a single page is loaded one more response to the server's HTTP request server will be a significant drain on the front-end Web server. And the original very long time is the CSS and JS written in the front page (you can see Sohu and Sina's page, most of them are in this form), rather than as an external call form, but also in order to avoid adding to the server consumption.

Page Caching:

Every time a user accesses a page, it saves a certain amount of time in the browser cache to ensure that the page will be displayed more quickly the next time the user accesses the page. Each modification will cause the page to be downloaded again, for each external imported style file is also so, if the CSS file changes, then visit the site every page will be downloaded again, and the previous style in the page to write the way, just modify the page need to be downloaded again.

Compatibility:

For CSS (style sheet) Not all versions of all browsers are supported very well, such as IE5 previous browsers for CSS support is not very good. And now using IE5 Previous version of the browser, a number of users, so that in the process of making the page to be tested for different browser versions to ensure compatibility, virtually also add a lot of work (at least I contacted the developer to make a div page than the standard time of the table page).

Crosscutting and ductility:

Crosscutting--traditional layout in order to make the page download faster, the page from top to bottom into several blocks, but often use div layout of the page will appear in this situation, because each of the middle bar or other columns of the contents of the column is not fixed on both sides of the column is not adaptive, and appear to leave White.

The original page:

　　

In the event that the content is not fixed, the page becomes the following:

　　

In contrast, the traditional table approach is more likely to circumvent this situation.

We're just talking about the availability of a technology in one area, not the technology itself.

So much is not to say that div this layout is not good, but that we should correctly look at table in the content based on the role of a large portal, rather than parrot. The reason for the layout of the div is not in the large Web site application, not to say that the portal is not using div is backward technology, is the inside of the people are not forward-looking, but a variety of reasons. The way NetEase uses div All is because content is not their main direction. For other portals, such decisions are validated by time. It's just that the timing isn't ripe yet.