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 avoid the blue outline table formatting issues it's important to only work with on table and not tables in tables.

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.

Fix Table Format

When you are creating or pasting tables from one page to another it's important to know that tables will only work properly when they are not within another table. You will know if you have a table within a table if you see a large blue outline around the table.

To fix that table issue you will have to go and edit your page and go down to the table and hover your mouse over it so that you can see the first yellow table outline and the first dotted square box icon the the upper left corner.

To locate the second table that is inside of this table you will then hover over the cell text or row to see the second table and the dotted square in the left corner.