The myth of Tableless design

HTML tables have received a lot of unnecessary bad press over the years. The problem lies in the fact that tables were never intended as a layout tool. So during the initial years of web design when people started using tables to format their web pages – adding 1 pixel spacers, padding cells to align content, nesting tables n levels deep and more, it was time something had to be done. CSS was the answer. CSS rescued developers from the awful practice of using table for content layouts. It was all very fine until word started going around that tables were an absolute no no in any html design. Even if you had to display some kind of tabular data, you had to do it using CSS. Creating a tableless design had become the hallmark of an expert web designer. That was the last straw, and the myth persisted.

the myth of tableless design

Cartoon created with help of pixton.com

Why HTML tables are important

Table are important, necessary (and good) for presenting multivariable data, they were designed with that sole purpose in mind. If you are presenting a school time-table, flight schedules, stock information or any other tabular data then tables are a good fit for that. Using a combination of DIVS, LI, UL for displaying data is semantically incorrect and will also leave them inaccessible to search engines or screen readers. By inaccessible I mean that they will not be able to interpret the information correctly. If your tabular data is stored using tables then you can easily parse the data programmatically, which becomes difficult if the same data is structured using DIVS, LI and other assortments.

So in conclusion HTML tables are bad as a tool for content layout, leave the layout work for CSS; but good and essential for presenting tabular, multivariate data.

One thought on “The myth of Tableless design

  1. That’s a cool cartoon 😛

    You make a very valid point, but I do use tables for tabular data.

    The main downside of tables is the inconsistent usage with JavaScript. If you want to update a TBODY with the response of an AJAX request, you need to build each TD individually, then add that to a TR then append to your TBODY element. Writing to the innerHTML property is against the W3C spec.

Comments are closed.