HTML Tables - How and When to Use Them

Posted by Jessica Hough on 10/10/2011

Tables really have gotten a bad reputation over the years. With the gross misuse of them, it's not hard to see why. But if you have a little bit of knowledge, you can bring back the table in a way that is accessible to all your users.

web design tabular data cartoon

Why are tables "bad"?
Tables aren't inherently bad, they've just been abused over the years. Before CSS was invented, tables were pretty much the only way to make sure your website looked right in every browser on the market. But that's not what tables are for. Remember the mantra: Tables are for tabular data only.

1) Use a Descriptive Table Caption

Adding a caption in Javelin is easy. In the insert/edit table dialogue, simply check "Table Caption" and you're done! Well, not quite. After clicking "Insert" (or "Update") click in the space directly above your table and type a caption. The caption should be a brief explanation of the table.

My Favorite Foods
ChocolateCow

2) Use Table Headings

A technical primer first. Tables are made up of three main elements: is a table row, is a table data cell, and is a table header cell. Just having a header cell isn't enough, you also have to set it's scope. Scope, at its simplest, is confined to the column beneath the header or the row that extends to the right of the header. Heading cells and scope are accessed through the cell properties dialogue. Click a cell in your table to make the cell properties button active.

My Favorite Foods
SweetsProtein
ChocolateCow

3) Organize

Use enough rows/cells for the data you're presenting. Don't try to cram everything into one row. Don't put too many things into cells. When in doubt, start with too many of either and delete/merge them as needed. Don't copy and paste cells and don't paste from Excel.

What's "Accessibility"?
Accessibility is the practice of making your website available to a wider range of users, such as those with visual or motor impairments. Tables are very visual, but there are some simple steps you can follow to make them better.

A word of warning:

For those who use screen readers, tables have always been a challenge, and, despite advances in technology, still are. If you think you'll be catering to an inordinate amount of sight-impaired users, you may want to try to present your data in a way that is more conducive to being read aloud.