麻豆精品

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 麻豆精品 S痶wo parts 麻豆精品 S痶o assigning header rows and columns in tables: (1) the 麻豆精品 S痟eader 麻豆精品 S痗ells need to be identified and marked; (2) the appropriate 麻豆精品 S痙ata 麻豆精品 S痗ells need to be associated with their corresponding header. The associated row or column of data cells are called the 麻豆精品 S痵cope 麻豆精品 S痮f a header.
  • Add a table caption that briefly describes the purpose of the table, (e.g., 麻豆精品 S淕rade Breakdown 麻豆精品 S�, 麻豆精品 S淪emester Schedule. 麻豆精品 S�
  • 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 麻豆精品 S� 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檚 麻豆精品 S痯age provides more detailed information about formatting tables with header rows and columns.
  • For very complex tables with subsections, consider using a.