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.
Components of an accessible table contain the following:
- Table row and/or column headers
Use tables for tabular data
Only use tables for communicating tabular data (like charts of statistics), not for page layout. The content in tables can appear awkwardly on tablet and mobile browsing.
Use row and column headers
When creating a table, it is required for accessibility to include table headers 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.
The 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:
Create a table
- In the Text Area, click the table icon:
- Decide how many rows and columns you want.
- 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.
- Delete the width and height properties (Drupal will fill the max-width based on the display device).
- Click OK.
Edit a table
Right-click an existing table to edit cells and the number of rows and columns. *Learn how to customize the look and feel of your tables using utility classes.
Here is an example of content that is suitable for an HTML 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 viewport to across the 40em (640px) breakpoint to see the responsive table style.