Table

Basic Info

The Table component allows you to display content in a structured table layout with a variety of format and styling options, including the ability for site visitors to sort columns.

Example

Sort Column A Sort Column B Sort Column C
1 2 3
4 5 6
A B C
D E
F

Tutorial

  1. Navigate to and open your page.
  2. Add the Table component.
    1. Note: The Table component cannot be placed in the sidebar on pages using the Content Template with Sidebar.
  3. A new Table component without content will appear on the page as a placeholder.
  4. To edit the component:
    1. Right-click on the component and select Edit; or
    2. Double-click on the component.
  5. A Table Editor window will appear so that you can insert and edit data within the table.
    1. Insert table data.
    2. Adjust table rows and columns.
    3. Table format and style options.
    4. Adjust cell properties.
  6. Click OK.

^ Back to top

Insert Table Data

  1. Click inside any cell, a cursor will appear indicating you can insert text.
  2. All text entered here can be formatted using the same options available within the Rich Text component.
  3. If you have a large amount of content to enter from a spreadsheet, you can copy and paste unformatted data (no bold, etc) into a blank table provided it has the exact same number of rows and columns as the source you are copying from. Learn how to adjust table rows and columns.

^ Back to top

Adjust Table Rows and Columns

Insert Rows and Columns

  1. To insert a new table row place your cursor in a cell adjacent to where you would like a new row added.
    1. From the editing toolbar, select the icon to insert a new row above; or
    2. From the editing toolbar, select the icon to insert a new row below; or
    3. Right-click within the cell, from the menu options select Row, and then Insert before (above); or
    4. Right-click within the cell, from the menu options select Row, and then Insert after (below).
  2. To insert a new table column place your cursor in a cell adjacent to where you would like a new column added.
    1. From the editing toolbar, select the icon to insert a new column to the left; or
    2. From the editing toolbar, select the icon to insert a new column to the right; or
    3. Right-click within the cell, from the menu options select Column, and then Insert before (to the left); or
    4. Right-click within the cell, from the menu options select Column, and then Insert after (to the right).

Remove Rows and Columns

  1. To remove a row place your cursor in a cell within the row you want to remove.
    1. From the editing toolbar, select the Delete Row icon (table with a highlighted row and red x); or
    2. Right-click within the cell, from the menu options select Row, and then Remove.
  2. To remove a column place your cursor in a cell within the column you want to remove.
    1. From the editing toolbar, select the Delete Column icon (table with a highlighted column and red x); or
    2. Right-click within the cell, from the menu options select Column, and then Remove.

^ Back to top

Table Format and Style Options

Sort Columns

  1. Click on the Advanced tab.
  2. Check the box labeled Make Columns Sortable.
  3. Click OK.
  4. The first row will now contain headers and can be sorted alphabetically or numerically by site visitors.

Table Headers

  1. Click on the Advanced tab.
  2. Check the box for:
    1. First Row Contains Headers; and/or
    2. First Column Contains Headers.
  3. Click OK.
  4. Headers in the first column will appear bold whereas headers in the first row will be in a larger font and with a dark purple background.

Stripe Rows and Columns

  1. Click on the Advanced tab.
  2. Check the box for:
    1. Stripe Alternating Rows; and/or
    2. Stripe Alternating Columns.
  3. Click OK.
  4. If either rows or columns are striped, not both, then the striped cells will be a light gray. If both options are selected, then the cells where the striping patterns intersect will be a medium gray.

^ Back to top

Adjust Cell Properties

Note: Although listed as an option within this component, the Merge and Split Cell features are not currently functional within the CMS.

Adjust Cell Properties

  1. To adjust Cell Properties, click inside the cell you want to edit and:
    1. From the editing toolbar, select the Cell Properties icon (table with a single cell highlighted); or
    2. Right-click within the cell, from the menu options select "Cell Properties."
  2. In the Cell Properties edit window you can update:
    1. Cell width
      1. Enter percentage of overall table size the column should be
    2. Cell height
    3. Horizontal alignment
    4. Vertical alignment
  3. Changes can be applied to:
    1. Single cell
    2. Entire row
    3. Entire column
  4. Click OK.

^ Back to top

Accessibility Info

Usability

  • Don't use tables solely for aesthetic purposes. Consider if there is another way to present your data on your page before using a Table.
  • When sharing larger amounts of data, select the option to stripe alternating rows. Styling alternating rows acts as a visual guide for site visitors with difficulty reading or who enlarge text.
  • Avoid complex tables — they're more work for you and are more difficult for site visitors to understand. Instead, consider separating your complex tables into simple tables that each contain one topic.
  • Each piece of data should have it's own cell. It should be easy for site visitors to distinguish the relationships between your data across columns.
  • Don't use line breaks (shift + enter) to create the illusion of new table rows. Data may no longer align properly when text is resized.

Learn more about tables and accessibility at NYU.

^ Back to top

Screenshots

Component Tutorial: Table edit window

Component Tutorial: Table edit window advanced options

Component Tutorial: Table edit window cell property options