Table layout and Div layout

　　 DIVAndTABLEitself does not have any advantages and disadvantages, so-called web standards are only recommended is the correct use of tags, such as: Div for the layout, and table is to turn two-dimensional data. Let table do the thing, not to say that the page does not appear to be how much cow.
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? Here are a few things to illustrate:
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 for a long time is the CSS and JS written in front of the page, 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.
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.

Advantages and disadvantages of div layout pages and table layout pages

I. Problems with the table layout

1. Mix the format data into your content. This makes the size of the file unnecessarily large, and users must download the format information once for each page, and the bandwidth is not free.

2. This makes it extremely labor-intensive to redesign existing sites and content

3, it also allows us to maintain the visual consistency of the entire site is extremely difficult, the cost is very high.

4. The table-based page also greatly reduces its affinity for people with disabilities and visitors using mobile phones or PDAs.

Second, the advantages of using CSS for Web page layout

1. Make your page load faster

2. Reduce your traffic costs

3, let you modify the design more efficient and lower cost

4, to help your site to maintain visual consistency

5, let your site can better search engine to find

6. Make your site more approachable to viewers and browsers

7, more and more people in the World adopt web standards, it can also improve your competitive power in the workplace.

There is an article on the net, turn around, the article emphatically introduced the Div three point advantage. Here is the author's three-point advantage and understanding of CSS layout pages:

1, the content and form of separation, the Web front desk only need to display content on the line, the form of art to be handed to the CSS to deal with. The resulting HTML file code is streamlined and smaller to open more blocks.

2, the revision of the site is more simple and easy, do not have to redesign the layout of the Web page, or even do not move the original site of any HTML and program page, just need to change the CSS file to complete all the revision. For the portal site, the revision is as easy as changing clothes.

3, search engine more friendly, ranked more easily before the test.

1th, content and form separation

This is the most significant feature of DIV+CSS technology and the source of CSS. Completely subvert the current traditional (table) Web design technology. All the content that is now made with table can be solved with CSS, and the solution is more perfect and more powerful. You do not need to form a table to make the resulting page file size more streamlined and smaller. Table era, a page table to reach more than 10 is a very common thing, but now with div+css, a table can not be completely achieved before the effect, which directly lead to the page file size than the use of table when the reduction of 50%-80%, save you webmaster's hard disk space , visitors to open the page faster, and when using DIV+CSS, unlike the previous use of table, must have all the table read to display the page content, it is now possible to read a div to show an effect, we open the page does not have to wait. The benefits are really obvious and powerful. This advantage is indeed significant, the use of traditional table-built web pages, content, sometimes up to 30K is possible, the file opened, there must be 0.0 seconds of delay. Using DIV+CSS, your front desk opens to see all direct content, CSS files are imported links, is another file, and HTML file size does not matter, this generated HTML file, one also about 10K size.

2nd, the revision of the site more simple and easy

just need to re-write the CSS, in the new CSS overlay before the previous CSS can be implemented in the revision.

3rd, the search engine is more friendly, indeed can help SEO to a certain extent

through the div+css of the layout of the page, you can make some important links, text information, priority to let the search engine spiders crawl, which is also helpful for SEO.

Table vs. Div layout comparison

In terms of the complexity of the code, both table and Div are lengthy. The Web page of CSS may be smaller than the page size of table, but the complexity varies. On network access

CSS pages are a little bit faster, but the overall user experience doesn't feel very different. Search engine optimization, I have used the CMS data collection, the program used in the Htmlparser class library analysis

HTML page, and then import the data in the element into the database with the Java DOM into XML. This Spider-like program is crawling when the table data and DIV data crawl efficiency is the same,

Today's large search engine does not abandon the table because of the div trend. I think that if a Web page architecture is not good, whether table or div will be discarded by the engine.

But the majority of people on the Internet for DIV+CSS development time is many times the table, but also a problem, netizens said, need to write a lot of code to adapt to different browsers, this I now

The maintenance of the company website also has this problem in the early days. In fact, the question is whether you are familiar with Div, if a familiar div should not be much slower than table.

"The specification says table is used to transmit data, but does not indicate that table can not be used for layout." Search engines for the collection and sorting of Web pages is not measured by the use of tables and CSS positioning, this is why many traditional table layout of the site in the search results sorted before, and many use CSS and web standards produced by the page ranked still behind the reason. Because for the search engine, the website structure, content, related website links and other factors are always the most important index of website optimization. "

"Div+css and Table+css are legitimate designs, who are more simple to use." According to my experience, when you can foresee the format of your content, you should use DIV+CSS when you have the ability to fully control the display format of the content you are about to join; When you are about to join the content is not fixed, you can not foresee its format, if you do not want to let the page collapsed, using TABLE+CSS is an insurance practice. ”

The above 2 words netizens words I am more agreeable. But in any case, using CSS to separate the content from the retouching can be sure.

Table layout and Div layout