For any business organization, the financial status is released every quarter. The monthly profit of any business organization for a period of 10 years is put on a tabular format, the left column contains the row headers. Each year say from 2001 to 2010 are the row headers. In this case the first row have just 4 cells each merged with 3 columns. Eg: Q1 is a merge of January, February and March, Q2 is April, May and June, Q3 is July, August and September. The last quarter Q4 is October, November and December. The second column will have 12 columns from Jan to December excluding the first column of years (row headers). Starting from 3rd row the actual data begins.
The row headers are clear with each year from 2001 to 2010. Mark them with <th scope=‘row’>. The problem is with column headers.
Each data cell will have two column headers i.e. month (jan to dec) and also the quarter it belongs to (Q1 to Q4). In this case the general scope and <th are not sufficient.
Instead of the normal <th and scope attributes use the headers and id attributes to associate more than one column header to the data. First assigning an unique id value to each column header i.e. Q1 to Q4 and Jan to Dec. Then now use headers attribute in each cell with corresponding header id values to form a relation between one data cell to multiple headers.
Eg: <td headers=‘q1, jan’>2%</td>
In the example above q1 is the id value of quarter 1 and Jan is the id value of January.
Fixed header
In A web page shows the GDP of all the countries in the world between 2011 and 2015. The left most column has the names of more than 100 countries i.e. the row header. The top row contains years from 2011 to 2015 i.e. years. Since the list of countries are more than 100 the user has to scroll the page down to see the values after certain rows. In the process the first few rows will be scrolled up and the user can no longer see them. Since the first row is the column headers the user need it whenever they want to refer. So the column headers i.e. the first row should be fixed and has to be visible even when the rest of the rows are scrolled.
To make the first row fixed few developers create the first row in a different table and the data in a different table. The first table with one row having all the column headers will be fixed and the data table with rest of the rows can be scrolled. However, the relation between both the tables cannot be made either with scope attribute or using headers and id value association. Hence the fixed header table cannot be made accessible in a general table association techniques.
How to make fixed header tables accessible?
Fixed headers or scrollable tables and tables that have sorting property are beyond the scope of this course. Please refer to the advanced web accessibility development course.