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.

Using a table simply as an organizational layout structure is not recommended. Instead, it is better to use CSS tools such as a grid, which also creates a more responsive layout structure for different screen sizes/devices. If you’d like to learn more about how to use a grid in Canvas, see MiraCosta faculty member curry mitchell’s page design course for tips.

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 cell	Data cell	Data cell	Data cell
Data cell	Data cell	Data cell	Data cell
Data cell	Data cell	Data cell	Data 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 cell	Data cell	Data cell
Header <TH>	Data cell	Data cell	Data cell
Header <TH>	Data cell	Data cell	Data 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 cell	Data cell	Data cell
Header <TH>	Data cell	Data cell	Data cell
Header <TH>	Data cell	Data cell	Data cell