Tables are a great way to present data and information, but it can be tricky to implement them and make them readable for your community. It's always best to keep them as simple as possible and only use them to present data sets rather than just present information. If your content is easy to read as a list, it's best to forgo the table and use a bulleted list.
We have a Table Wizard built into our WYSIWYG Editor, so you can design each table accurately and make them accessible and responsive.
There's a lot to cover here, so use this table of contents to find the information you need:
Best-practice tips
Before you start building tables, here are some best practice tips you should know.
- Avoid nesting tables in content such as accordions, tabs, or side panels. The added styling of the container can interfere with the table's responsiveness or appearance.
- You should always use tables to present data and avoid using them for layout purposes, such as using a table to display images with corresponding text next to them. However, if you need to use a table for layout purposes, you must add a presentation tag to the table element in HTML. It should look like this: <table role="presentation">
- Tables should be self-explanatory; your community should look at the table and know what data it presents. They should also be captioned and referenced in any text they appear with.
- In general, it's better to build tables from scratch in the WYSIWYG Editor. Copy and pasting tables can introduce elements in the HTML that could interfere with any styling that you try to apply, particularly responsive classes which make your table accessible.
- Your tables should be easy to scan. In general, you should align text to the left and align numbers to the right. You should also organize your data in a sequence or groups, such as an alphabetical list of service fees.
- Once you've created a table, check how it looks on a mobile device and ensure it's fully responsive. Additionally, you should ensure your tables are created as simply as possible. Tables with too many columns will create tables with a long horizontal scroll on mobile devices, making them hard to follow.
Before you start building it, we recommend watching this video so you can ensure your table is fully responsive.
How to create a table
You can create tables in the WYSIWYG Editor of pages. To create a table:
- Open the WYSIWYG Editor of your page and place your cursor where you would like to build the table.
- Select the Insert Table icon in the WYSIWYG Toolbar to open a dropdown menu with an 8x8 grid.
- Use this grid to draw up your table.
- Once you've added a table, you can edit it by placing your cursor within a cell and using the icons below the grid in the Insert Table tool. These icons allow you to do basic editing of your table. They include options to: Insert Row Above, Insert Row Below, Delete Row, Insert Column to the Left, Insert Column to the Right, Delete Column, Merge Cells Horizontally, Merge Cells Vertically, Split Cell Horizontally, Split Cell Vertically, Delete Cell, and Table Properties.
- Alternatively, open the Table Wizard to create your table there. You'll need to open the Table Wizard at some point to make your table responsive.
Using the Table Wizard
Using the Table Wizard, you can customize every part of your table as you create it. There are 3 tabs for you to work with:
Each of these tabs will help you craft an intelligible and accessible table.
Table Properties
The Table Properties tab lets you design and style your table and apply the responsive class. It will show you a preview to see what your table looks like as you create it. Here are your options:
| Field | Function |
| Columns | Use the plus and minus buttons to add or delete columns |
| Column Span | Merge or split column cells horizontally by selecting a cell and using the plus and minus buttons. |
| Rows | Use the plus and minus buttons to add or delete rows. |
| Row Span | Merge or split rows cells horizontally by selecting a cell and using the plus and minus buttons. |
| Height | Set the height of the table. The default measurement is in pixels, but you can change it to percentage or points using the dropdown menu. |
| Width | Set the width of the table. The default measurement is in pixels, but you can change it to percentage or points using the dropdown menu. |
| Cell Spacing | Set the spacing between cells in pixels. |
| Cell Padding | Set the padding between the cell content and the cell border in pixels. |
| Alignment | Choose to have the cell content aligned to the left, middle, or right. |
| Back Color |
Set a background color for the entire table. Note: when you apply responsive styling, the table will get backfill from your theme. |
| CSS Class | Apply the Responsive Table class styling |
| Back Image | Select an image from your Files Library to use as the background for the whole table |
| More Table Styling... |
Create a new style for the table. Note: we recommend applying all table styling set in the theme. |
Cell Properties
The Cell Properties tab lets you design the individual cells in your table. Click on each cell to change its properties, or click Select All Cells to edit them all. Here are your options:
| Field | Function |
| Height | Set the height of the cell. The default measurement is in pixels, but you can change it to percentage or points using the dropdown menu. |
| Width | Set the width of the cell. The default measurement is in pixels, but you can change it to percentage or points using the dropdown menu. |
| Alignment | Choose to have the cell content aligned to the left, middle, or right. |
| Back Color | Set a background color for the cell |
| CSS Class | Apply a CSS Class |
| Back Image | Select an image from your Files Library to use as a background for the cell |
| Id | Give the cell a one-word ID to use in the HTML |
| no text wrapping | Check this box to remove text wrapping. |
| More Cell Styling |
Create a new style for the cell. Note: we recommend applying all table styling set in the theme. |
Accessibility
The Accessibility tab helps make sure your content meets the WCAG 2.1 accessibility standards. It's essential to make sure anyone, including screen reader users, can reach the content in your tables.
| Field | Function |
| Heading Rows | Set the number of styled heading rows. You need at least one Heading row to make your table accessible and responsive. We recommend using a maximum of 2 heading rows. |
| Heading Columns | Set the number of styled heading columns |
| Caption | Set a brief caption for the table to tell your site visitors the content of the table |
| Caption Alignment | Choose the alignment for your caption |
| Summary | Summarize the data in your table for the HTML. This summary is what screen readers will use. |
| Associate cells with headers | Associates cells with the appropriate column heading for the benefit of screen readers. |
If you want your table to be fully accessible, you also need to make it responsive.
Make your table responsive
A responsive table will automatically resize to fit different devices, which is a requirement for a fully accessible table. On mobile devices, tables with many columns will condense to include navigation. Using navigation arrows ensures that the content will still be readable, and users can scroll through the table without losing sight of the header column.
To make your table responsive:
- In your WYSIWYG Editor, open the Table Wizard. If you have already created the table, you need to place your cursor in one of the cells and use the Cell Properties icon in the area below the content or the Table Properties icon in the bottom-right of the Insert Table dropdown menu to open the Table Wizard. Selecting the Table Wizard option directly from the Insert Table dropdown menu will create a new table inside the existing one.
- Go to the Accessibility tab and add at least one Heading Row. If you don't, your table will not be responsive.
- Go to the Table Properties tab and change the CSS Class to Responsive Table.
- Select OK to insert the table.