Build Better Tables

Accessibility Interactions

Screen readers read column and row headers to provide the listener with information on the table's content and structure.

Best Practices

  • Do not use tables solely for formatting pages, links, or other information.
  • Use tables for data that fits well into rows and columns.
  • Use table headers to describe the contents of the table columns (and rows as needed).
    • The table headers should clearly communicate the data below them.
  • Avoid spanning (also known as merging) multiple table cells in a row as screen readers may not properly parse them.

Tutorial on Tables

Do you need to use a data table on your web page? If so, learn how to appropriately format table content to ensure everyone can understand your data.

Build Better Tables in...

LibGuides

Here is an example 3-by-2 table created within LibGuide's rich text editor.

State State Capital
Ohio Columbus
Indiana Indianapolis
Kentucky Frankfort
LibGuides Table Properties window has fields for rows and columns, and a drop-down menu for identifying the headers.

It's key to identify which row or column is the table header so the screen reader will attribute the data cells to the correct category. In this case, the first row — state and state capital — is our header.

You identify which row or column acts as the headers with the Table Properties tool in LibGuides. 

Source: Boston College LibGuides Accessibility Guide

typing slash-T in Wordpress brings up the table block

WordPress

1. To create a table type /t and then click Table 

In the Wordpress Table modal box, enter the column and row counts into the fields, then click the Create Table button

2. Enter the number of rows/columns you want to start with and then click Create Table

Clicking header row allows you to choose the header section in the side panel

3. With a cell in the first row selected, turn on the Header section in the Table Block properties pane on the right. You’ll notice it changes the font in the first row and inserts another row.

Learn More...