Components

Table user guide

A table is used to organize and display data using columns and rows. It makes datasets easier for users to scan. Each column should represent one point of data.

 

Tables can be applied through the Text component.

Authoring Fields

Copy/paste a table

1. Author as normal in the Text component. Copy/paste the table data from another source.

2. Click the edit toolbar.

3. Highlight the table, then click the table icon.

Text component authoring dialog, with table data highlighted and an arrow pointing to the table icon.

4. Table editing settings will replace the regular RTE options. They allow for adding or deleting rows and columns, merging cells, and editing the table properties. They also allow for selecting an entire row or column.

5. All tables should have a header column for accessibility purposes. Header rows are also recommended. To add a header row or column:

a. Select the entire row or column.

b. Click the table icon.

c. In the “Cell Properties” tab, switch the Cell Type selection from “data” to “header.”

Cell Properties tab, with option to apply header row/column.

d. Click the checkmark.

e. The table will now format the selected data in the header styling.

Both first column and top row of table is formatted with header styling.

6. To optionally add a table caption:

a. Click the table icon.

b.  In the “Table Properties” tab, fill out the “Caption” field.

Table Properties tab, with option to add a table caption.

c. Click the checkmark.

d. The caption will now display above the table.

Author a table in the Text component

1. Author as normal in the Text component, without adding any table data.

2. Click the edit toolbar.

3. Select the table icon. A dialog will appear with specifications for the rows, columns, border, header, and caption. Edit as needed.

Table dialog that appears upon click of the edit toolbar.

4. Fill out table data. Edit header rows and columns, or add a caption, as described above.

Accessibility

1. Tables should always have a header column. In most cases, they should also have a header row.

Other tips

1. Table text should be concise and center-aligned.

2. Empty cells should be left blank.

3. Do not use a table if less than two rows are needed.