Tabular Data & Tables

Webstandards banner 750

Tables are particularly difficult to understand when read by a screen reader when not coded properly. By default, screen readers will read each row, left to right. By the time the listener hears the data on row 3, they may no longer remember which column is which.

For that reason we use tags to identify column and row headers. The scope attribute identifies which data cells are associated to this heading. When coded properly, the screen reader will read the heading, then the associated data, the next heading, followed by the associated data, etc.

Captions are added for additional explanation.

Example 1

Listing of Newspaper Employees
NameDepartment Title Supervisor
Mary JonesWorld News Editor Yes
Tom SmithLocal News Copywriter No

 

HTML Code for Example 1:


   
   
       
           
           
           
           
       
       
           
           
           
           
       
       
           
           
           
           
       
   
Listing of Newspaper Employees
       

   
NameDepartment Title Supervisor
Mary JonesWorld News Editor Yes
Tom SmithLocal News Copywriter No

Example 2

Simple Data Table
  Column 1 Header Column 2 Header
 Row 1 Header Column 1 Row 1 dataColumn 2 Row 1 data
 Row 2 Header Column 2 Row 1 dataColumn 2 Row 1 data

 

HTML Code for Example 2


 
 
   
     
     
     
   
   
     
     
     
   
   
     
     
     
   
 

  Simple Data Table
 
Column 1 Header Column 2 Header
Row 1 Header Column 1 Row 1 data Column 2 Row 1 data
Row 2 Header Column 2 Row 1 dataColumn 2 Row 1 data

Best Practices

  • Always use elements for header items.
  • Always use scope attributes in tags unless id and headers attributes are required.
  • Always use elements.
  • Use summary attributes for complicated tables.
  • Use
    elements for tabular data. Use
    and elements to affect layout.
  • Avoid cells that span multiple rows or multiple columns. 

 

CMS Entry

Summary

Must be added for accessibility

  • Select Table
  • Enter Summary information

Add summary information

Header Row or Column

  • Highlight the row or column
  • Choose Format as table header

Declare a header Row

Add a Border

  • Select table
  • Select with Border

Format Table

;