Insert a Table in the Editor Widget

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

2. Navigate to your desired page

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

4. Click on the Editor widget you're adding a table to:

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

6. Choose your desired number of columns and rows with the column/row selector:

7. Left-click into any cell to view the table menu:

   • Table Header: 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 Footer: Turn on to create a footer row that spans across all of the columns

   • Remove Table: Select to delete an inserted table

   • Row: The Row drop-down menu with options for:

     • Insert row above

     • Insert row below

     • Delete row

   • Column: The Column drop-down menu with options for:

     • Insert column before

     • Insert column after

     • Delete column

   • Table Properties: Change table properties like:

     • Dimensions

     • Border

     • Table Style:

       • Dashed Borders

       • Alternate Rows

   • Cell: The Cell drop-down menu with options for:

     • Merge cells

     • Vertical split

     • Horizontal split

   • Cell Properties: The Cell Properties with options for:

     • Background Color

     • Dimensions

     • Padding

   • Vertical Align: The Vertical Align drop-down menu with options for:

     • Top

     • Middle

     • Bottom

   • Horizontal Align: The Horizontal Align drop-down menu with options for:

     • Align Left

     • Align Center

     • Align Right

     • Align Justify

   • Cell Style: The Cell Style drop-down menu with options for:

     • Highlighted

     • Thick

8. Add header information to the table header row:

   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:

   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:

11. Click the Save button to save your work: