Chapter 5. Tabular Data

You’ve probably heard the mantra “tables are for tabular data, not layout.” Originally designed to display tabular data correctly in HTML documents, they were soon misappropriated as a way to lay out web pages. Back then, understanding how to create complex layouts using nested tables was a part of the standard skill set of every web designer. Yet using tables in this way requires large amounts of markup, making a website increasingly complex and difficult to maintain, as well as causing pages to load slowly. This method also creates problems for users who are trying to access content using screen readers or other text-only devices. Since then, the Web Standards movement has pushed for the replacement of tabular layouts with CSS, which is designed for the job and is, ultimately, far more flexible, as we’ll discover in Chapter 9.

But, far from being evil, tables can (and should) still be used for their true purpose—that of displaying tabular data. This chapter will illustrate some common, correct uses of tables, incorporating elements and attributes that, though used infrequently, help to make your tables accessible. We’ll also look at how CSS can make these tables more attractive and usable for those viewing them in a web browser.