Home > Article > Web Front-end > Comparison of the advantages and disadvantages of table and CSS DIV layout modes (translated)_html/css_WEB-ITnose
Comparison of the advantages and disadvantages of table and CSS DIV layout modes (translated)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:32:31997browse
As a web designer in late 2008, are you embarrassed to admit that you use Table in your code? If so, you are a courageous person. Web design is a strange industry. You can design your website to look like the classified ads in the evening newspaper, or the unlock ads in the corridor, but never let people know that you use Table. Discovering Table in your source code is like a salesperson being discovered by someone lifting his trousers. It's like wearing white socks.
Table is so ugly and bloated. Even if you only display a simple piece of content, you still need these three basic tags
| and a bunch of them in each tag. The messy attributes, unlike , are simple, neat, and fashionable. They are in perfect harmony with CSS. They form the most perfect Box model. They are like boxes in reality. You put things in them, and then , you can arrange them freely. If you are tired of one layout, it doesn’t matter. Simply change the CSS definition, and a new layout will be born; unlike Table, Table is like a sideboard in a canteen, rows and columns. Column is rustic and greasy, just like our parents, slovenly, they take everything home and pile it haphazardly in the corner. If Div is the petty bourgeoisie, Table is the third generation. They do not belong to this era. That is to say, in recent years, only three to five years at most, W3C is an organization that everyone thinks is important but everyone dislikes. Their official website is very ugly. I dare say I have never seen it in my life. They have such an ugly website, but their website is one of the few websites that can pass all W3C standard verification, which means that their website is perfect in grammar, structure, and accessibility, although it is still Very ugly. But this is a joke, W3C is very important, otherwise Microsoft will bring all Web development engineers to a point of no return. Fortunately, after the death of Netscape, Nirvana released Firefox, and although Opera did not receive any benefits after the birth of Firefox, at least You have received moral support. Did you see that a big brother finally came out to take care of you? After Jobs came back, Apple returned to its former glory. Only then did people know that there was a browser called Safari in the world. All of this combined made the W3C truly necessary to exist. W3C said that Table can be used to accommodate text, formatted text, pictures, links, forms, and other Tables... However, Tables should not be used purely as a means to layout document content), the reason is that Table will have problems when the Web is rendered by non-visual devices, which are screen readers and braille browsers. In addition, Table will force users to scroll left and right on large display devices. , therefore, Web designers should use CSS instead of Table. See W3C HTML 4.01 for the definition of Table. When W3C said this, it was December 24, 1999. Although CSS had been born for a long time, not many people used it. The original Web was like an online version of the document and did not become the platform it is now. Too much consideration was given to layout issues. With the formation of the first Internet bubble, a large number of portal websites emerged. Portal websites were the originators of the Table layout, because their homepages were larger than all the pages of a newspaper put together. Complex, Table is very handy in this regard. Combining colspan and rolspan, you can achieve almost any complex layout. This layout style was still very popular in the early 2000s and into the mid-2000s, especially in China. Under the subconscious mind of the United States, people crammed everything that could be crammed into one page into the homepage. Table Like a housekeeper in the old days, he arranges everything in an orderly manner, although not in perfect order. However, this kind of Web has finally reached the point where people are disgusted. With the emergence of search, RSS subscriptions, and personalized Web represented by blogs, people have more channels to obtain information without having to visit those few websites that are almost necessary. On the homepage of the fainted portal, a fresh, lightweight Web style appeared, using a simpler layout, brighter colors, large icons, large banners, and easier-to-read large fonts. At the same time, in this At that time, CSS was already very mature, and browsers such as Firefox, Opera, and Safari were far better than IE in complying with W3C standards. People finally realized the power of CSS. Because the core of CSS is a Box model in terms of layout, people must find a container object for CSS to attach to. Div is the lucky one because it is naturally the best prototype of Box. Semantically, Div represents an area of the page. In appearance, it is boxy. More importantly, it is not Like This is where all the unfair treatment from Table begins. Why is it unfair? When W3C does not recommend Table layout, it only says that CSS should be used instead. What does this mean? Does Table not support CSS? Of course it is supported, and because Table is an old HTML object and its status was so important, any browser provides the most perfect support for Table, including CSS support. When people embrace Div, they seem to forget that Table is also a Box, and it is a Box with multiple inner cells. Table as a whole has no difference from Div in terms of Box model, and its inner cells, except for Margin , it is still a Box, and the inner box does not contain the concept of Margin, which should be understood. It goes without saying that Div is excellent, but when people say Div CSS, it seems to imply that Table cannot be CSS, which is a huge misunderstanding. All CSS properties supported by Div are supported by Table. In fact, before Div became popular, those early adopters of Div expressed with little confidence that if Table can do it, Div can do it, and they I also paid the price for my words. People who try to achieve vertical centering in Div understand what I mean. People who try to achieve 100% Div layout in IE6 without CSS Hack understand what I mean even more. 100% Height problem, width adaptive problem between several Divs, I believe anyone who is engaged in Div CSS design will encounter it. The advantage of Table in this regard is not because of how excellent it is, but because it is old and no browser dares to ignore it. It is also because of its original characteristics. People invented tables because they want the data to be displayed neatly. It is as simple as that. But why did Table get so much notoriety? Div advocates accuse Table of nothing more than the following.
|