CSS vs Tables, the Eternal Struggle

October 22nd, 2009

Less Markup

A div based layout uses a fraction of the overall markup that tables do. Well styled divs replace the need to put align, height, and width properties in your HTML, they eliminate table rows and cells that do nothing but contain a blank space, and they reduce the amount of nastily nested ending tags that often reside at the bottom of our pages. Essentially, tag soup becomes tag tartar.

  • Less markup means smaller file size for faster loading.
  • A higher content to markup ratio for improved Search Engine rankings results from div layouts. Additionally, search engines can better navigation and group content found in the divs and lists used in CSS design.
  • Less code means fewer opportunities for coding errors.

Quicker Development

Although frustrating and seemingly mired with problems at first, creating websites with divs and CSS actually takes far less time and effort than creating a table based site. As with any technology, you just need to take a little time to learn it.

Visual Consistency

After having created dozens of sites both with and without tables I have found that with div and CSS layouts it is much easier to achieve a visual consistency throughout the site.

  • It is difficult to get every page to appear the same when using deeply nested tables due to the fact that one missed td or one missed spacer row causes text and image margins to appear off.
  • During the development process any change made to the table structure of one page needs to be replicated on others. This becomes cumbersome even after only a few pages have been created and often a change made on one page fails to make it to the other leaving inconsistent layouts between the pages.
  • One needs only to begin typing after a <div> tag near the top of the page rather than finding the proper table row 150 lines and 6 indentations into the code when using divs and CSS.

Code Readability

A basic div consists only of <div> and </div> tag while a basic table consists of <table><tr><td></td> </tr> </table> . All of these tags become further complicated with nested tables which eventually create a behemoth JSP which is difficult to dissect. Once the time is taken to learn div layouts reading through the page markup is extraordinarily easy. Unfamiliarity with the technology is not legitimate grounds for dismissing it as div layouts with CSS only take a few weeks to learn.

  • I once taught a back-end developer div layouts for some admin pages on a website. Having no CSS and div experience he picked it up in a few hours and was amazed and how much simpler the JSP became.
  • Using a CSS framework and div layouts my team was able to create the basic layout and integrate into it some image generating back-end code in less than an hour.

Improved Maintenance

Most will agree that the true power of CSS is in the way it allows a site to be redesigned or revamped without having to touch every single page in the site. Using a CSS driven div layout makes it possible to update the appearance of a site on a much more frequent basis without great effort.

  • Although we go through painstaking detail to separate business and action logic in our Java, PHP, and .NET code we make no efforts whatsoever to separate content from layout in our page design. A well coded HTML page contains almost nothing but content while the CSS file contains all of the layout properties. Just as we create business, action, domain, and DAO classes for separation of work and easier maintenance in back-end code, we should do the same on our front-end.
  • This article reviews the merits of CSS and comes to the conclusion that the separation of content from layout is the cornerstone of CSS: http://www.michaelthorn.co.uk/web-design-tables-versus-css.php
  • In order to change the layout of a table based site one must edit each and every page since the formatting properties are on the page. When changing the layout of a CSS driven div layout, it is possible to achieve site-wide dramatic changes with a few minor changes to one CSS file.
  • The classic example of this is: http://www.csszengarden.com/
    Select a design under the “Select a design” section to watch the site change its appearance completely without altering the HTML markup whatsoever. This demonstrates how much change one can make by only altering a single CSS file when using a div layout.

Javascript/DHTML

All modern JavaScript/DHTML/AJAX techniques rely on div layouts, with the obvious exception of tools designed for sorting and manipulating tables. Creating advanced DHTML interactions is time consuming and frustrating when using tables.

  • The DOM structure for a div based site is much simpler than a table based site meaning that DOM traversing, a crucial component of many JavaScript functions, is far easier in a CSS layout.
  • A great deal of DHTML simply consists of rewriting CSS rules on the fly. If the original HTML relies on tables instead of CSS for its formatting properties, this incredibly integral functionality of DHTML is rendered moot.
  • Virtually all jQuery, MooTools, and Scriptaculous plugins and examples are coded to interact with div layouts on the page. Relying on tables makes it difficult to integrate the wealth of wonderful JavaScript tools into our projects.

Browser Quirks

The battle cry of all of those who dismiss div layouts is that it is not well supported by browsers. This is a fair argument but it is also an argument whose legitimacy is diminishing over time.

  • IE6, by far the most problematic browser, can be targeted with IE6 specific style sheets.
  • Most browser inconsistencies actually arise from minor coding mistakes which some browsers forgive while others do not. Simply correcting these mistakes often fixes these problems.
  • CSS resets eliminate all browser default styles meaning that as you start your actual development your site will render consistently.
  • CSS Frameworks like BluePrint come already tested and guaranteed to render correctly in all major browsers, usually back to IE6.
  • Tables themselves do not render consistently across all browsers and are actually often much more difficult to style since many of the table and table cell properties such as “align” and “bgcolor” are deprecated as of HTML 4.01 (source).

Modern Design

Many modern design techniques are far easier implemented with CSS div layouts than they are with a table structure. Tiled backgrounds, drop shadows, and rounded corners are just a few of the examples of prevalent design trends made much easier with CSS.

  • This website, as well as many others like it, feature fantastic designs that can only be realized through CSS: http://cssremix.com/

Thinking Ahead

With CSS3 on the horizon it is clear that all future advances in HTML markup are going to be done in a table-less CSS driven manner. Quite simply, there is a ton of new functionality being developed for CSS based layouts while nothing new is happening for tables. It is crucial to begin understanding CSS now as to not be completely left in the dust in the upcoming years.