Page 1 of 1

The Evil of Tables Rate Topic: -----

#1 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon



Reputation: 1335
  • View blog
  • Posts: 3,400
  • Joined: 28-November 09

Posted 01 March 2010 - 04:12 PM

The Evil of Table Design

By now you've probably heard that tables are horrible design practice by another designer or developer, if not... Tables are HORRIBLE design practice.

But why? Many of the early pioneers of web design used tables for design, it works, it's cross-browser compatible, and you don't have to learn another language! So why bother? What's the point? All those designers with several more years experience just want to make it harder on you!

The point is that even the creator of the html table regards it as bad design practice.

To the point then...

Size

No matter what form of justification you may have it is irrefutable that html table documents take up substantially more space than a good html/css layout. This can add up to easily a difference of 50 or more percent, and while that may not seem like much on a large site it's catastrophic.

The larger a file the longer it takes to load, I'm sure we can all agree on that. The larger the more bandwidth is consumed, and again not a major issue on smaller sites but on a corporation the difference between 25 kilobytes and 60 kilobytes is huge, some basic math to demonstrate my point:

Small Site:
25 kB x 100 Visitors = 2500 kB bandwidth
60 kB x 100 Visitors = 6000 kB bandwidth

Large Site:
25 kB x 500,000 Visitors = 12,500,000 kB or 11.9 gB
60 kB x 500,000 Visitors = 30,000,000 kB or 28.6 gB

That's enough to cost some bank, and quite a bit if we're talking large table sites with nesting that can be above 200 kB.

Size matters.

Load

This ties closely in with size. Load times between tables and html/css is miles apart as stated earlier but with nested tables the loading is even worse. One set of tables must be rendered before any others can, lagging the load speed long enough that I doubt that visitor will even register on your hit counter.

SEO

Google and other search engines are known to (metaphorically) HATE table designs because they are next to impossible to derive good information from. This is due to the lack of a good structured order in the source code, the load times (Even Googlebot hates slow load), and the lack of any form of relevant hierarchy.

CSS when used well can have a logical order, clean and easy to read by even the tech inept and the html code doesn't mean the elements are stuck in one place either (float, positioning, etc)

Flexibility

Into the design aspect. Tables are rigid, inflexible, and a pain to redesign on a constant basis. A small task such as changing the size of one cell could effectively collapse the entire design in seconds, not to mention the probably 10+ other pages you would have to do the same thing to.

Tables are also rigid. No matter how you resize the page they stay the same width and height making it a real problem designing for multiple resolutions.

CSS allows one sheet to be linked to from multiple html files and using the same html you can do infinite things with that one css file (Don't believe me? Check out the guys at http://www.csszengarden.com )

CSS also has dynamic ways of setting the measurements of the page to conform to whatever size screen.

Speed

Would you rather change MULTIPLE table files to fix one thing or just go into one file and change it and have it appear across site? One CSS file vs who knows how many table files.

Accessibility

You know that little cute blind kid? Ya, him. Table design puts his screen reader through nightmares trying to figure out what order to read things in but ends up with a garbled mess of reading through cells and rows or useless information instead of the actual content. Congrats table users, blind kid weeps from pain, I hope you're happy...

Final Notes

Remember kids, Geosites burned for its transgressions against web standards.

Is This A Good Question/Topic? 2
  • +

Replies To: The Evil of Tables

#2 Shane Hudson  Icon User is offline

  • D.I.C Technophile
  • member icon

Reputation: 342
  • View blog
  • Posts: 1,286
  • Joined: 06-December 09

Posted 04 March 2010 - 01:04 PM

Well done Lemur, tables are VERY bad practise! I shall link to this in one of my posts for Web Design For Idiots.
Was This Post Helpful? 0
  • +
  • -

#3 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon



Reputation: 1335
  • View blog
  • Posts: 3,400
  • Joined: 28-November 09

Posted 04 March 2010 - 05:23 PM

CoughHelpfulCough

(joking...)
Was This Post Helpful? 0
  • +
  • -

#4 Skizzler  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 02-April 10

Posted 12 April 2010 - 09:35 PM

I wanted to add a non-design acceptable use case to quell some of the table-hate up in here. (This regards tables in a strictly NON-DESIGN/LAYOUT capacity.)

Tables (for the many reasons listed so far) are a poor choice for any part of layout and design. There does exist a use case for them, however: tabular data. Imagine getting game stats on ESPN where data is not presented in well-organized rows and columns... a nightmare. When appropriate (tabular data only), tables can add important structure and allow for more user-friendly consumption of data. Note that Lemur only lists tables as horrible design practice, don't be dissuaded from using them when they are necessary to properly convey information.

This post has been edited by Skizzler: 12 April 2010 - 09:39 PM

Was This Post Helpful? 0
  • +
  • -

#5 JaxEffect  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 10-July 10

Posted 10 July 2010 - 04:07 PM

Thanks for the information. I knew about most of this but never knew about the accessibility problem. very informative
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1