Table Component

This component is suitable for use when creating accessible courses.

The Table component lets you present information to learners in a table format. The Table component is flexible and can be set with both row heading and column heading, as needed.

This article provides an overview of the Table component, component setup, and examples of Table component configurations.

Component overview

The Table component presents information to learners in a table format in a full-width layout in an Evolve course. The Table component can be configured to display row heading and first table column heading, as needed. There is also an option for setting the Table component to display table rows in a specific layout for smartphones.

The Table component is fully responsive.

Component Set Up

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.

General section

In the General section:

Add Title, or a Display Title, as needed. Display Title is seen by learners.

Scroll down and add your Body. Use the text editor to style and format your text, as needed.

1. Add Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label.

The Interaction Label allows you to add a widget before or after the Table component. This widget can display an icon and label prior to the Table component completion, which changes to a different icon and label once the Table component is completed.

Table section

In the Table section, you add your text to the Table component. Right-click the table for Edit Table and to get additional options when editing, as needed.

Appearance section

In the Appearance section, you configure the Table component’s layout settings:

1. By default, Mobile Layout is enabled. With this setting enabled, table rows are displayed as individual items on mobiles. Toggle to disable Mobile Layout.
2. By default, Row Heading is enabled. With this setting enabled, the first table row is displayed as a heading. Toggle to disable Row Heading.
3. Toggle to enable Column Heading, as needed. Enable Column Heading to display the first table column as a heading.

Component Examples

The Table component gives you some options regarding layout. Below are examples that illustrate different Table component setups:

Example 1 – table without Row Heading and Column Heading.

Example 2 – table displaying both first table row and first table column as a heading.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.