Insert a Table in the Editor Widget

Prev Next

This article will show you how to insert a table in the Editor widget.

Important Notes

  • You may use the Table widget instead of the Table Insert tool in the Editor widget. The Table Widget is a fairly simple tool that is not as robust in table styles and options as the Table Insert tool in the Editor Widget.

  • Follow Table Compliance and Accessibility Best Practices to ensure ADA compliance.

  • We encourage you to use multiple Editor widgets when you need to stack side-by-side on a page, rather than using tables within the editor. Tables should only be used when displaying data and not for page layout. Using tables for page layout will cause your content to display incorrectly on mobile devices.

  • Learn how to add code to the editor widget to make your tables more mobile-responsive.

Who can use this feature?

System Administrators | Owners | Publishers | Authors

Instructions

  1. Log in to your website solution

    Note:

    Website preferences may change what this looks like, but adding "/admin" to your website's URL will take you to a sign-in screen for administrative login

  2. Navigate to your desired page

  3. Ensure that the Live Edit state is toggled to ON: Live Edit Toggled to On.

  4. Click on the Editor widget you're adding a table to: An editor widget on a page that has been accessed and is ready for edits.

  5. Click the Insert Table button on the Editor widget toolbar: Insert Table button, located on the toolbar of the Editor widget.

  6. Choose your desired number of columns and rows with the column/row selector: The column and row interface appears after clicking the Insert Table button, allowing users to choose how many rows and columns their table will have.

  7. Left-click into any cell to view the table menu: Left clicking any cell in a table that's inserted into an Editor Widget will cause the table menu to appear.

    • Header Row Icon.Header Row: Turn on to create a table header row that spans all of the columns

      Note:

      This will ensure that the top row of the table applies to all of the data, and screen readers will apply it to all of the content.


      Table Styles Icon.Table Styles: Turn on Alternate Rows: Table Styles dropdown menu with the Alternate Rows option highlighted.

  8. Add header information to the table header row: The header row of your table will show what sort of information can be found in the columns.

    Note:

    This information needs to apply to all of the data that will be placed in each column. For instance, do not place “activity” in row one if you will place “shoe” in the related column.

  9. Fill in the rest of the table with content: An Editor widget table with the cells filled in with relevant content.

    Note:

    Be sure to alphabetize the primary information (in this case, the entries in the Activity column).

  10. Click the Done Editing button to exit the editor: Done Editing Button.

  11. Click the Save button to save your work: Save Button.