Working with Tables

You can start creating a Searchable or Sortable table using the Table Template. Choose the one you want from the dropdown.

Sortable Table

This style allows the user to sort the table by column headings.

You can edit the text in the template and add additional columns and rows.

Header 1	Header 2	Header 3
Row 1, Column 1	Row 1, Column 2	Row 1, Column 3
Row 2, Column 1	Row 2, Column 2	Row 2, Column 3
Row 3, Column 1	Row 3, Column 2	Row 3, Column 3

Searchable Table

This style allows the table to be searched by any data in the table. The columns will also be sortable.

Selecting the Table icon in the text editor will bring up a Table Properties window. This window has options for:

• Rows
• Columns
• Headers - Select from None, First Column, First Row, and Both. Table headers tell users how the data should be read. A row and/or column should be denoted as a header if it acts as a  descriptor  for the data.
• Caption - while not every table needs to have a caption, it acts as a short description of what data the table contains.

Once the fields are completed, click OK to create the table.

The editor will then display an empty table with dashed lines to indicate cells. Clicking within a cell will allow data to be entered. Editors can navigate through the cells with their mouse, the arrow keys, or the Tab key.

If you want to use a checkmark to mark something: You can simply copy and paste the checkmark into the editor. ✓
View supported HTML checkmarks

To format blank spaces appropriately for screenreaders: using the Source editor, you can put  <span class="visually-hidden">None</span>  in place of all of the     in the empty cells. You can replace “None” with whatever text you want in there. Ex: no, no data, empty, etc.

While in a text editor, table cells can be edited by clicking within the desired cell and changing the data.

Each table has a menu accessible by right-clicking within the body of the table. This gives the following options:

• Cell: This menu allows you to merge, split, add, remove, and edit properties are cells
• Row: Allows you to insert or delete rows
• Column: Allows you to insert or delete columns
• Delete Table: Deletes the entire table
• Table Properties: Edit properties for the entire table. This is the same properties window that appears when creating a new table.

For items 1-4, the cell in which you right-clicked is the one the actions takes place in. For instance, right- clicking in the top left-most cell and then selecting “Row” and “Insert Row After” will place a new row as row two.

Adding Tables from Excel Spreadsheets

New or Updated Table Copy/Paste

1. Highlight all of the cells in your spreadsheet and press  Command C (Mac) or  Ctrl C (Windows) to copy them.
2. In your Web CMS content editor, click where you want the cells to appear and press Command V (Mac) or Ctrl V (Windows) to paste all the cells from the spreadsheet.
3. If Web CMS asks if you want to clean the document, choose  OK.

4. Highlight all of the cells in the table you just pasted and click the icon for  Remove Formatting: 

5. Right click inside the table and choose  Table Properties: 

6. Change the  Headers dropdown to display  First Row and click  OK.