Purpose
Tables are used to show information in rows and columns. However, poorly structured tables can be confusing and inaccessible. Accessible tables make sure that:
- People using screen readers (software that reads websites aloud) understand the table: This means the screen reader knows which headings go with which information.
- All users can easily navigate and interpret the information: Proper table structure improves readability for everyone, including those who have trouble seeing or understanding things.
When to Use Tables
Only use tables for data that fits in rows and columns. Don't use them just to make your page look a certain way. If you just want to move things around on the page, use other embed tools available like tableau embeds, promo microcontent, ArcGis embed, etc.
Use tables when you have:
- Information that clearly goes together in rows and columns: Like prices of items, numbers in a report, or scores from a game.
- Information that's easier to see in a grid: This helps people compare and understand the data faster.
When NOT to use tables:
- To arrange things on the page: This makes the website harder to use for some people.
- For simple lists: If you just have a list of things, use a bulleted or numbered list.
Elements of a Table
Table Headings:
- Use headings at the top of columns (and sometimes at the start of rows) to tell people what the information is about.
- In the WYSIWIG table tool bar, you can easily make a cell and row a heading by clicking the table icon and within the "Table Properties" window choose "Both" in the "Table Headings" field.
- For simple tables, just use column headings. You can also merge and add cells to your table easily using the cell icon when you select the table you are editing:
- Table Captions:
- Give every table a short description called a caption. This tells people what the table is about.
- In the DX Platform, there is an option in "Table Properties" to add a caption.
- The Table caption will appear above the table and you can toggle the caption on and off using the caption icon when you select the created table.
- For Example this table caption "Digital Transformation Site Launch Timeline" placement appears above this Sites on Platform Table:
Table Format and Accessibility
To make sure columns within tables are accessible, arrow keys have been added to the table that way they can be navigated both with the keyboard and that they are properly labeled for users accessing through an accessibility API, for instance screen readers.
The horizontal space is limited by the page container and it can’t be made bigger unfortunately. Depending on the data you want to show an alternative is using a link collection with table display on a landing page.
Learn more about how to work with link collection list.
An important consideration regarding tables, is to make sure that if you are copying- pasting a table from another place make sure that they are well formed. We have found many examples where tables had missing headers, tables inside tables or that the table format was completely wrong.
How to Add a Table
You can easily add a table by selecting the "Responsive Table" icon within the WYSIWIG tool bar:
Once you've selected the "Responsive Table" icon you can now select the headers, captions and how many rows and columns you want within the "Table Properties pop-up window."
Please keep in mind accessibility best practices when it comes to creating tables.
How to Edit a Table
If you need to edit your table either by adding, merging, splitting or deleting more rows, columns, or headers, that can easily be done by clicking on the table.
A small toolbar will appear above with a row of icons where you can use the cell icon to split vertically/horizontally, delete or merge cells.
If you need to edit the caption of your table you can follow the same process by clicking on the table and then selecting the last icon on the right.
This will allow you to see the caption of your table (if you currently had it hidden) and from there you can select the caption and start editing it.