New York University Skip to Content Skip to Search Skip to Navigation Skip to Sub Navigation

Table

The Table component displays content structured in a standard table layout with styling options.

When to use it?

Use tables whenever you want to show users content in a structured, data-focused layout.

Where to use it?

Tables can be used in 2-, 3-, 4-, or 5-column containers on content or category pages.

How to use it?

  1. Navigate to and open the desired page.
  2. Add a component.
  3. The component placeholder contains a table icon. Double-click on the icon and the Table Editor window will open.
  4. Enter your table heading in the box next to the Component Title.

Add Table Rows and Columns 

  • To add another row to the table, click the Add Row button. A new one-cell row will be added underneath the existing row.
  • To add another column to the table, click the Add Column button. A new one-cell column will be added to the right of the existing column.


Enter Table Data

The Table Editor window is split into two sections for data; the top section is where you enter in your data and the bottom section is where you choose the table cell in which you wish the data to appear.

  1. To enter in data to a particular table cell, choose and click on the cell in the bottom section of the window (under the default cell placeholders marked "AA, AB, AC"). The active cell will turn red in the upper left-hand corner.
  2. In the top section of the window, type in the content for the cell. You can then format the content as you would with regular text.  Highlight the specific text you would like to style, and use the formatting buttons to apply the style (you may apply more than one style to the same portion of selected text).
  3. Once you've entered all your table data, click the OK button.

Table Input Field Screenshot

Component Tutorial: Table

Table Example

reads "null" if left emptyColumn IColumn II
Row One blank cell blank cell
Row Two striped cell striped cell
Row Three blank cell blank cell

Stripe Rows and Columns

Once you've added data to your table, you may wish to enhance your table with additional row or column stripe formatting.

  1. Double-click on the table component to open up the Table Editor window.
  2. Click the Advanced tab to choose display settings for the table.
    1. Create alternating colors on table rows: put a check mark in the box next to Stripe alternating rows
    2. Create alternating colors on table columns: put a check mark in the box next to Stripe alternating columns
  3. Once you've made your formatting selections, click the OK button.
  4. Click the magnifying glass icon in the Sidekick to open the page in Preview mode to ensure that all additions are as expected from the end-user's perspective.

Table: Stripes

Row and column stripe formatting, located under the Advanced tab, may be applied to tables.

Striped Table Examples

Striped rows:

Row One Data Data
Row Two more data more data
Row Three more data more data

Striped columns:

Row One Data Data
Row Two more data more data
Row Three more data more data

A table without any color stripe formatting:

Row One Data Data
Row Two more data more data
Row Three more data more data

Headers

Once you've added data to your table, you may wish to enhance your table with additional header formatting.

  1. Double-click on the table component to open up the Table Editor window.
  2. Click the Advanced tab to choose display settings for the table.
    1. Turn the first row of your table into a header row: put a check mark in the box next to First row contains headers
    2. Turn the first column of your table into column headers: put a check mark in the box next to First column contains headers
  3. Once you've made your formatting selections, click the OK button.
  4. Click the magnifying glass icon in the Sidekick to open the page in Preview mode to ensure that all additions are as expected from the end-user's perspective.

Header Screenshot

Table: Header

Under the Advanced tab, you can define column or row headers.

The same table with its first row of data as headers:

Row OneDataData
Row Two more data more data
Row Three more data more data

The same table with its first column of data as headers:

Row One Data Data
Row Two more data more data
Row Three more data more data

Adjust Cell Widths

If you see that table content display is overwriting content in another cell to its right or left, or that cell spacing looks off, you may need to make a manual change in the column-width properties of that table.

  1. Right-click on a cell.
  2. Click on Cell properties.
  3. Input the width which gives you an appropriate space for the content.
  4. Under “Apply to”, select “Entire column.”
  5. Click OK.

Sample Column Width Solutions

Here are some potential solutions for columns of equal width. This will NOT work for all tables. You may have to experiment with various column width combinations to find what works for your specific table.

5 Column Table in a 3 Column Space — 90 px

3 Column Table in 3 Column Space — 166 px

5 Column Table in 4 Column Space — 132 px

2 Column Table in 4 Column Space — 353 px

table cell properties

Merge Cells

  1. Highlight the cells that you would like to merge.
  2. Right-click on your selection.
  3. Under "Cell" select "Merge cells"
  4. Click OK.

Note: You cannot undo merged cells. Add new columns or rows to create new data entry points.

Tutorial: Merge Table Cells

Component Tutorials

Still need help?

To report an issue with this component, please contact the IT Service Desk:


Table Known Bugs

Issue

Table Columns: A table with more than 2 columns in a 1-column width space will break the page layout [common].

Workaround

Put 3+ column tables in larger content spaces

Issue

Text Formatting: Text formatting for table cell data does not always save.

Workaround

Select the cell's style before inputting data.

Updated January 2012

NYU Footer