Live Edit


 





Use the Insert Table Tool

Who can use this feature?

Engage_-_System_Admin.png Engage_-_Slash.png Engage_-_Owner.png Engage_-_Slash.png Engage_-_Publisher.png Engage_-_Slash.png Engage_-_Author.png

 

 

Overview

There are two types of table formats:

  • Layout table: When clients use a table widget to lay out a page in a certain way (i.e., using table to line up images)
  • Data table: Headers in rows or columns relate across the table to each piece of data

This article will show you how to configure Data tables.

Important Note

  • Use the Table Insert tool in the Editor Widget instead of the Table Widget. The Table Widget as is a fairly simple tool, meaning it is not as robust as the Table Insert tool in the Editor Widget, as described below, nor is it as compliant. The Table Widget does not use the right CSS classes that Screen Readers require to properly translate the code. The Editor Widget uses the right CSS classes to allow Screen Readers to automatically translate and work.
  • Follow and ensure Table Compliance and Accessibility Best Practices.

Instructions

  1. Navigate to your desired page
  2. Ensure that Live Edit Is On
    000_Live_Edit_Is_On.png
  3. Click into the editor widget
    click_into_editor_.png
  4. Select Insert Table
    insert_table.png
  5. Choose your desired number of columns and rows with the column/row selector
    select_rows_cols.png
  6. Left-click into any cell to view the table menu
    table_menu.png
    • h.png Header Row: Turn on
      • 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.
    • paintbrush.png Table Style (Paint Brush): Turn on Alternate Rows
      alt_rows.png
  7. Add header information to the top colored row
    populate_header.png
    • Note: This information needs to apply to all of the data that will be placed in each column below. For instance, do not place “vitamin” in row one if you will place “shoe” in the column below.
  8. Fill in the rest of the table with content
    view_table.png
    • Note: Be sure to alphabetize the primary information (in this case, vitamin).
  9. Click the Green Checkmark to exit the editor
    green_checkmark2.png
  10. Click Save at the top of the page
    save_page.png



I'd Like to Request an Enhancement

0 out of 0 found this helpful

Updated:
Follow

Article Feedback

  • Avatar
    Trisa Parker

    My recent ticket, reference number 63126, responses indicate a recent best practice change for creating ADA compliant tables on our websites. Think we can get that information added to your tips section here? Possibly to the best practices section as well.

  • Avatar
    Jackson Wright

    Hi Trisa,

    Thank you for alerting us! We added the following Important Note:

    "Use the Table Insert tool in the Editor Widget instead of the Table Widget. The Table Widget as described below is a fairly simple tool, meaning it is not as robust as the Table Insert tool in the Editor Widget nor is it as compliant. The Table Widget does not use the right CSS classes that Screen Readers require to properly translate the code. The Editor Widget uses the right CSS classes to allow Screen Readers to automatically translate and work."

    Thank you,
    Your Help Center Team

  • Avatar
    Trisa Parker

    Thanks Jackson. Another thought I had, this is housed in Accessibility (ADA) Checker but is a best practice. Think we could link to it in the best practices section?
    https://www.civicengage.civicplus.help/hc/en-us/sections/360002034173-Best-Practices

    Edited by Trisa Parker
  • Avatar
    Jackson Wright

    Hi Trisa,

    Thanks so much for your recommendations! So what I've done is retitle this task article to "Use the Insert Table Tool" and moved it to the Live Edit section.

    I have linked out to a new article which contains the previously defined Best Practices which you can find in the Best Practices section here: https://www.civicengage.civicplus.help/hc/en-us/articles/360031680893

    Thank you,
    Your Help Center Team