Present information in columns and rows.
The table may be wider that the screen, requiring visitors to scroll to see the contents. This will be especially difficult on smartphones.
Last reviewed: September 22, 2021
Add the component to your page.There is only one tab.
Modify the default table in the component as needed. There are tools to add/remove rows and columns to expand the table. You can also paste in the contents of a table from another source (this may take a little experimentation).
Click the wrench icon to configure the settings and modify table contents.
These main settings control the table's position on the page and whether there is visual separation between the rows or columns. You cannot mark both the rows and the columns.
Select a cell or one of the primary settings before using the Rich Text Editor toolbar.
The Table icon will load a version of the Table Properties dialog box, including settings for rows and columns, but has no impact on the component.
To add content to the table, open up the component then select any table cell. You can then type directly into the cell or paste in text. When you are done, click the checkmark to save your changes (or the 'x' to cancel and close).
For rapid changes to many cells, or when you first load the table, click a cell and make any changes, then click the tab key to jump sequentially from left to right across a row. You can then tab to the start of the next next row, and so on, while Shift tab will jump you backwards. And when you reach the last cell, another tab stroke will add a new row of cells.
The component provides a Rich Text Editor for simple styling such as bold, within-cell alignment and bullets. For hyperlinks, the option is provided to open in new page. When that is selected, an additional icon will follow the linked text, to alert visitors that they will be taken to a new browser window, or even leave the current website. If the hyperlink goes to a downloadable file, an document icon will instead be shown as well as the file size if the file is on the same server. (Read more about link labels.)
To make these changes, select a cell in the table then click the left-most button on the toolbar. If a cell is not selected, a different dialog box will appear with table properties. Close the dialog box, select a cell, then try again. A toolbar with the following options appears:
Row and column headers are required under accessibility guidelines for all data tables.
> Read more about table headers.
Tables can have a number of accommodations to assist screen readers.
Links in many components can be set to open in a new browser window (or tab). The user can thus explore the new page, while preserving the source page (and your website) in the original tab. However, this can be confusing if the user does not realize a new tab has opened. They may become lost, confused how they arrived on that new page and unable to return to your site.
Best practice: let the user control their experience and stay in the same tab, with two notable exceptions: