While tables are used a lot less frequently in web design than during the bad old days when they were used for layout, tables are still an important component of web development.

Goal: Create an accessible table with strong semantic markup.

Prerequisite: Basic HTML

Total Time (Core Material): 30 minutes

Core Material

1. Basic HTML For Tables
2. Table Accessibility
3. col and colgroup

Supplementary Material

Watch the Treehouse material on tables and (optionally) take the Quiz and Code Challenge at the end of the section (total time: 20 minutes). Disregard the video’s content about align, cell padding, cell spacing and vertical align in the second video: those presentational qualities should be CSS, not attributes.

Recommended Reading

Read the Web Platform Docs page on tables; read Chapter 6 of HTML & CSS by Jon Duckett; ignore the last two pages (correctly marked as “Old Code”). Read Chapter 8, Learning Web Design by Jennifer Niederst Robbins.

When You’re Done

While more fully-featured web development tools are typically used to create the structure and data of an HTML table, especially when they contain a great deal of information, it’s still important to understand how to create a table for yourself. You should have the ability to build a table up to three rows wide and three columns high by hand, and know how to add accessibility features to it.

Photograph by Horia Varlan, licensed under Creative Commons

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.