Skip to main content

Tables

Tables are an excellent way to display complicated data in an easy-to-read format. Why is it important to designate header rows and columns? Assistive technologies, such as screen readers, use HTML formatting information, including headers, to communicate table structure. Users of screen readers greatly benefit from tables that are formatted with row and/or column headers because they make content easier to comprehend (See Figure 1).

A table displaying data indicating column and row headers
Figure 1: A table displaying data with the appropriate row and column headers.

Tables should be used to display tabular data rather than using tables to achieve a page layout as demonstrated in Figure 2 below.

Example of a table improperly being used to organize page content. Displays an image in one column and paragraph text in another adjacent column.
Figure 2: A table used to achieve a page layout which is not recommended.

Best Practices

  • There are two parts to assigning header rows and columns in tables: (1) the header cells need to be identified and marked; (2) the appropriate data cells need to be associated with their corresponding header. The associated row or column of data cells are called the scope of a header.
  • Add a table caption that briefly describes the purpose of the table, (e.g., “Grade Breakdown”, “Semester Schedule.”
  • Avoid using large tables with many rows and columns that are difficult to read on smaller screens and mobile devices. Instead, break up content into separate, smaller tables.
  • Avoid using tables for layout purposes (see Figure 2). There are accessible ways to achieve a similar layout (e.g., an image displayed beside a block of text). However, there are accessible ways to use a table for layout purposes if the proper reading order is maintained for keyboard users and screen readers.

When creating tables in html, ensure you are using the proper code to ensure table accessibility. This is what the code should like:


<table style="border-collapse: collapse” border="1"> 
    <caption>List of Important Assignments</caption> 
    <tbody> 
        <tr> 
            <th scope="col">Assignment</th> 
            <th scope="col">Due Date</th> 
            <th scope="col">% of Grade</th> 
        </tr>
    </tbody> 
</table>

Note the <th> tag that denotes that these cells are the table headers. The scope indicates whether the headers are column headers (scope="col") or row headers (scope="row"). The <caption> tag goes directly after the <table> tag and appears above the table when displayed.

Resources