ΒιΆΉΣ³»­΄«Γ½

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

  • °Β±π²ϊ΄‘±υ²Ρ’s β€―page provides more detailed information about formatting tables with header rows and columns.
  • For very complex tables with subsections, consider using a.