Add 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.

Components of a useful table contain the following:

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

Important: We do not recommend using tables to create layouts due to accessibility issues.

Creating a table

1. In the Text Area, click the table icon:
   
2. Decide how many rows and columns you want.
   
3. For your table to be accessible, unless you're creating a calendar, you'll want both a table header row and column.
4. Delete the width and height (Drupal will fill the max-width based on the display device).
5. Click OK.

Note: You must use table headers (<th>) in a table and not section heading elements. Using  section heading elements (<h1>-<h5>) in a table will result in an accessibility violation. 

Editing a table

Right-click an existing table to edit cells and the number of rows and columns. *Learn about customizing the look and feel for your tables using utility classes.

Example table:
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 viewport that is 640px or less.

*Resize your viewport to across the 40em (640px) breakpoint to see the responsive table style. 

Related: Customize the look and feel for your tables