Table Design

From CSS Discuss

Jump to: navigation, search

Introduction: Are tables really dead?

Using HTML tables for layout is bad for many reasons, and so using HTML tables for layout is to be discouraged.

Carl - In answer to the "answer Needed" above, lets say that tables CAN be bad. They don't have to be, in my opinion, at least in some applications.

  • Tables can be very messy for non-programmers to deal with later (to add or update content, for example). This may or may not matter depending on the site's needs and future plans.
  • They can be nested so poorly that the code takes a long time to render in a browser - making the site feel very slow to the user. Tables within tables within tables, all to create a particular look.
  • Even if structured efficiently, tables take up bandwidth.
    • [ Low Res ] I disagree or at least believe this statement should not be in this list. Multi-column layouts require multiple DIV tags to replicate the same design that a TABLE layout would generate. To get around certain box-model issues with IE, nested DIV tags are required. Very quickly the number of characters required to define a multi-column layout with DIV tags equals the number of characters required to define the same layout with TABLE tags. Furthermore the CSS rules required to make the DIV tags create the multi-column layout increase the amount of bandwidth used to transfer the data to the user. Also keep in mind that at best we're talking a difference of less than 1 kilobyte in bandwidth for a complex layout. That's nothing even on a 14.4kbps dial-up connection, especially since modem compression protocols allow text to transfer at higher speeds because it is easy to compress. Bandwidth should not be a reason to choose DIV over TABLE tags for your layout. However, DIV-based layouts are still the way to go, IMHO.
      • Why are they still the way to go?
        • [[[ Prii Or ]]] The basic answer that everyone seems to have overlooked is: Tables are supposed to be used to show tabular data. Using tables in your html as a styling measure (using tables to put the menu on the right side for example) goes against the idea of separating content from style. So having said that, the answer to the question "why are DIVs the way to go" is simple: it's the only one that makes structural sense (from an information markup point of view). Now, if the webpage in question doesn't care about information markup (or maybe isn't even offering any information - medium is the art?) then anything goes. You don't even have to use CSSs or valid html for that matter: if it works, use it. (very FEW web pages falls in this category tho...)
  • Tables without a defined height (which is normally the case) will download the contents to find the length of the table. There can be a delay - again, it can look slow to a user waiting for things to appear on the page.
  • It is relatively easy for sloppy programmers to forget to close a tag, or for a tag to be deleted by accident by a later individual. Bye-Bye /td! As silly as this sounds, you might be surprised....


Validation can avoid this, and since validation is also a prerequisite for good results with CSS, this is not a convincing reason.
Actually, I sometimes find I lose closing DIV tags.... :(
  • Tables can at times be quite horrible in regards to accessibility. A blind user, or even Google, may find it hard to dig down and find the content depending on the conplexity of the table layout and the positioning of the content.
True, but simple table layouts (rough grids manipulated with CSS margins and padding) can actually aid accessibility. This is close to a Holy War . Also, remember that in some cases, tables are the appropriate markup. See Using Real Table Headers for an example.
  • Tables are theoretically not as simple as a strict CSS layout. Theoretically, of course, if (sigh) no silly hacks were needed. Actually, even with hacks a CSS layout tends to be far simpler in my view. But there is a learning curve.
With the complexity of standards, the lack of quality control, and the slow release cycle of browsers, I doubt such a day will ever come. And even then, there'll always be legacy "bad browsers". IE5 is the NN4 for the next generation of developers (hat tip to Mark).
  • CSS allows for greater ability to control layout than tables, at least when using cutting-edge CSS ideas. Once Netscape Navigator 4 finally dies, this will be much easier!


  • From a big-picture standpoint, many believe that content and presentation info should be separate. But that's a much bigger debate I'll ignore for now.
  • However, CSS has its own kind of tables: display types that exist specifically in order to make table-based layouts without using HTML table elements.

Authoring Examples

Some good examples, and links to more. DougBTX
More than a shameless plug, i have used both tables and DIVs to make that site. Informative view source. [[[ Prii Or ]]]

(( Answer Needed ))

Tables sometimes ok?

Seen recently on one mailing list or another: it is ok to use tables for layout as long as certain rules are followed. Which ones?

Answer: For inputing Data

Personal tools