University at Buffalo - The State University of New York
Skip to Content
UB Web Management

Transforming UB’s digital communications through process and tools

Table Component

Present information in columns and rows.

The component as it is first displayed on the page.

The component as it is first displayed on the page.

Using This Component

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

Edit the component and modify the existing table, or paste in a table's contents from another source.

The Table Tab has all the elements needed to increase or decrease the default three column by two row table.

Adjusting Table Style (borders)

Styles - Choose from the following options:

  • Normal (default) - Outer border plus horizontal lines between rows.
  • No borders
  • Horizontal stripes - Outer border, plus alternating rows are shaded, starting with the first row.
  • Vertical stripes - Outer border, plus alternating columns are shaded, starting with the first column.
  • Horizontal rules - Outer border plus dark lines between each row.
  • Vertical rules - Outer border plus dark lines between each column.  
The component opened for editing, with available styles.

The component opened for editing, with available styles.

Editing Table Contents

The Table component contains a subset of the Rich Text Editor that appears in most of the text components (excepting the Title component). In addition, it includes specialized icons to modify the table cells, columns and rows, as well as cell alignment.

Hyperlinks

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.) 

The component opened for editing.

The component opened for editing.

Adjusting Table Properties

Location of the Table Properties icon.

Location of the Table Properties icon.

The Table Properties dialog box with settings to adjust the layout of the entire table.

(You can also access these settings by right clicking in any cell.)

The Table Properties dialog box.

The Table Properties dialog box.

First click in any cell, then click the Table icon, which resembles a grid with a blue checkmark, to open the Table Properties dialog box, and adjust the following options:

  • Adjust the Width, based on percentage of the area of the page in which the table is located. (Default is 100%)
  • Specify a Height for the table, in pixels.
  • Increase or decrease the Border. If you specify 0, no border will appear on your table. (Default is 1.)
  • Increase or decrease the space around the cell by adjusting the Cell Padding. (Default is 1)
  • Increase or decrease the space between the cells by adjusting the Cell Spacing. (Default is 0.)

Click OK when you are done.

Adjust Cell Properties

Location of the Cell Properties icon.

Location of the Cell Properties icon.

The Cell Properties dialog box is used to adjust properties for a single cell, an entire row or an entire column.

(You can also access these settings by right clicking in the desired cell.)

The Cell and Table Properties dialog box.

The Cell and Table Properties dialog box.

Select a cell in your table, then click the Cell icon, which resembles a grid with a yellow square in the middle and a blue checkmark, to open the Cell Properties dialog box, and choose from the following options:

Header Header Header
cell cell cell
cell cell cell
The Cell Properties dialog box.

The Cell Properties dialog box.

Cell  

  • Cell properties
    (* The attribute settings appear depending on what is picked in the Cell Type field.)
    • Width - Specify as a percentage of the whole table
    • Height - Specify as a percentage of the whole table
    • Header attribute *
      • The header attribute only applies to data cells.
      • Enter the name of the related Header cell.
      • Only needed when a cell spans more than one header (i.e. spans two columns or rows).
    • ID attribute *
      • Only applies to header cells.
      • Use to identify the cell.
    • Scope attribute *
      • Only applies to header cells.
      • Choose from 'None (default)', 'Row' or 'Column.'
      • Clarify whether a header cell describes a row or a column.
    • Horizontal align - choose from Left, Center or Right
    • Vertical align - choose from Top, Middle, Bottom or Baseline
    • Cell type - choose between Data (default) and Header
  • Merge right - combine this cell with its neighbor to the right
  • Merge down - combine this cell with its neighbor below
  • Split cell horizontally
  • Split cell vertically

Within cell properties, "Id attribute", "Scope attribute", and "Header attribute" set the cell's id, scope and header attributes.  > Read more about table cell attributes

The Cell and Table Properties dialog box.

The Cell and Table Properties dialog box.

Column

  • Insert before
  • Insert after
  • Remove

Row

  • Insert before
  • Insert after
  • Remove

Table properties

  • (see details above)

Create nested table

Select entire row - allows you to then easily merge these cells

Select entire column - allows you to then easily merge these cells

Click OK when you are done.

Apply Settings to Multiple Cells

Apply To: Single Cell, click a cell and then click the cell properties button.

Apply To: Entire Row, right-click a cell and choose 'Select Entire Row,' then click the cell properties button.

Apply To: Entire Column, right-click a cell and choose 'Select Entire Column,' then click the cell properties button.

Add or Delete Rows

Location of the Add or Delete Rows icons.

Location of the Add or Delete Rows icons.

  • Select a cell in your table, then click the Add row above icon, which resembles a grid with a white row at the bottom and a plus in the upper right corner, to add a new row to your table above the selected cell.
  • Select a cell in your table, then click the Add row below icon, which resembles a grid with a white row at the top and  a plus in the lower right corner, to add a new row to your table above the selected cell.
  • Select a cell in your table, then click the Delete row below icon, which resembles a grid with a white row at the bottom and a red x in the lower left corner, to add a new row to your table above the selected cell.

Add or Delete Columns

Location of the Add or Delete Columns icons.

Location of the Add or Delete Columns icons.

  • Select a cell in your table, then click the Add column to the right icon, which resembles a grid with a white column to the right and a plus in the lower left corner, to add a new column to your table to the right of the selected cell.
  •  Select a cell in your table, then click the Add columns to the left icon, which resembles a grid with a white column to the left and a plus in the lower right corner, to add a new column to your table to the right of the selected cell.
  • Select the Delete column to the right icon, which resembles a grid with a white column and a red x in the lower left corner, to delete a column to the right of the selected cell.

Cell Alignment

Location of the Alignment Icons.

Location of the Alignment Icons.

  • Select a cell, a row, or an entire table.
  • Click one of the three alignment icons, located to the right of the other table icons:
    • Align text left
    • Center text
    • Align text right

Restrictions

  1. You cannot select an entire column or row when adding or deleting columns or rows. You must select a single cell, and any changes are made in relation to that cell's location.
  2. Some elements in the Rich Text editor are not present for use with the Table component. These include spell check, undo, and redo.
  3. This component may have compatibility issues for RWD-enabled sites (details).

Was this page helpful?

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

RWD Issues

This component may not function ideally in RWD-enabled sites.
> Read more

On this page:

See an Example:

Last Revised:

May 19, 2017