Tables

Tables are a great option to provide a structured way of showing large amounts of information and they make organizing information in a clean and readable way very easy. 

Tables should only be used for tabular data, not for layout or positioning items like images next to text.

Do you need a table?

Before you create a table, make sure that a table is needed. For example, while the columns have a consistent theme, if the rows have no relationship, using lists to represent your data would likely make your data more accessible.

For example, the table on the left could easily be represented, as on the right, as two separate lists: 

Create accessible tables

An accessible table must contain the following:

• Caption
• Table row and/or column headers
• Information/Data

An accessible table should never contain:

• Blank cells
• Headers (Header 3, Header 4, etc.) Use Table or Row Headers instead.

Use a caption

To distinguish one table from another on the page, each table needs a unique caption.

A table without a caption violates SC 1.3.1: Info and Relationships (Level A) and SC 2.4.6: Headings and Labels (Level AA)

Use row and column headers

When creating a table, it is required for accessibility to include table headers (both row and column headers are preferred) that properly label the information its relative column and row contains. As stated within the Web Accessibility Tutorials — Table Concepts:

Header cells must be marked up with <th>, and data cells with <td> to make tables accessible. For more complex tables, explicit associations may be needed using scope, id, and headers attributes.

A lack of table headers violates the WCAG 2.1 1.3.1 Info and Relationships standard.

For more information regarding Table Accessibility, please check out the following:

• Tables - from Stanford's Office of Digital Accessibility
• Web Accessibility Tutorials — Table Concepts
• Tables - Video from the Department of Education

Create a table

1. In the Text Area, click the table icon:

1. Decide how many rows and columns you want.

1. Add table header and column. For your table to be accessible, unless you're creating a calendar, you'll want both a table header row and column.
2. Delete the width and height properties (Drupal will fill the max-width based on the display device).
3. Click OK.

Edit a table

Right-click an existing table to edit cells and the number of rows and columns.

Add column headers

To create column headers: 

1. Select the Row you wish to use as a header for your columns.
2. Look for the Header column toggle. Column headers are added when the toggle is slid to the right.
3. If not already on the right, click the toggle. 

Add row headers

To create row headers: 

1. Select the Column you wish to use as a header for your rows.
2. Look for the Header column toggle. Row headers are added when the toggle is slid to the right.
3. If not already on the right, click the toggle. 

Insert text or images before or after a table

If you need to insert just before or after a table: 

1. Click on the table and a yellow outline around the table will appear with two arrows
2. To insert before the table, click on the top arrow
3. To insert after the table, click on the bottom arrow

Example table

Here is an example of content that is suitable for a table. 

By default, the table layout is responsive to the user's screen size and will fold into a two-column layout with headers on the left for a viewport that is 640px or less.

*Resize your browser to view responsive behavior.