Using HTML tables in the correct way

by

Using HTML tables in the correct way will help make your sites more accessible to all viewers and user agents. Using tables for layout of webpages was a popular technique starting in the late 90s that had fell out of favor by 2006-2007 with the rise of web standards movement. Tables primary purpose is to display tabular data. If you are using tables of layout with empty cells, missing table headers <th>, or fixed widths you are using them in an incorrect way that introduces accessibility problems into your web site.

The preferred method late 2000s method for laying out pages was to wrap content in <divs> and use CSS (cascading style sheets) to place the <div> areas in columns or grids. HTML 5 introduced additional structural elements in HTML such as <article>, <nav>, and <aside> that could also be used with CSS layout techniques. A big problem with layout tables used in the late 90s was that they mixed presentational data in with content. CSS was created so the presentational markup could be separated from the ‘semantic’ HTML content. That way the same content could be more easily styled in a variety of ways by switching out style-sheets. It would be much more difficult to change the appearance of layout tables with inline fixed widths and other deprecated presentational markup that shouldn’t be in HTML.

Some key features of accessible tabular data tables as I understand them, are:

– They have a <caption> tag included at the top of the table. These can be hidden visually but be seen by screen readers or other tools that read text.
– They have header cells, <th>, which help to label table columns or rows (depending on how the table is laid out). Site visitors using screen readers can jump between these headings.
– They have a <thead> tag that’s used to wrap the header cells, <th>.
– They have the have the same number of columns in every row and same number of rows in every column. Fancier layouts with cells spanning multiple columns can yield accessibility errors in validators and navigational problems in screen readers.
– They are basic and straightforward in their layout. Nested tables within tables or cells spanning multiple rows will confuse  accessibility validators and screen readers.

I’ll update this post as I learn more about best practices for using data tables in HTML. I’ll also share more insights in theming HTML 5 content as I discover new techniques.