Tables on the web pages are quite common. Anytime where a data content is displayed on the page with rows and columns an HTML table may be used.
In the previous chapter we discussed about the charts and graphs. We said that the substitute for charts and graphs are tables.
The literacy rate in various states in India between 2001 and 2010 if provided using a table, it can be displayed as follows.
- Each year from 2001 to 2010 are column headers.
- Each state will be the row header.
- The actual content will be the intersection of the rows and columns.
Since this is a simple table with equal number of cells in each column or row, in other words no spanning of rows and columns are in the table, the following elements and attributes can be used to make the table accessible.
- All the header cells i.e. years from 2001 to 2010 and names of the states must be marked with <th> element.
- All the modern screen readers and browsers are taking care of the header and data cell relationship when the <th> element is used, however for consistency across screen readers and browsers add the scope attribute within the header cels. i.e. scope=‘col’ for column header and scope=‘ row’ for the row header.
- The <td> element must be used for the data cells.
- The <caption> element though optional can be used to add a heading to the table.