Table

On this page:

Basic Info | Examples | Tutorial | Insert Data | Adjust Rows and Columns | Format and Style Options | Adjust Cell Properties | Accessibility Info | Screenshots

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.

Examples

Tutorial

1. Navigate to and open your page.
   
2. Add the Table component.
   Note: The Table component cannot be placed in the sidebar on Content Template with Sidebar pages.
   
3. A new Table placeholder icon will display in the space.
   
4. To edit the component, click or touch the placeholder. The component toolbar will display along the top of the space.
5. Select the wrench icon to configure.
6. A blank Table Editor text box similar to the Rich Text Editor will appear so that you can insert and edit data within the table.
   
7. To view formatting options, click or touch anywhere within the box. 
8. Select the Table icon to insert a table. This icon will look like a blank ruled sheet of paper and will be the last icon in the formatting options shown. 
9. Set up the table by filling out the required Columns and Rows fields. The default table will have 3 columns and 2 rows.
   
   1. Insert table data
   2. Adjust table rows and columns
   3. Table format and style options
   4. Adjust cell properties
10. Click or tap the checkmark to finishing inserting the table.

^ Back to top

Insert Data

1. Click or touch inside any cell. A cursor will appear indicating that 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 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. Click or touch the Table icon above the table to display the editing toolbar.
   2. From the editing toolbar, select the Insert Above icon to insert a new row above; or
   3. From the editing toolbar, select the Insert Below icon to insert a new row 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. Click or touch the Table icon above the table to display the editing toolbar.
   2. From the editing toolbar, select the Insert Left icon to insert a new column to the left; or
   3. From the editing toolbar, select the Insert Right icon to insert a new column 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).
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).

Additional Table Formatting Options

The following additional table formatting options are available in the table editing toolbar. The cursor must be placed in a cell for merging, splitting and selecting:

• Merge Right: Merges your selected cell to the right cell.
• Merge Down: Merges your selected cell to the left cell.
• Merge Cells: Merges multiple selected cells. You must use a Select option below first to use this option.
• Split cells horizontally: This splits a cell into two cells within a column.
• Split cells vertically: This splits a cell into two cells within a row.
• Select entire row: Highlights the entire row.
• Select entire column: Highlights an entire column.
• Insert Paragraph: Allows you to create a paragraph separate from the table. We strongly recommend you insert a Rich Text Editor component if you are adding a section of non-table text.
• Table (options): Opens table and cell properties.
• Remove Table: Removes current table from the text field.

^ Back to top

Format and Style Options

Sort Columns

1. Click or touch on the Advanced tab.
   
2. Check the box labeled Make Columns Sortable.
3. Click the checkmark to save and close.
   
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 the check mark to save and close.
   
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 the checkmark to save and close.
   
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

Adjust Cell Properties

1. To adjust Cell Properties, click inside the cell you want to edit and:
   
   1. From the editing toolbar, select the Table icon.
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 the checkmark icon to save your changes.

^ Back to top

Accessibility Info

Usability

• Do not use tables solely for aesthetic purposes. Consider other ways  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.
  
• Do not 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

^ Back to top