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

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 in the WYSIWYG editor. Then, click the Table icon (illustrated below) to open the Table Properties dialog and begin creating the table.

1

Editing table properties

The Table Properties dialog allows you to define your table's dimensions and configure the way it will appear.

Here is an overview of all Table Properties:

• Rows – the number of rows in the table (required).
• Columns – the number of columns in the table (required).
• Width – the width of the table (expressed in pixels or a percent value). Giving the width as a percent value lets you set the proportion of the editing area that the table will occupy.
• Height – the height of the table (expressed in pixels).
• Headers – the drop-down list that formats certain table cells as headers, which applies special formatting to them. You can apply header formatting to First Row, First Column or Both.
• Border size – the thickness of the table border (expressed in pixels).
• Alignment – the alignment of the table on the page. You can align the table to the Left, Center, or Right.
• Cell spacing – the space between individual cells as well as cells and table borders (expressed in pixels).
• Cell padding – the space between the cell border and its contents (expressed in pixels).
• Caption – the label of the table that is displayed on top of it.
• Summary – the summary of the table contents that is available for assistive devices like screen readers. It is a good practice to provide your tables with meaningful summary text in order to make it more accessible to users with disabilities.

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 right mouse button to open the Table Context Menu (illustrated below).

The Table Context Menu 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 cells

The Table Context Menu lets you edit table cells. Hover your cursor over the Cell menu option to access the following options:

• Insert Cell Before – inserts a new cell before the one that contains the cursor.
• Insert Cell After – inserts a new cell after the one that contains the cursor.
• Delete Cells – deletes a cell that contains the cursor.
• Merge Cells – merges multiple cells in one. This option is only available if two or more cells are selected.
• Merge Right – merges the selected cell with a cell on its right. The content of both cells becomes joined. This option is only available if no more than one cell is selected.
• Merge Down – merges the selected cell with a cell located on its bottom. The content of both cells becomes joined. This option is only available if no more than one cell is selected.
• 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.
• 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.
• Cell Properties – opens the Cell Properties dialog (detailed below), which lets you configure cell size, type, color, and content alignment.

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 table rows

The Table Context Menu lets you edit table rows. Hover your cursor over the Row menu option to access the following options:

• Insert Row Before – inserts a new row before the one that contains the cursor.
• Insert Row After – inserts a new row after the one that contains the cursor.
• Delete Rows – deletes a row that contains the cursor.

3

Editing table columns

The Table Context Menu lets you edit table columns. Hover your cursor over the Column menu option to access the following options:

• Insert Column Before – inserts a new column before the one that contains the cursor.
• Insert Column After – inserts a new column after the one that contains the cursor.
• Delete Columns – deletes a column that contains the cursor.

4

Editing cell properties

Table cells can be further customized, creating a unique look and feel. Various configuration options can be set in the Cell Properties dialog window, which is opened from the Table Cell Context Menu.

Here is an overview of all Cell Properties:

• Width – the width of the cell (expressed in pixels or a percent value). Giving the width as a percent value lets you set the proportion of the row that the cell (and the column it is located in) will occupy.
• Height – the height of the cell (expressed in pixels).
• Cell Type – the type of the table cell — either a normal data cell or a header cell with special formatting.
• Word Wrap – this setting turns word wrapping of the cell content on and off.
• Rows Span – this setting stretches the cell downward over several rows. Entering a numeric value sets the rowspan attribute.
• Columns Span – this setting stretches the cell to the right over several columns. Entering a numeric value sets the colspan attribute.
• Horizontal Alignment – the horizontal alignment of table cell contents. The following options are available: Left, Center, Right.
• Vertical Alignment – the vertical alignment of table cell contents. The following options are available: Top, Middle, Bottom or Baseline.
• Background Color – the color of the cell background. You can use either of the following methods to set the color:
  
  1. Enter the RGB value in the text box, in the rgb(nn, nn, nn) format, where nn is a numeric value on a scale from 0 to 255 representing the red, green, and blue channel.
  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.
• Border Color – the color of the cell border. You can use either of the following methods to set the color:
  
  1. Enter the RGB value in the text box, in the rgb(nn, nn, nn) format, where nn is a numeric value on a scale from 0 to 255 representing the red, green, and blue channel.
  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.

*

Other table modifications

• Delete Table – Delete the entire table and its contents.
• Table Properties – Open the Table Properties dialog to edit the configuration options that were set when the table was created (except the number of rows and columns).