Tables

Tables should only be used to present tabular data (rows and columns of related information). They should not be used for layout or visual formatting, as this creates accessibility barriers and can cause issues on mobile devices.

Consider presenting information without a table. If the same information can be presented using headings and lists, this is preferable.

Covered In This Tutorial

• Best Practices
• Visual vs. Screen Reader Experience
• How to Create a Table
• Make the Table Accessible
  • Table Captions
  • Column and Row Headers
• Examples
• Removing Unwanted Table Formatting
• Video Tutorials
• Test for Accessibility
• Resources

Best Practices

• Use tables only for data: Do not use tables for page layout.
• Keep tables simple
  • Avoid merged cells (spanned cells).
  • Avoid blank cells. Use text such as “N/A” or “none” to indicate that there is no data.
  • Don’t use nested tables.
  • Consider splitting complex tables into multiple simple ones.
• Ensure the table is accessible.
  • Add a table caption (or heading) to describe the table.
  • Use column and/or row headings so screen readers can announce them properly.
• Ensure tables are responsive and mobile-friendly
  • Avoid wide tables that force visitors to scroll left and right.
  • Try to limit the number of columns or consider breaking the data into multiple smaller tables.

Visual vs. Screen Reader Experience

Sighted users can scan tables and visually connect data with the correct row and column headers. People using screen readers cannot make these visual associations so extra HTML markup is needed.

With proper markup (headers, and scope), screen readers announce the associated headers as they move through the table cell by cell. For instance, in the table below, sighted visitors can easily see where Biology 205 is held. Adding the proper markup ensures screen reader users get the same clarity.

Without Proper Markup (What a screen reader user hears)

“Table with 10 columns and 7 rows. Department, Class Number, Section, Room Number, Days, Time, Instructor, BIO, 100, 1, 5, Mon, Wed, Fri, 10 AM – 11AM, Brown, 102, 1, 5, Tue, Thur, 11 AM – 12 AM, Smith, 205, 2, 6, Tue, Thur, 9 AM – 10 AM, Brown, 315, 3, 6, Mon, Wed, Fri, 1 PM – 2 PM, Smith, BUS, 150, 1, 13, Mon, Wed, Fri, 9AM – 10 AM, Roberts, 210, 2, 8, Mon, Wed, Fri, 8 AM – 9 AM, Garcia.

After listening to that, would you know where Biology 205 meets? Probably not – the relationships between headers and data aren’t conveyed.

With Proper Markup (Clear, associated announcements)

“Table, 7 rows, 10 columns… Row 4: Department Biology; Class Number 205; Section 2; Room Number 6; Days Tue, Thu; Time 9:00 AM–10:00 AM; Instructor Brown.”

Now the location for Biology 205 is obvious: Room 6.

This is a modified example from Creating Accessible Tables on WebAIM.

How To Create a Table

1. Place your cursor where you want the table to appear.
2. Click either the Table menu or the the Table icon in the editor toolbar.
   
3. Select the Table option.
4. Drag your cursor along the table preview, to select the desired number of rows and columns. This will insert an empty table into your page.
5. Enter your data into the cells.
6. Add a table caption (see detailed instructions below).
7. Label all column and/or row headings along with the corresponding scope attribute (see detailed instructions below).
8. Use the table menu or icon options to add or delete rows and columns as needed.
9. Optional – add a table class to style the table.

Make the Table Accessible

Though not required, tables should include a short description so all users understand what the data represents. This can be done with either a table caption, an HTML heading, or both.

Table Captions (<caption>)

• A <caption> is part of the table itself and is programmatically tied to that table.
• Screen readers announce captions when the table is reached, giving users helpful context before hearing the data.
• Captions are especially useful when there are multiple tables on a page.
• Keep captions short — one brief line or phrase.

How To Add a Caption

• Place your cursor somewhere inside the table.
• Select the Table icon or the Table menu in the editor, then choose Table Properties.
  
• Add a check next to the Caption option.
• Click Ok.
• A blank field (the caption) will display across the top of the table.
• Click inside the caption area and write a brief description of what the table contains.

Headings Before Tables (H2, H3, etc.)

• Headings are part of the page structure and help users navigate content.
• A heading placed directly before a table gives context but is not programmatically associated with the table.

Using a Heading AND a Table Caption

• Using both gives clarity and accessibility for all users.
• Avoid duplication — don’t repeat the exact same text in both the heading and the caption.
• Neither is required, but both are helpful when used correctly.

Styling the Caption

A heading can be applied to the caption to change the font styles.

1. Select the entire caption.
2. In the toolbar, locate the formatting drop-down menu that typically displays “Paragraph” by default.
3. Click the menu and select the appropriate heading level.

Row and Column Headers

Properly marked header cells help screen readers communicate how table data relates across rows and columns, ensuring users who rely on assistive technology can interpret the information as clearly as sighted visitors. Adding a scope attribute to each header cell further defines whether it applies to a row or a column, strengthening these associations.

In html, the <td> element defines a table data cell. By default, all cells will initially be <td> cells. Any cells used as headers need to be converted to <th> cells which defines a table header.

Each <th> also needs a scope attribute to identify wether it’s a column or row header. This ensures assistive technologies can correctly associate headers with the right data cells.

How To

1. You should have already created a table and added data to the table as well as a table caption.
2. Define column headers:
   1. Drag across all of the column header cells to select them.
   2. In the Editor, select Table → Cell → Table cell properties. This will bring up a pop-up window.
   3. Set the Cell Type to a Header Cell.
   4. Set the Scope to Column.
   5. Select OK.
      
3. Define row headers:
   1. Drag down over all of the row header cells to select them.
   2. In the menu of the Visual Editor, select Table → Cell → Table cell properties. This will bring up a pop-up window.
   3. Set the Cell Type to a Header Cell.
   4. Set the Scope to Row.
   5. Select OK.
      

Example Table

Examples

Removing Unwanted Table Formatting

When you create a table, the editor often adds unwanted formatting such as specified table or column widths. These styles can cause tables to look uneven or behave poorly on smaller screens.

How To Fix

1. Place your cursor somewhere inside the table.
2. In the editor, click on the Format menu and select Remove table styling.
   

Video Tutorials

Test for Accessibility

Use SiteImprove or WAVE to check a table’s accessibility.

Resources

• Applicable WCAG Guidelines
  • WCAG 1.3.1 – Info and Relationships
  • WCAG 1.3.2 – Meaningful Sequence
  • WCAG 2.1.1 – Keyboard Accessible
  • WCAG 2.4.6 – Headings and Labels
• WebAIM: Creating Accessible Tables
• W3C Tables Tutorial