CSS vs. Table Based Design

CSS vs. Table Based design has been one of the hottest topics of debate in the web design field. Scores of sites proclaim the benefit of good CSS coding, flaunting load speed, standardization, and search engine optimization as the greatest benefits. Advocates of table design often downplay these benefits, claiming less than stellar improvements to a convention that may not need fixing. Combined with the overall utility and widespread acceptance of table design in the development community, table based design has a strong case of its own. So which should we use, tables or CSS? This is where the debate falters. Both sides are able to make a strong case because both sides have valid points. Tables and CSS do many of the same things, but each can also accomplish different things at different levels. A valuable perspective involves a consumer focused approach. Most developers have someone in mind, be it an audience for a personal or corporate webpage, or a client looking to promote their site to an audience. At the end of the day, a good developer must be able to answer to those who pay the rent.

As many know, tables were originally included in HTML so that academics would have a means of organizing a web page. CSS came along to handle all of the formatting issues associated with HTML, so that HTML could remain focused on conveying information, not stylistic interests. Unfortunately, by the time CSS had gained enough ground to be viable in code, tables were being used to handle the majority of layouts in common pages. Reluctant developers took time to convert, and even today many programmers still only use table design. This may be due the CSS learning curve.

Tables are easy enough to manage - they work just like a table in a spreadsheet, employing rows and columns to organize data. CSS, on the other hand, is based on more conceptual coding, such as floats, collapses, margins, and positioning. Shifting from one to the other not only requires modifying code, but modifying the way a developer thinks. As mentioned previously, CSS formatting allows a developer to do some very creative things when necessary. When it is not necessary, though, a table could accomplish the job in a way any developer would recognize.

Developers must be sure to consider their customer when selecting a format style. If the client is concerned with standards, and wants to be sure not to use any deprecated strings in their web page, CSS is surely the best option. If your client is more concerned with reaching the widest possible audience, tables may be the best option. There are plenty of users still running old browsers, some as old as Netscape 4, or similar versions of Internet Explorer. With a few tweaks, a table is sure to display properly on these machines, while CSS would require multiple “hacks” to produce the desired outcome. Technology continues to bound forward, but we must always consider the large number of users not on the bleeding edge. Knowledge and practice with both tables and CSS will provide the versatility to handle any situation.

4 Responses to “CSS vs. Table Based Design”

  1. Very useful article in plain English. Thank you

  2. Thanks for the article. Just want to add another argument.
    Nowadays people go to the computer shop and acquire a wide screen of 1200 pixels wide up to pixels wide. Coming home they see their favorite css build sites looking like small postal stamps (hopefully centered) in a screen filled with the background color because they are all hard coded in css for lets say 800*600 so the designer can place his/her image at hard coded location x,y,z. Give me a scaling table designed site that does [width ="95%"]. Then you get on your screen what you’ve paid for! If it’s tooooo wide one can even _choose_ to reduce the active window size to your liking.

  3. Well, Pieter, that is not a good arguement for tables, my friend! Scaling is just as easily done with CSS and divs, if thay’s what the designer wants. But I would argue that having a width of 95% produces a site that looks fine at the lower res. but starts to look ridiculous as it gets wider (high res.) Sure, the user can reduce the active window size, but why should a user have to keep changing the active window size because all site designers are building for different widths? Let’s try and standardize things here.

    Whatever tables for layout users say, they are wrong in using tables for layout!

  4. The one that continues using tables is because it does not dominate or does not know CSS. To design in CSS is far better, by the subject of order, maintenance, accessibility, navigability and thousand reasons more.