Table vs css--A Battle of life and death

Css

• Original Author: Sergio Villarreal
• Author profile: Mexican Web designer, 1993 contact Network, Personal homepage for overcaffeinated.net
• Original source:sitepoint.com
• Original publication date: May 27, 2004

Objective

The first time I surf the internet with a dumb terminal. Not long after, a single monochrome display in Minnesota can actually play the movie "Monty Python and the Holy Grail" through the server. There was no mouse, no good operating interface, let alone 24-bit color. Gopher is the only tool available. Search can only use Archie and Veronica. No one has ever heard of W3 (the World Wide Web), when the network seems to be enough.

Translator Note:

• 1. Dumb terminals. Much like a PC, but without its own CPU, memory, and hard drive. Transactions are handled through a common host.
• 2.Gopher. A client/server (Client/server) application that displays all information as a menu to end users (end-user) by performing FTP transmissions, remote logins (remote login), Archie lookup, etc., allowing users to browse a large amount of information. This allows users to access Internet resources without having to know (or enter) their addresses.
• 3.Archie is the first program to automatically index files on anonymous FTP Web sites on the Internet, but it's not really a search engine.
• 4.Veronica is a gopher type of resource that you can use to retrieve all the menu items in the Gopher space that contain the specified special words.
• After a while, strange code began to flood my search results, and while I was able to read what was needed, the code was annoying. My colleague told me it was HT ML, an Internet graphic language, and I used to learn a few ways to try to filter out HTML. And then, with the 256-color display and the first version of the Mosaic browser, everything started to get different.

• It has been a long time since then, and the technology has been incredibly improved, and the Web interface has been overhauled, pondered, and rebuilt countless times. Since I started working as a web designer, I have personally gone through tabular design, JavaScript sadness, the effort to develop CSS, and the more important and generally accepted web standards of every development period.

  At first, the Internet was created only by the idea of geek (technology fanatics), and there was only pure content on the Internet, and they didn't take into account the background colors and beautiful pictures. But in fact, people like to see more expressive forms when surfing. The Appearance of table (table) Design method solves this difficulty, we can control the layout through the table! We have started to "deceive" the system, can not make 1 pixel thin lines? Just insert a transparent gif dot in the row of the table, and then set a background color to achieve it! Can't control fonts? Then use another tag <font>!

  Before I touched the CSS and web standards, I had been designing them in a tabular way for years. The Web Standard design method is completely different from the previous one, it is efficient and it is fascinating. I like the new design method deeply and enthusiastically. It can use meaningful code to separate the content from the layout, but still keep the space and beautiful design, I will be "old", no longer using the older design methods.

  Until today.

  There has been a lot of discussion about web standards and CSS, just like every good keyword, it will become the next "big Shot" in the history of Web technology. It starts with the DOUGL as Bowman redesign of the Wired Web site (wired.com) and continues to evolve. 2003, Zeldman wrote "Designing with WEB Standards" book published, let us all see the dawn, designers around the world for new design methods and embrace cheers. It's structured, it's semantic, it's fast and lightweight.

  However, there are still some people who use traditional table design methods and even use <font> tags, they say the traditional method is easier, more convenient maintenance and rapid development. Who the hell is right?

  I decided to do an experiment myself to see how things change, and which way we choose to be better.

  Challenge

  I designed an imaginary website with image software. Then use the HTML4.01 to make it, use the table, without any CSS, as a contrast, and then use XHTML1.0 transitional to make it, the code is consistent with usability and accessibility specifications, and using CSS, try to avoid tables (unless the table is used to represent tabular data.) )

  The production process is divided into three stages, and detailed recording process, the pros and cons of comparison, to see what we get? What's lost? Which side should we stand on.

The first stage: Design the site

I started to design fictional sites. I suppose to make a website for an organization called The Butterfly Watchers Association (Butterfly Watch Association). Oh, this may be my best customer, will not participate in the design process. I try to make it a little bit more realistic to imagine the target users of the site, using traditional layouts and more authoritative fonts.

I want the site to be compact, effective, and concise. Also, I think there should be butterflies on the page, I looked everywhere for the right butterfly picture, and soon found the picture in stock.xchng . The blue butterfly stops in the green leaves, very conforms to the image of the site. After some processing and modification, this picture becomes the header of our page.

In the design process, I adhere to a number of ease of use principles. For example, try to minimize the size of the picture file. At first I was going to use the Garamond font on the navigation, and later considering that the user's machine might not have this font, I decided to use the Georgia font (this font is similar to the Times New Roman, the worst case can be replaced with the new one Roman font). But in the header picture, I still use the Georgia, because it is a picture.

The text uses a gray background, trebuchet MS fonts, and a Verdana font for the news, which looks good when it shrinks. I don't agree with the unwritten rule of using 4 fonts in a design.

