On the standard of the div: "The myth of the legend"

Source: Internet
Author: User

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

As a Web designer at the end of the 2008, do you have the nerve to admit that you use Table in your code, if you are, you are a courageous person, web design is a strange industry, you can design your own website like the evening paper classified ads, or the corridor of the unlocked ads, But do not let people know that you use the table, in your source code found table is like a sales were raised trouser legs found wearing white socks.

Table is so ugly, bloated, even if only show a simple piece of content, you also need to <table><tr><td> these three basic labels, each tag also add a bunch of messy attributes, unlike <div> , neat and stylish, it's a perfect pair of CSS, harps harmony, they constitute the most perfect box model, they like the real box, you put things in, and then, very free to arrange them, tired of a layout, it does not matter, simply change the definition of CSS, a new layout was born; Table,table like canteen cupboard, a row row, a column, rustic, greasy, like our parents, sloppy, anything to take home, random heap in the corner, if the Div is petty, Table is Sanmo, they do not belong to this era.

In recent years, for at least 35 years, the consortium is an organization everyone thinks is important but everyone dislikes, and their official website is ugly, and I dare say that I haven't seen such an ugly site in my life, but their site is one of the few sites that can be validated by all the standards, which means Their site is perfect in syntax, structure, and accessibility, though it is still very ugly. But this is a joke, the world of the world is very important, otherwise Microsoft will bring all the WEB development engineers to the end of the situation, fortunately, after the death of Netscape, Nirvana out of Firefox, and Opera after Firefox turned out to have no benefit, at least get the moral support, See, finally have big Brother out to pick you up. After Mr Jobs's comeback, Apple returned to the light of the past, when it became known that there was a browser called Safari, all of which added to the need for the global consortium to really exist.

The consortium says that table can be used to hold text, format text, pictures, links, forms, and other table ... However, the table should not simply be used for Web page layouts (Tables should not is used purely as a means to layout document content) on the grounds that when the Web is rendered by a non-visual device, the table Problems occur, they specify screen readers and Braille browsers, and the table forces users to scroll around on large display devices, so WEB designers should use CSS instead of table. See the definition of Table in the HTML 4.01. The World Wide Web said this time, is December 24, 1999, although the CSS was already born, but not how many people use, the original website like an online version of the document, and did not become such a platform, do not need too much to consider layout problems, with the internet first bubble formation, The emergence of a large number of portal sites, the portal site is the originator of the Table layout, because their home page than a whole newspaper all the layout of the mosaic is complex, Table in this respect very conveniently, combined with colspan and rolspan, you can almost achieve any complex layout.

This style of layout was still very popular in the early 2000, in particular, at home, in the great beauty of the subconscious, people put all the things that can be stuffed into a page into the homepage, Table is like an old butler, all things although not well ordered, but at least the same as a lot of choreography. But the WEB has finally come to disgust, with the advent of search, RSS feeds, and personalized web representations of blogs, people have more access to information without having to visit the home page of the portals that have almost fainted, and a fresh, lightweight Web wind emerges, With simpler layouts, more crisp colors, big icons, big Banner, and more readable characters, at the same time, CSS is already very mature, and Firefox, Opera, Safari-represented browsers are far better at complying with the standards of the consortium than IE, People finally realize the power of CSS. Because the CSS in the layout, its core is a Box model, people have to find a CSS can be attached to the container object.

Div becomes lucky on the one hand because it is inherently the best prototype of Box, in Semantics, Div represents an area of the page, in appearance, it boxy, more importantly, it is not like <P> or <a> in advance has been given special semantics (although they can also be used in box model); On the other hand, for the hatred of a bloated era of Table domination, the end of an era, the successor will try to erase the traces of the old times, those symbols or representatives of the fate of the most often, people do not simply forget them, but a categorical draw a blank.

All the unfair treatment of Table begins. Why is not fair, the consortium does not recommend table layout, only say should use CSS instead, what does this mean, table does not support CSS? Of course, and since table is so important as a veteran HTML object, any browser provides the most perfect support for the table, including CSS support. When people hug Div, it seems to forget that Table is also box, and is a box,table with multiple negroponte as a whole, and Div in the box model without any distinction, and its negroponte, in addition to Margin, is still a Box, Negroponte does not contain Ma The concept of rgin should be understood. Div is excellent this does not have to say, however, when people say Div + CSS, it seems to imply that the Table can not CSS, this is a big misunderstanding.

All CSS attributes supported by the DIV, table all support, in fact, before the Div, those early adopters of the div had a lack of confidence that the table can do, DIV can, and they also paid for their words, trying to achieve vertical center in the div to understand what I mean , attempts to implement 100% Div layout in IE6 without CSS Hack understand what I mean. 100% Height problem, several div width between the adaptive problem, believe that any div + CSS design people will encounter. The advantage of table is not so much that it is as good as it is, but because it is old, it has no browser to ignore it, and because of its nature, people invent tables because they want the data to be neat and simple. Why, then, does Table have so much notoriety on its back? DIV advocates have a few more criticisms of the Table than the following.

Code bloat: You need to write down the &lt;table&gt;&lt;tr&gt;&lt;td&gt; three tags before you can start the real content, and the table's various tags also contain complex attribute definitions, and Div needs only &lt;div&gt; a tag. Page Rendering performance problem: The browser needs to complete the entire table before it starts rendering. Not conducive to search engine optimization: Search engine like content and decoration separate. Poor accessibility: Screen reading software and Braille browsers do not understand the contents of a Table well. Not Semantics (semantic): We need semantic Web.

1th: Code bloated

First of all, the only attributes in the Table that can't be defined with CSS are cellspacing, cellpadding, and other attributes can and should use CSS, so the rest is <table><tr><td> And <div> confrontation, I believe that a dozens of k size of the Web page, even if the use of dozens of Table, so the more out of the code can also be ignored, those who blame the table code bloated people in fact should check their coding habits, can write a table very bloated people, write Div It may not be simpler than that.

2nd: Page Rendering Performance issues

I use a 2004-year notebook computer, 1.6G CPU and 1G memory, this configuration, can not see the Table layout and Div layout in the page rendering any speed difference, in fact, this difference even if there is, relative to the network itself is also negligible delay.

3rd: Not conducive to search engine optimization

If you use CSS as much as possible, rather than the properties of the Table, the resulting code and DIV will not be very different, the search engine will discriminate against <table> tags, the basis of which I have not yet found.

4th: Poor accessibility

This is a built-in flaw in table, but most Div + CSS followers do not seem to reject the table for this reason.

5th: Not Enough semantics

The meaning of the semantic Web is much more far-reaching, not only in table and Div entanglement, even if the world wide, does not stipulate that table can only be used to display tabular data, many of the semantics of the table in the entanglement of people, in fact, can wait for HTML 5, that is the real semantics.

The purpose of this article is not to let you discard div join table, on the contrary, if the div can meet your design needs, Div is still preferred, but there is no need to avoid the table, otherwise it will go to another extreme. A lot of the design that uses DIV cannot be implemented simply, still can use Table, of course, whatever use, should use CSS to separate content and adornment. Div + CSS and Table + CSS are all legitimate designs, who are simpler to use. According to my experience, when you can foresee the format of your content, you will be added to the content of the ability to fully control its display format, you should use Div + CSS; 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 collapse, using Table + CSS is an insurance practice.

Article Source: Comsharp CMS Author: 35 km

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.