Table Component

Present information in columns and rows.

Flex UI Classic

Flex UI is available to all UBCMS users now. Learn more.

On this page:

Accessibility
  • Columns and rows need headers.
  • Data tables need captions.
  • Data cells cannot be merged.
  • Use 'Open in New Window' sparingly.

> Read more.

This component may not function ideally on all devices.

The table may be wider that the screen, requiring visitors to scroll to see the contents. This will be especially difficult on smartphones.

Last reviewed: September 22, 2021

Using This Component

Add the component to your page.There is only one tab.

Modify the default table in the component as needed. There are tools to add/remove rows and columns to expand the table. You can also paste in the contents of a table from another source (this may take a little experimentation).

Click the wrench icon to configure the settings and modify table contents.

General Table Styling

These main settings control the table's position on the page and whether there is visual separation between the rows or columns. You cannot mark both the rows and the columns.

  • Centered - Select to center the table within the column on the page. By default it will be left-justified.
  • Styles - Adjust the borders (row/column highlights):
    • Normal (default) - Outer border plus horizontal lines between rows.
    • No borders
    • Horizontal stripes - Outer border plus alternating rows are shaded, starting with the first.
    • Vertical stripes - Outer border plus alternating columns are shaded, starting with the first.
    • Horizontal rules - Outer border plus a dark line between each row.
    • Vertical rules - Outer border plus a dark line between each column.

Select a cell or one of the primary settings before using the Rich Text Editor toolbar.

The Table icon will load a version of the Table Properties dialog box, including settings for rows and columns, but has no impact on the component.

screenshot of the component opened for editing.

The component opened for editing.

screenshot of the component incorrectly opened to adjust the table properties.

Do not attempt to adjust the Table Properties when no cell in the table is selected.

Edit Cell Contents (Add/Modify Text)

To add content to the table, open up the component then select any table cell. You can then type directly into the cell or paste in text. When you are done, click the checkmark to save your changes (or the 'x' to cancel and close).

For rapid changes to many cells, or when you first load the table, click a cell and make any changes, then click the tab key to jump sequentially from left to right across a row. You can then tab to the start of the next next row, and so on, while Shift tab will jump you backwards. And when you reach the last cell, another tab stroke will add a new row of cells.

The component provides a Rich Text Editor for simple styling such as bold, within-cell alignment and bullets. For hyperlinks, the option is provided to open in new page. When that is selected, an additional icon will follow the linked text, to alert visitors that they will be taken to a new browser window, or even leave the current website. If the hyperlink goes to a downloadable file, an document icon will instead be shown as well as the file size if the file is on the same server. (Read more about link labels.)

Add/Delete Rows & Columns | Merge/Split Cells

To make these changes, select a cell in the table then click the left-most button on the toolbar. If a cell is not selected, a different dialog box will appear with table properties. Close the dialog box, select a cell, then try again. A toolbar with the following options appears:

  • Insert Left - Add a column to the left of the selected cell.
  • Insert Right - Add a column to the right of the selected cell.
  • Delete Column - Delete the column containing the selected cell.
  • Insert Above - Add a row above the selected cell.
  • Insert Below - Add a row below the selected cell.
  • Delete Row - Delete the row containing the selected cell.
  • Merge Right - Combine the selected cell with the cell to its right.
  • Merge Down - Combine the selected cell with the cell below it.
  • Merge cells - Combines a row or column of cells. Must first use Select entire row or Select entire column. Cells should change color from white to blue.
  • Split cell horizontally - Divide selected cell in two.
  • Split cell vertically - Divide selected cell in two.
  • Select entire row - Select entire row including selected cell.
  • Select entire column - Select entire column including selected cell.
  • Table - Opens a dialog box to adjust Cell Properties or Table Properties.
screenshot of the component opened to adjust cell properties.

Adjust table structure by first selecting any cell in the table.

Row and column headers are required under accessibility guidelines for all data tables. 
> Read more about table headers.

Technical Restrictions

  • This component may have compatibility issues for RWD. On small screens, the table may be wider that the screen, requiring dragging to scroll left or right.

Accessibility Concerns

See an Example

Was This Information Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)