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:
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.