Table Design or Tableless
"Perhaps our eyes need to be washed by our tears once in a while, so that we can see Life with a clearer view again." - Alex Tan
Long time ago everybody used Tables for layout. Today, lots of websites still use tables (for example, Google has tables). But, recently there has been a big shift to tableless web design and tableless web layout. Instead of using tables for layout you can use CSS, improve web accessibility, and make HTML code semantic and not presentational. So, should you use tables or not? It depends. If I wrote google.com I would not code it with CSS but if I am developing a blog I would definitely go tableless.
CSS was designed to separate content from design. Tableless design refers to using CSS to position HTML elements instead of using tables for layout. As a result of separating design from structure, you can offer different layouts for different devices (phones, PDAs, etc) so going tableless really improves web accessibility. Screen readers and braille devices follow a logical structure and have fewer problems with tableless designs.
Also, using tables for layout creates lots of embedded tables and good content usually lives inside the inner-most embedded tables. Search engines can read tables, but once the design goes about three tables deep, most spiders will have issues and might decide that you placed the content deep in the page because it’s not significant. Some people argue that spiders have no problem indexing deeply tabled content but even if the information gets indexed it certainly might still be considered not important. So, generally, if you can avoid tables and move towards XHTML and CSS, you will have a much cleaner design and code.
Tableless design results in smaller, more compact, and faster Web pages which equal bandwidth savings. Embedded tables and spacer images can increase download times, bandwidth, and latency of a busy or popular site. Tableless design is also great because maintaining a website that goes through many changes is significantly easier and faster. You do not have to touch the content, the HTML file, because all layout changes can be made in the separate CSS file.
Are there any problems with using Table-less design? The biggest problem with tableless design is cross-browser support. Every browser is developed differently and thus, you see variations of how your website looks and/or functions across browsers. To fix this you might need to tinker around with your CSS and maybe even use complex hacks and workarounds. If your website is currently written in tables, it might be hard to convert it to a pure CSS layout. Also, if you need to support super old browsers that very few people use, they might not have CSS support.
In summery, avoid using tables for layout because tables are slow, inflexible, create accessibility issues for screen readers, don’t degrade gracefully, and they do not print. They also usually prevent incremental rendering (it takes longer for the page to show anything), they are semantically incorrect markup for layout, and they make redesigns much harder. It might take a little up-front learning to understand CSS, but in the end, using CSS for layout should be faster to implement than using tables for layout. But do not avoid tables completely. Tables are acceptable and appropriate to use for tabular data.
January 13th, 2008 at 3:31 pm
Thanks for the great article.