Semantic (X)HTML Markup: Using Tables Appropriately

Semantic (X)HTML Markup: Using Tables Appropriately

This is the seventh article in the Semantic (X)HTML Markup series. Before we begin, you'll want to read the previous articles:

1. Semantic (X)HTML Markup: An Introduction
2. Semantic (X)HTML Markup: Headings and Paragraphs
3. Semantic (X)HTML Markup: Creating Emphasis
4. Semantic (X)HTML Markup: Blockquote, Q, and Cite
5. Semantic (X)HTML Markup: Structuring Lists
6. Semantic (X)HTML Markup: Styling Lists

In this article we'll learn how to use perhaps the most misused semantic element: the table element. Like all the other (X)HTML elements we've learned about, there's a right and wrong way to use tables. The W3C created the HTML table model to "arrange data — text, preformatted text, images, links, forms, form fields, other tables, etc. — into rows and columns of cells." They specifically state that tables are not to be used for layout:

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

The accessibility problems of layout tables are why avoiding tables for layout is checkpoint 5.3 of the Web Content Accessibility Guidelines (WCAG). Using tables for layout can also rob you of one of the greatest benefits of CSS: its flexibility. Using CSS, the entire look of a site can be changed with a few edits to one style sheet. If complicated, nested tables were used instead, creating even minor layout changes can become a huge undertaking.

In recent years, many web developers have begun listening to the guideline to avoid layout tables and now use CSS to lay out their web pages. Instead of fitting sections of the page into rigid table grids, this new layout method involves placing content (marked up with semantic headings, paragraphs, and lists, of course) into div elements for each section of the page and then using CSS to position and style these divs.

Unfortunately, many forgot that tables still have a valid and valuable place in web design and tried to get rid of tables in their designs altogether. This is not the correct approach either. The table is still a valid (X)HTML element, and when you are trying to mark up tabular data, it is incorrect to use anything else!

Since the Semantic (X)HTML series is focused on how to use and mark up semantic elements, not about how to not use certain elements, this article will focus on the proper use of tables for data rather than on how to create layouts without tables.

http://www.communitymx.com/content/article.cfm?cid=0BEA6