I know very little about butterflies and the people who observe them, I put an article on rare butterflies in the home page important position, I think this is the user more interested in content. As an organization, there should be a lot of members, so I also put some member information. At the same time the news is also essential, I also added up. Then, add the copyright, some pixel decoration chart, a slogan (They flutter). We watch them.). The layout of the entire page is a header (header) followed by a row of navigation menus, followed by 2 column contents, and the last line footer. I set the "About" menu to highlight to show the Onmouserover effect, and the entire page looks like this:

OK, now you can start the code.

Phase two: "Use the previous practice to control the spacing using a transparent GIF picture."

If you are a web designer who has participated in multiple projects, the following structure is familiar to you:

<table bgcolor= "#ffffff" cellspacing= "0" cellpadding= "0" border= "0" align= "center" width= "> <tr> <TD colspan= "3" bgcolor= "#545454" ></td> </tr> <tr> <td bgcolor=" #545454 "></td> <td width=" 100% "align=" center ">content Goes > <td bgcolor= "#545454" > </td> </tr> <tr> <td colspan= "3" bgcolor= "#545454" ></td> </tr> </table>

Speaking in a form, we are accustomed to using it, because it is our most basic "building blocks". For example, use a transparent GIF picture to control spacing, and use various properties of a table to control position. Some people explain this: the table is reliable, the table layout of the page can be forward compatible! No CSS dares to fight against the table, the table can be suitable for all browsers and so on.

Let's start with a step-by-step representation of the entire design process.

1th Hour

Oh. As if time goes backwards, what do we use to define the background color without CSS? Oh, yes. It's bgcolor, thanks for the tip. OK, start making the table and previewing the effect. I've defined "align=center" so that I can center in all browsers, so it's so easy! The table looks not so bad, I have a reunion with my old friend. I skillfully use the transparent GIF picture to control the spacing, the work rapid progress! Well? How can there be a gap between headers and menus? Oh, the original images code after a space, IE browser will show it. This change is simple, remove the space is good.

2nd Hour

I use JavaScript to make the flip effect of the navigation menu:

<td ... >...</td>

JavaScript writes like this:

function CHBG (obj) {obj.bgcolor = "#E1E5DB";} function ChBg2 (obj) {obj.bgcolor = "#CBD1C3";}

In addition to my old design method A little forget, the whole progress is quite fast. Although I tried to minimize the nesting of the tables, the code looked a little complicated, so I added some notes to make it easier to find where we needed to change.

Encountered a small problem: the use of CSS can not eliminate the underline of the link. There may be a solution, let's use Google to search.

3rd Hour

Google search has not found a way, how to make a link without underlining? There must be a solution!

4th hour

Damn it! Because the underline cannot be eliminated, I cannot continue to make the picture menu. But the rules of the experiment were made by myself, and I could make an exception. I use a little bit of CSS to solve, just put a sentence style= "text-decoration:none;" In the link to the place on it, yay! resolved the menu underline the problem.

Well, we can then make the main 2 columns. Butterfly pictures in the body I used 2 tables to achieve a thin border effect, like this:

Let's take a look at the results of the first 4 hours on browsers outside IE6. Oh! It's very ugly in Firefox and looks good in opera and Netscape.

5th hour

Continue code ..., Debug and modify.

At work, I realized that <font> label controls the limitations of font size, I can't define many sizes. That's fucking hell!

News part of the text layout also encountered problems, in order to indent, I have to use more table nesting to achieve the effect. In order to make the butterfly picture in the body of the text in the right, I also have to add a table to solve. This kind of "cheat" type of typesetting makes me feel very helpless.

6th Hour

The design is over, it looks similar to the original design, you can click here to see .

How many tables are included, click here to view them.

Phase III: We don't need forms!

Below we will look at what is based on the web-standard, CSS layout design. I'll start with the identity of the content. I will try to make the logo semantically and avoid unnecessary tags.

The header is a picture, but it is also a caption, so I write code like this:

I'll think later on how to correctly display the title (ideally, we care about the content as much as possible and care about the layout as little as possible). Other headings (News,sightin GS and Membership) will be identified as

The menu is essentially a unordered list (list), so it will be identified as a list. Paragraphs do not need to be categorized (we use the inheritance selector to "hang" them in the included layer). I'll compare the original content text to see how many extra tags I need to add to achieve the layout (I'll try to avoid adding tags).

This is the original content text. Look at the original code, which conforms to the xhtml1.0 transitional specification. Note that all elements have been included in the <div> with the name defined. The dates in the news are also added to the class of date. You can see that the code is very simple.

1th Hour

The border that defines the "container" layer is 1px. Center the content by defining "Text-align:center" in the body style. In order to be centered in all browsers, margin:0 Auto is also defined in "container" (meaning top=0, Right=auto, Bottom=0, Left=auto). Centered processing is as easy as a table.

The padding "top" and "bottom" values that define "body" are 20px (not defined directly in "container" to fit all browsers).

