Follow the instructions below to create tables that will resize responsively on small devices, as well as comply with federal web accessibility laws.

Tables should not be used to format a page; they do not perform well responsively and it may not meet web accessibility laws. Please see Changing a Basic Page Layout page for complete instructions on how to change a page layout.

Creating Web Accessible Tables

People using screen readers can have the row and column headers read aloud as they navigate through the table. Screen readers speak one cell at a time and reference the associated header cells, so the reader does not lose context. 

Header Row

To comply with federal web accessibility laws, tables must be created to organize data with logical relationships in a grid.  Accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. Selecting First Row as the Headers option will provide the necessary code to comply with federal web accessibility laws.  The header row describes the content in the column.  Each column should contain unique data as displayed in the screenshot below.

table example screenshot


A caption identifies the overall topic of a table and provides the required title. The text must have a heading style chosen.  In the example above, Heading 2 has been selected.

table properties screenshot

Creating Responsive Tables

A style has been added to Drupal that will automatically arrange the table headers along the left side and will allow a phone user to scroll through the columns horizontally on the right. It also ensures the tables will stretch to the full width of the block in which it resides.

The long tables of information with many columns will flow off the edge of the screen on phones, and will not be able to be viewed. Additionally, more than one paragraph should not be entered into a cell. The format will not appear correctly on phones.  Instead, split the information into an additional row or column or remove the information from a table and place it in a location without formatting limitations. 


Table phone view screenshot

In order for the style to take effect, you must select First Row as the Headers option.

Table properties are available by right clicking in the table.