麻豆原创

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鈥痶wo parts鈥痶o assigning header rows and columns in tables: (1) the鈥痟eader鈥痗ells need to be identified and marked; (2) the appropriate鈥痙ata鈥痗ells need to be associated with their corresponding header. The associated row or column of data cells are called the鈥痵cope鈥痮f a header.
  • Add a table caption that briefly describes the purpose of the table, (e.g., 鈥淕rade Breakdown鈥�, 鈥淪emester 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

  • 奥别产础滨惭鈥檚 鈥痯age provides more detailed information about formatting tables with header rows and columns.
  • For very complex tables with subsections, consider using a.