Usability comparison of div and table in websites

In page layout, div and table are often used, so what are their characteristics in the page? This article will talk about the usability comparison of div and table in the website. For those who are interested, continue below. Take a look.

DIV and TABLE do not have any advantages or disadvantages in themselves. The so-called web standards only recommend the correct use of tags. For example: DIV is used for layout, while TABLE is originally used to convert two-dimensional data. Letting TABLE do what it should do does not mean that TABLE is so awesome if it does not appear on the page.

The advantage of using DIV for typesetting is that I won’t say it, but everyone should be clear about it. DIV is a standard and a general trend, but it does not mean that all pages are suitable for use.

There is a big difference between Chinese portals and foreign portals. Chinese netizens don’t like pages with less information. When YAHOO arrives in China, the content on the page is much more. Last time, it was changed to a concise page. Later, the number of visits dropped so much that it was changed back within a few days. Officially, it is China’s national conditions that have created portals like Sohu and Sina.

Why DIV is not suitable for them? Let me explain one by one from several aspects:

Simplified code:

Everyone says that the layout of DIV is streamlined code, but the code saved by using DIV instead of TABLE is occupied by CSS (style), and most of these styles are used to control the layout of DIV. Then you will say that CSS can be reused externally. If you want to get the answer to this question, please read below.

Reusability and downloads:

Uniform use of a .css style sheet file can achieve the effect of modifying once and modifying the entire site, thus reducing maintenance costs lower. But please think about it from another perspective. If all pages have to access a file when loading, then the number of downloads of this file every day, especially on Sohu and Sina website platforms, will reach hundreds of millions. This will require a lot of information behind it. The front-end web server is providing support, and the cost of the backend has also increased a lot. If the background support is not done well, the page will appear blurred, and the previous work will be in vain. Many people will ask, the probability of this is too small. The work we do is to avoid these two accidents. If an accident occurs, the consequences for the portal will be disastrous.

HTTP communication:

The unified style sheet file adopts the form of external call, so that each time a single page is loaded, the http request to the server will be increased once. Response, this will consume a lot of money on the front-end web server. It turns out that for a long time, css and js were written on the front end of the page (you can look at the pages of sohu and sina, most of them use this form), rather than in the form of external calls, in order to try to avoid adding additional code to the server. consumption.

Page cache:

Every time a user visits a page, it will be saved in the browser cache for a certain period of time to ensure that the user can access the page next time. Improve page display speed. Each modification will cause the page to be re-downloaded, and the same is true for each externally imported style file. If the CSS file is modified, every page visited on the website will be re-downloaded. The previous method of writing styles on the page is just Modified pages need to be downloaded again.

Compatibility:

Not all versions of all browsers support CSS (style sheets) very well. For example, browsers before IE5 support CSS very well. The support is not very good. Nowadays, there are not a few users who use browsers before IE5. This means that during the page production process, different browser versions need to be tested to ensure compatibility, which also adds a lot of workload (at least to the developers I contact). The standard time to create a div page is longer than that of a table page).

Crosscutting and ductility:

Crosscutting - the traditional layout method divides the page into several blocks from top to bottom in order to make the page download faster. , but this situation often occurs in pages that use DIVs for layout. Since the number of content items in the middle column or other columns of each block is not fixed, the columns on both sides do not adapt at the same time, and blank spaces appear.

In contrast, the traditional table method is easier to avoid such situations.

Above we only discussed the availability of a certain technology in a certain field, not the technology itself.

Having said all this is not to say that the layout method of DIV is not good, but that we should correctly view the role of Table in a large content-based portal, rather than following what others say. The reason why the DIV layout method is not used in large websites does not mean that the portal does not use DIV because the technology is backward, but because the people inside are not forward-looking, but it is determined by various reasons. The reason why NetEase all uses DIV is because content is not their main focus. For other portals, such decisions will depend on time to verify. It's just that the time is not yet ripe now. ?

The above is the detailed content of Usability comparison of div and table in websites. For more information, please follow other related articles on the PHP Chinese website!