You are here: Home Web Team Accessibility Core Skills and Resources Tables in Web Pages

Tables in Web Pages

Guidelines for Accessible Tables

Tables can take one of two forms: layout tables and data tables. Layout tables are used to position elements on a Web page and have largely been replaced by Cascading Style Sheets (Css) to control positioning/layout. Data tables convey a relationship between two or more items represented by row and column headings. 

Best Practices for Data Tables

  • Data tables have a Caption
  • Data tables identify Row and Column Headers and do not have empty cells or headers
  • Display simple tables, rather than complex tables wherever possible, minimizing the use of merged cells
  • Do not define table or cell widths -- they let the browser determine width

Learn More

Instructions for Webmasters and Editors

For District Editors in Plone

Example of accessible table:

Birthday Cake Preference
NamePreference
Joe Carrot
Beth Chocolate
Bob Fruit
Mary Vanilla

Create the table in the WYSIWYG editor

  1. Edit your page and select Insert/Edit Table.
    Plone Insert Table
  2. Edit columns/rows and add a Summary.
    Plone Insert Table Summary
  3. In the Advanced tab, check Table Caption -- the Summary and Table Caption provide context and explanation for users with screen readers.
    Plone Add Table Check Caption 
  4. Edit the cells of the table -- the first row is for the Table Caption.
    Plone Table Edit
  5. To add a row, right click a cell and select Row, Insert Row Before.
    Table Insert Row

Edit the HTML code

Now we need to identify Row and Column Headers in the HTML code — the headers are read aloud from screen readers to users and they help users understand the meaning of the data.

  1. Click Edit HTML Source.
    Plone Edit HTML
  2. Change the column headers from <td> to <th scope="col">text</th>
    Make sure to edit the closing </td> tag to </th>
    Plone Add TH to Table HTML
  3. Change the row headers from <td> to <th scope="row">text</th> 
    Make sure to edit the closing </td> tag to </th>
    Plone Add TH to Rows
  4. Table headers on both columns and rows tell screen readers how to interpret the data for the user.
    Plone Add Table Headers 
  5. Columns and Row Headers are bold in the table.
    Plone Accessible Table

For School Webmasters in School Loop:

Edit a Rich Text Editor Element.
Click the Table icon:

 School Loop Add Table

Click the Headers drop down menu and select Both.
Edit both the Caption and Summary

School Loop Edit Table Properties

To add rows, right-click the table and select Row, Insert Row After.

School Loop Add Rows 

Accessible tables have bold column and row headers:

School Loop Accessible Table