An unordered list (LI) must be defined as "display:inline" so that the menu is displayed on one line. I added a navigation icon between the menus. These navigation icons are defined with a x,y background method, which can be precisely defined in the position, similar to the following:

Background:url (menubullet2.gif) no-repeat 4px 9px;

The menu's click Color Change effect uses the link hover style, no longer needs JavaScript.

I set the head of the butterfly picture for the

2nd Hour

The first item (home) of the menu uses a different icon and I have to hide the original background and add an extra ID (frst) to the Home menu:

#hMenu ul Li#frst

Another (contact) icon:

background:transparent URL (menubullet3.gif) no-repeat 615px 9px;

I can't use CSS to control 2 columns with the same height, fortunately, I can use the background image to adapt. I have defined "container" to repeat the background vertically.

background: #fff URL (bgmain.gif) repeat-y;

3rd Hour

CSS definition boxes are much more convenient than tables, especially when many of the properties of a border are useful.

Now I start to define

I float the news layer (float) to the right of "sightings" and "membership". Define "copyright" Layer "clear:both", so that it can follow the floating layer below. Floating in the body of the butterfly picture on the right, text can automatically wrap around the picture. Define the 1px border of the picture and set the padding distance to achieve the original 2 table nesting effect.

Also found some problems: the copyright layer and the content layer has a partial overlap.

4th hour

The error shown is the float:right of "sightings" and "membership"; Definition concerned. It seems strange to be able to solve the problem by floating them on the left. I used Firefox for the first Test, well, looks not bad, but the menu icon has a few pixel shift.

There are some CSS tips to fix the display in non IE browsers, such as different property values for different browsers.

I use the !important value in the same element definition, and the same definition is written in the first priority, and this value is not supported by IE browsers.

Background:url (menubullet2.gif) no-repeat 4px 6px!important;
Background:url (menubullet2.gif) no-repeat 4px 9px;

In CSS, if the same element has more than one definition, the last one is valid. However, because IE does not support!important, IE will use the second defined value, while the other browsers will take the first defined value.

All done, look at the results here .

Conclusion

Table-based design

I test pages with a variety of browsers that I can find, including Linux, Windows, and the Macintosh platform's browsers. The pages in a table layout all look the same in different browsers. "It's as strong as rock," which is the first evaluation of the layout of the table.

However, when you need to modify part of the page, the layout of the table is quite laborious to change. This is a problem, if we use CMS (Content management System), the content needs to be formatted is more troublesome.

The whole design time is a bit long, because I have forgotten the old way, if again, I think it may save 1-2 hours.

I describe the grunt design as a lot of "old-fashioned" (work) work, although I'm often surprised by the advanced design techniques. Using a design based on pure CSS, I am usually accustomed to decomposing the design and analyzing the bugs gradually. You don't need to work with table design, you just have to throw a table inside the design. Let's look at the CSS process again.

The design based on CSS

It feels better to design with CSS. The code changes directly and transparently, and I can clearly control the whole process, and the design of the table is like a brick. The larger the page changes, the more comfortable and efficient the CSS design is.

CSS design is also very meaningful to save bandwidth, and all styles are extracted in a separate file, the entire site with one or several style sheet files, you can make the entire site size smaller.

There are also many benefits to separating the layout information from the content. In the future, I can change the whole site at any time without needing to modify any content, like CSS Zen Garden. It also adds ease of use, and search bots will make it easier to find your pages (remember: Google is your most important source of visitors).

At the end of the production, I also tested in different browsers on different platforms. IE5.5 and IE6.0 performed perfectly. Error on the IE5.0, menu and some indentation invalidation, dislocation of the page header effect look at the following picture:

Well, there's no doubt that this bug can be fixed, but given the scope of this article, I'm not talking about it. If this is a real customer project, I certainly cannot sacrifice I E5.0 users. In older browsers, the design of CSS is a mess.

IE4

Netscape 4.7x

It looks better if you do some code processing for browsers that do not support CSS (for example, @import for Netscape).

Although it's highly productive when you're familiar with CSS based design, you have to spend a lot of time learning rules, box models, browser processing techniques, and many theories, and you need to keep practicing. In short, CSS is simpler than tables, but if you want to use a pure CSS design, be prepared to invest a lot of time learning. Even if you are an experienced developer, be prepared to deal with a variety of bugs, and sometimes it can take hours to process a bug.

Winners

CSS and web-standard based design wins. Just looking at the two methods ' code is enough to make a choice. CSS offers more benefits (primarily in terms of usability). In fact, the root cause is my laziness. If using the form design, the customer contacted me after a year to say that needs revision, I may tell him that I joined the Army, is in a foreign country. If I use CSS, I will not think for the customer revision, because I do not need to overturn all.

Thank

Thank you, Ava McBride, using browsercam to help test my design.