HTML5 and CSS3 All-in-One For Dummies
Book image
Explore Book Buy On Amazon

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.

About This Article

This article is from the book:

About the book author:

Andy Harris taught himself programming because it was fun. Today he teaches computer science, game development, and web programming at the university level; is a technology consultant for the state of Indiana; has helped people with disabilities to form their own web development companies; and works with families who wish to teach computing at home.

This article can be found in the category: