You are here: Home Web Team Accessibility Data Tables

Data Tables

Guideline: data tables should have proper markup so associations between table elements are communicated to end users using screen readers. 

Accessible data tables:

    • have a Caption
    • identify Row and Column Headers
    • do not have empty cells or headers
    • do not define table or cell widths -- they let the browser determine width
    • used only for data, not for layout


In Plone - In School Loop


Example of accessible table:

Birthday Cake Preference
Joe Carrot
Beth Chocolate
Bob Fruit
Mary Vanilla


Edit your page and select Insert/Edit Table.

Plone Insert Table

Edit columns/rows and add a Summary.

Plone Insert Table Summary

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 

Edit the cells of the table -- the first row is for the Table Caption.

Plone Table Edit

To add a row, right click a cell and select Row, Insert Row Before.

Table Insert Row

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.

Click Edit HTML Source.

Plone Edit HTML

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

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

Table headers on both columns and rows tell screen readers how to interpret the data for the user.

Plone Add Table Headers 

Columns and Row Headers are bold in the table.

Plone Accessible Table

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

Document Actions