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