Creating and Editing Tables

You can use the Text/HTML module to build a table on your website. Here are the steps for creating and editing tables.

IN THIS ARTICLE:

How to Create a Table

  1. Toolbar Summary

Working with Tables

  1. Editing table properties
  2. Editing cell properties

How to Create a Table

After dragging and dropping a Text/HTML module onto a page of your website, click inside the module to display the Text Editor toolbar. Then, click the More icon and then the Table icon (illustrated below) to open the Table Properties dialog and begin creating the table.

Select the number of rows and columns you will need in your table.

(In this example, the table will have 1 row and 3 columns.

The Table Properties toolbar displays when you put your cursor in any cell of the table.

Toolbar Summary

Icon Description

Table Header - Highlights the first row of the table.

Table Footer - Highlights the last row of the table.

Delete Table

Row - Dropdown choices are to Insert rows above or below the highlighted cell or to delete the row.

Column - Dropdown choices are to insert columns before or after the highlighted cell or to delete the column.

Table Style - Choose to give your table a border and/or add alternate row shading.

Merge Cells – merges multiple cells in one. This option is only available if two or more cells are selected.

Vertical Split – splits the selected cell in two, creating a new cell on its bottom. The content of the cell appears in the original, upper cell. This option is only available if no more than one cell is selected.

Horizontal Split – splits the selected cell in two, creating a new cell on its right. The content of the cell appears in the original, left cell. This option is only available if no more than one cell is selected.

Cell Background - Select a color for the background of the cell or enter the HEX value for a specific color.

Vertical Alignment - Align the text of the cell to the top, middle, or bottom.

Horizontal Alignment - Align the text of the cell to the left, right, centered, or fully justified.

Cell Style - Visually highlight the cell with a red border and/or choose to make a thick border around the cell.

Working with Tables

You can modify a table after it has been inserted into a Text/HTML module. To edit the table, click the table with the mouse button to open the Table Properties Toolbar.


The Table Properties Toolbar lets you modify particular table cells, rows, and columns. This method makes it possible to insert new cells, rows and columns in specified locations; you can also merge and split cells.

1

Editing Table Properties

The Table Properties Toolbar lets you edit table cells. Hover your cursor over the Cell icon option to access the following options:

  • Header Row – a header row with special formatting is added to the top of your table.
  • Footer Row – a footer row with special formatting is added to the bottom of your table.
  • Delete Table – Use the trashcan icon to delete your table.
  • Row - Select the following options:
    1. Insert Row Above – inserts a new row above the one that contains the cursor.
    2. Insert Row Below – inserts a new row below the one that contains the cursor.
    3. Delete Rows – deletes a row that contains the cursor.
  • Column - Select the following options:
    1. Insert Column Before – inserts a new column before the one that contains the cursor.
    2. Insert Column After – inserts a new column after the one that contains the cursor.
    3. Delete Columns – deletes a column that contains the cursor.
  • Table Properties - there are two options here.
    1. Show Border - Select this option to add a border to your table.
    2. Alternate Rows - Select this option if you want to add a light gray background to every other row in your table.

NOTE: To select multiple table cells, rows, or columns, click and drag your cursor over them. This allows you to enable operations such as inserting rows or columns + deleting or merging multiple table cells.

2

Editing Cell Properties

Table cells can be further customized, creating a unique look and feel. Various configuration options can be set with the Cell Property functions available on the bottom row of the Table Properties Toolbar.

Here is an overview of those Cell Properties:

  • Cell - Three options are available:
    1. Merge Cells – merges multiple cells in one. This option is only available if two or more cells are selected.
    2. Split Cell Vertically – splits the selected cell in two, creating a new cell on its bottom. The content of the cell appears in the original, upper cell. This option is only available if no more than one cell is selected.
    3. Split Cell Horizontally – splits the selected cell in two, creating a new cell on its right. The content of the cell appears in the original, left cell. This option is only available if no more than one cell is selected.
  • Background Color – the color of the cell background. You can use either of the following methods to set the color:
    1. Select a color from the palette.
    2. Enter the hexadecimal RGB value in the text box, in the #nnnnnn format, where the n letters stand for the three pairs of hex color values representing the red, green, and blue channel.
  • Horizontal Alignment – the horizontal alignment of table cell contents. The following options are available: Left, Center, Right, and Justified.
  • Vertical Alignment – the vertical alignment of table cell contents. The following options are available: Top, Middle, or Bottom.
  • Cell Style - Choose two ways to highlight a cell.
    1. Identify if you want the cell to be highlighted by a red border.
    2. Identify if you want the red border to be thicker than the others to bring more distinction to the cell.

Still need help? Contact Us Contact Us