Skip to main content
Attention customers within hurricane impacted areas:
Due to widespread impacts resulting from hurricanes, CivicPlus is committed to enhancing our resources to manage the anticipated increase in traffic and mitigate any potential disruptions. We will prioritize all assistance requests from affected areas to ensure we provide the highest level of support possible. Please be assured that we are here to assist you in any way we can during this challenging time. Your safety and satisfaction are our top priorities.

Search

Add the Table Widget to a Page

  • Updated:

This article will show you how to add a Table Widget to your page.

 

Accessibility & Compliance Tips

  • Ensure that every cell contains data. If there is no data available for a cell, enter N/A.
  • Ensure that header row or column information applies to all information in the cells below or across from it. To check, inspect page elements, and look for the <th> marker in the HTML.
  • Alphabetize
  • Try to keep tables as simple and short as possible. 

 

Who can use this feature?

System Administrator | Owner | Publisher | Author

 

 

Instructions

  1. Sign in to your site
  2. Navigate to your desired page and ensure that Live Edit Is On
    Live Edit State Toggled to ON.
  3. Select the Widgets tab
    widgets tab.
  4. Drag and drop the Table Widget onto your desired area of the page
    drag-and-drop table widget to page.
  5. Configure the Widget Options
    widget options fields.
    • Header Text: Create a title for the table
    • Heading Style: Select a style for the header
    • Option Set: Select an option set
    • Advanced:
      • Widget Breakpoint: Width at which the widget will switch from narrow to wide view
      • Push To All Versions of this Page: Add a copy of this widget to all versions of this page
      • Push To All Subpages of this Page: Add a copy of this widget to all subpages of this page
      • Push Options: Choose where to put the widget within pushed pages
  6. Configure Table Settings
    widget options on the table tab.
    Note: Table widgets auto-calculate their column width based on their contents.
    • Size: Use the grid to determine how many rows and columns there are
      • Alternate: Use the cols x rows boxes to determine rows and columns
        Note: To create a table larger than 6x6, use the cols x rows boxes
    • Header Row: Select to make the first row in the table a header row
    • Header Column: Select to make the first column in the table a header column
    • Caption (Optional): Briefly describe the table
    • Alternating Rows: Select to make the table display every other row with a slightly different background color and/or text
    • Reformat for Mobile: Select to make the table reformat to suit mobile devices
      Note: We strongly recommend this stay checked unless it makes the table format worse on mobile devices.
  7. Click the X to escape the settings
    x to close and save options
  8. Click inside the table to enter the table content
    table widget
    Note: If any cell does not have data, enter N/A. Remember that header row information applies to all cells under, and header column information applies to all cells across.
  9. Click Save
    Save button in the top right corner of the page.

Feedback About the Article

Let us know what was helpful or not helpful about the article below.

2 comments

Date Votes
  • John Lanza

    Was it suggested at some point to avoid using the Table widget? But rather use the table option within the Editor widget? 

    0
  • Jon'ese Pearson

    Is the table widget ADA compliant?  I was told that using the table function in the editor is more ADA compliant - can someone please speak to this so we know when we are training new users if we should tell them not to use the table widget or if we need to redo all of all tables.

     

    0

Please sign in to leave a comment.