Tables Concept

Tables provide a layout structure to organize and present logical relationships. For example, if you had a list of days, a list of appointments on specific days, and a list of specific times for those appointments on specific days, it would make sense to organize the information in a table structure to clearly and accurately present that information.

Tables and Structure

Data tables require specific structural markup to designate the correct column and row header information. By identifying the appropriate column and row headers programmatically, individuals using assistive technology can then navigate and parse the table information in a logical manner.

Column Headers

For data tables that have only column headers across the top of the table, all that is needed is to specify the first row of the table as the headers. For web pages, this can be done by using the <th> element to identify the appropriate table cell as the header.

Column Example

Header <TH>Header <TH>Header <TH>Header <TH>
Data cellData cellData cellData cell
Data cellData cellData cellData cell
Data cellData cellData cellData cell

Row Headers

For data tables that have only row headers down the first column of the table, all that is needed is to specify the first cell in each row as the header. For web pages, this can be done by using the <th> element to identify the appropriate table cell as the header.

Row Example

Header <TH>Data cellData cellData cell
Header <TH>Data cellData cellData cell
Header <TH>Data cellData cellData cell

Column and Row Headers

For data tables that have both column and row headers, it is necessary to identify both the column and row header cells. For web pages, additional markup is necessary to programmatically define which cells are considered to be header cells for the entire table. This is accomplished by using the scope attribute in conjunction with the <th> elements to define the table headers.

Header <TH>Header <TH>Header <TH>Header <TH>
Header <TH>Data cellData cellData cell
Header <TH>Data cellData cellData cell
Header <TH>Data cellData cellData cell