How to Avoid the HTML5 Table-Based Layout Trap

By Andy Harris

Tables are pretty great. They’re a terrific way to present certain kinds of data using HTML5. When you add the and concepts, you can use tables to create some pretty interesting layouts. In fact, because old-school HTML didn’t really have any sort of layout technology, a lot of developers came up with some pretty amazing layouts based on tables.

Using tables for layout causes some problems though, such as

  • Tables aren’t meant for layout. Tables are designed for data presentation, not layout. To make tables work for layout, you have to do a lot of sneaky hacks, such as tables nested inside other tables or invisible images for spacing.

  • The code becomes complicated fast. Tables involve a lot of HTML markup. If the code involves tables nested inside each other, it’s very difficult to remember which element is related to which row of which table. Table-based layouts are very difficult to modify by hand.

  • Formatting is done cell by cell. A web page could be composed of hundreds of table cells. Making a change in the font or color often involves making changes in hundreds of cells throughout the page. This makes your page less flexible and harder to update.

  • Presentation is tied tightly to data. A table-based layout tightly intertwines the data and its presentation. This runs counter to a primary goal of web design — separation of data from its presentation.

  • Table-based layouts are hard to change. After you create a layout based on tables, it’s very difficult to make modifications because all the table cells have a potential effect on other cells.

  • Table-based layouts cause problems for screen-readers. People with visual disabilities use special software to read web pages. These screen-readers are well adapted to read tables as they were intended (to manage tabular data), but the screen-readers have no way of knowing when the table is being used as a layout technique rather than a data presentation tool. This makes table-based layouts less compliant to accessibility standards.

  • Table-based layouts do not adapt well. Modern users expect to run pages on cell phones and tablets as well as desktop machines. Table-based designs do not easily scale to these smaller form-factors.

Resist the temptation to use tables for layout. Use tables to do what they’re designed for: data presentation. The CSS-based approaches you can use to generate any kind of visual layout you might want are easier, more dependable, and much more flexible.