Beginning HTML, XHTML, CSS, and JavaScript®

Chapter 4. Tables

Tables display information in rows and columns; they are commonly used to display all manner of data that fits in a grid such as train schedules, television listings, financial reports, and sports results. In this chapter, you learn when to use tables, and the markup that you need to create them.

To begin this chapter, we'll look at some examples of tables, then quickly move onto the basic elements that are used to create them. Having learned the basics, you can then go on to learn some of the more advanced features of tables such as adding captions and headings, and how to achieve more complicated table layouts. Along the way, you will also learn some deprecated markup that was designed to control the appearance of tables because, even though it is preferable to use CSS to control the way a page looks, you may sometimes come across pages that use the older markup.

The chapter ends with a discussion of accessibility issues that relate to tables, because it is important to understand how a screen reader would read the contents of a table to users with visual impairments.

Introducing Tables

In order to work with tables, you need to start thinking in grids, so let's start off by looking at some examples of how popular web sites use tables.

In Figure 4-1 you can see the NFL web site. This page shows the standings for each team in a table. You can see a list of teams down the left, and for each team there are columns providing different stats, including number of games won, ...