News source: COMSHARP
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 Classified ads in the evening newspaper, or unlock ads in the corridor, but don't let anyone know that you use Table. Finding Table in your source code is like a salesperson who pulled up his trousers and found out that he was wearing white socks.
Table is so ugly and bloated. Even if you only display a simple piece of content, you still need the three basic tags <table><tr><td>, and a bunch of messy attributes are added to each tag. Unlike <div> is simple, neat, and fashionable. It is a perfect match with CSS. They form the most perfect Box model. They are like boxes in reality. You put things in them and then modify them freely. Arrangement, if you are tired of one layout, it doesn’t matter, simply change the CSS definition, and a brand new layout will be born; unlike Table, Table is like a sideboard in a canteen, rows and columns, rustic and greasy. They are greasy, like our parents, slovenly, taking everything home and stacking 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 such an ugly website in my life. But their website is one of the few that can pass all W3C standards verification, which means that their website is perfect in terms of 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 says 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 cause problems when the Web is rendered by non-visual devices, which are designated screen readers and braille browsers. In addition, Table will force users to scroll left and right on large display devices. Therefore, Web designers CSS should be used 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 an entire 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 middle of the 2000s, especially in China. Under the subconscious mind of Da Weimei, people crammed everything that could be crammed into one page into the homepage. Table was like a housekeeper in the old era. , although everything cannot be arranged in an orderly manner, at least it is arranged in the same 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 <P> or < a> has been given special semantics in advance (although they can also be used in the Box model); on the other hand, out of people's hatred of Table ruling a bloated era, at the end of an era, successors will work hard to erase the old ones. Traces of the times, the fate of those symbols or representatives of the old era are mostly like this. People do not simply forget them, but draw a clear line between them.
This is where all the unfair treatment of 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 has been 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. Needless to say, Div is excellent. However, when people say Div + CSS, it seems to imply that Table cannot use CSS. This 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 once said with little confidence that if Table can do it, Div can do it, and they also paid for their words. At the price, people who are trying to achieve vertical centering in Divs will understand what I mean, and people who are trying to achieve 100% Div layout in IE6 without CSS Hack will 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. However, why did Table later gain so much notoriety? Div advocates accuse Table of nothing more than the following.
The code is bloated: you need to write at least three tags <table><tr><td> before you can start the real content. In addition, the various tags of Table also contain complex attribute definitions, while Div only needs < div>a label.
Page rendering performance issues: The browser needs to completely read the entire table before it starts rendering.
Bad for SEO: Search engines like content to be separated from polish.
Poor accessibility: Screen reading software and braille browsers cannot understand the content in the Table well.
Not semantic enough: We need a semantic Web.
Article 1: The code is bloated.
First of all, the only attributes in Table that cannot be defined with CSS are Cellspacing and Cellpadding. All other attributes can and should use CSS. In this way, the rest are <table><tr><td> and <div>, I believe that for a web page that is easily tens of K in size, even if dozens of Tables are used, the extra code can be ignored. Those who complain about the bloated Table code should actually check their coding habits. A person who can write a very bloated Table may not be as concise as writing a Div.
Article 2: Page rendering performance issues.
I use a 2004 laptop with 1.6G CPU and 1G memory. Under this configuration, I can’t see any speed difference between Table layout and Div layout in page rendering. In fact, this Even if there is a slight difference, the delay relative to the network itself can be ignored.
Article 3: Not conducive to search engine optimization.
If you use CSS instead of Table attributes as much as possible, as mentioned earlier, the difference between the generated code and Div will not be very big. Will search engines discriminate against the <table> tag? I have not found the basis for this statement so far.
Article 4: Poor accessibility
This is an inherent flaw of Table, but most Div + CSS fans do not seem to reject Table for this reason.
Article 5: Insufficient semantics.
The meaning of the Semantic Web is much more profound. It is not just entangled in Table and Div. Even W3C does not stipulate that Table can only be used to display tabular data. Many people are entangled in the semantics of Table. People, you might as well wait for HTML 5, that is the real semantics.
The purpose of this article is not to make you abandon Div and join Table. On the contrary, if Div can meet your design needs, Div is still the first choice, but there is no need to avoid Table, otherwise it will go to the other extreme. Many designs that cannot be easily achieved using Div can still be achieved using Table. Of course, no matter what is used, CSS should be used to separate content and decoration. Div + CSS and Table + CSS are both legal designs, use whichever is simpler. According to my experience, when you can predict the format of your content and have full control over the display format of the content you are about to add, you should use Div + CSS; when the content you are about to add is not fixed and you cannot predict it For its format, if you don't want the page to collapse, using Table + CSS is a safe approach.
Source of this article: COMSHARP CMS Author: 35 kilometers