In this guide

↓ How to build a table within Drupal CMS

↓ When to use a table

↓ Examples of inaccessible tables

How to build a table within Drupal CMS

1. In the Main content section of your node, click Add Content block.
2. In the Search field, type “Table”.
3. Click Add on the Table block.
4. Add a Table Caption for your table.
   • The caption functions like a heading for a table. Screen readers will announce the content of captions and help users to find a table and understand what it’s about and decide if they want to read it. Captions are especially useful if there are multiple tables on the page.
5. Build your table.
   • Enter your table data into the cells provided.
   • The first row of the table will always be formatted as row headers and the first column in the table will always be formatted as column headers.
     • Table headers tell screen reader users how to read the table. When users navigate table cells, the screen reader will announce which column and row they are in. This helps the user understand the data in relation to the rest of the table.
   • The default view will have 2 columns and 5 rows. 
     • You can add a new row by clicking Add Row.
     • You can also use the Change number of rows/columns dropdown.
       • Enter the number of columns you want in the How many Columns field.
       • Enter the number of rows you want in the How many Rows field.
       • Click Rebuild Table.
6. You can also choose to Import from CSV instead of manually building the table
   • Click Choose File.
   • Select the file from your computer.
   • Click Upload CSV.
   • The table content should appear in the table cells and a success message will appear above the table content if it was imported successfully.

When to use a table

A table should be used to help site visitors analyze or compare data easily. For example:

• When presenting data that can be compared across multiple categories.
• When organizing precise numerical data, such as statistical data.

Tables should be used sparingly. If the content within the table is not presenting analytical, comparison data, you should consider presenting this content in another format. When content can be organized as a description list (e.g. 2-column term and description), a list should be used. Lists will generally be more accessible on mobile screens since they will not require a horizontal scroll or create narrow, unreadable columns.

Tables should not be used solely for text formatting purposes.  These are called layout tables and should be avoided. 

Examples of inaccessible tables

Blank table headers

When a table has blank headers, there is no information explaining the rest of information in the table, making the data very unclear.

In the example, it is unclear if the data in the cells is simply a list of areas in the floor plan (the page this table was taken from) or if there is any relationship between the columns.

Incorrect table headers

When adding table content, the first row will always be formatted as the header row.  Therefore, content entered into this row must be added as header content.

In the case of this shuttle schedule, the first row was treated as a standard line in the table which means when a screen reader announces this table data, it will treat “Batesville – Sherriff’s Office (Myer’s Street)” as the header for the first column and “7:00 am” as the header for the second column, which is incorrect and will cause confusion.

Missing table caption

Without a caption, it may not be immediately clear to a non-visual user what data is presented in the table. Users may miss important information if they skip the table or they may spend unnecessary time going through the table to try and understand the data inside.

An example page with 2 tables presents testing done for Legionella.  However, it is unclear exactly what data each table is presenting and how the tables differ.  If a caption caption were added to each, any confusion could be avoided.

Missing table data

When a screen reader encounters a table cell with no content, it will remain silent.  This can cause confusion for the user as they may think something should be happening, or perhaps they didn’t navigate properly.

The table showing program outcomes does not have content in some cells.  In this case, instead of leaving the cells completely blank, it may be better to add “No outcome available” or “Outcome not available at this time” or something similar. Adding some content will make it clear to a screen reader user that there is no bug or issue and that there simply wasn’t data to report for this cell.