Email Editor: Table Content Block

Overview

The Table content block is now available through the Gnosis Email Editor. This feature allows you to add tables to emails, pages, and popups. Continue reading to learn more about how to use the table content block within the builder.

How to Use

• Identify the Table content block inside the panel
• Drag and drop the Table content block inside the stage of the builder
• Edit your table accordingly

Customizable Table Settings

You can customize various settings of the table content block. In this section, we will explore the different customizable settings and what they enable you to do.

Header Section

The Table content block includes the option to add headers to the first row of the table. These headers behave as column titles and enable you to associate each column with a category.

You can choose to make your table with or without a header row. If you initially create the table with a header, delete it, and then decide to add it back later, any formatting or styles from the original header will be lost. You'll have to start designing the header row from scratch again.

Structure

You’ll have the following options for customizing the structure of your table content block:

• Columns: Add or remove columns to the right of your table. The maximum number of columns you can add is eight.
• Rows: Add or remove rows to the bottom of the table. There is no maximum number of rows you can add to the bottom of your table.
• Background color: Edit your table’s background color.
• Border: Customize your border style. You have the option to choose from solid, dotted, and dashed. You can also select a custom border color and size.

Note: For dotted and dashed border styles, a thickness greater than five results in large circles or rectangles as the border. For the best results, use a border thickness of five or less for those border style types.

Striped Rows

You can use the Striped Rows content property to create rows with alternating colors.

To add Striped Rows to your table, take the following steps:

• Identify the Table content block to change
• Drag and drop the Table content block on to the builder stage
• Click the Table
• Navigate to Striped Rows under Content Properties inside the panel on the right-hand side of the screen
• Toggle Striped Rows to on
• Select the background color you want to apply for the alternating rows

Note: The initial table background color you select will be the other alternating color in your table.

The following image demonstrates what this content property enables you to do.

Content

You’ll have the following options for customizing the content of your table content block:

• Font Family
• Font Weight
• Font Size
• Text Color
• Link Color
• Align
• Line Weight
• Letter Spacing
• Text direction

Note: These settings are applied to all the content within the table content block.

Setting Your Focus

To set your focus for using navigation keys, take the following steps:

• Navigate in Rows: Move through rows using your arrow keys. When focused on the table, pressing Enter will direct the focus to the first cell, enabling grid navigation.
• Grid Navigation: Once in grid navigation mode, press Enter or start typing to shift focus to the builder inside the cell you're currently focused on.
• Move Between Builders: While using the builder in a cell, if you wish to move directly to another builder in an adjacent cell:
• To move forward, press Enter or Tab.
• To move backward, use Shift + Enter or Shift + Tab.

By following these steps, you can set the focus for your navigation.

In addition, the following custom behaviors are supported:

• Enter Key to navigate vertically through cells: The Enter key has different functions depending on your focus. The following list shows the different functions of the Enter key for each focus:
  • When the focus is on the table area, Pressing Enter sets the focus to the first cell of the grid selection.
  • When the focus is on a cell, Pressing Enter while editing the cell's content sets the focus to the builder inside the cell.
  • When the focus is on the builder inside a cell, Pressing Enter while editing the cell's content sets the focus to the builder in the cell above or below, depending on the direction.
     
• Shift+Enter combination: Clicking Shift+Enter inverts the direction of the Enter key behavior.
• Tab Key to navigate horizontally between cells: Use the tab key to navigate between cells horizontally. If you are in a cell in the final column on the right side of the table, you will be navigated to the same level cell in the first column of the table.
• Delete cell contents: When you are in the grid section, use the backspace key to delete a cell's contents.
• Line break: To perform a line break while in a cell, click alt, ctrl, or meta key + Enter. For example, on a Mac keyboard, you would click command, plus sign (+), and then enter to perform a line break within a cell.

Additional Considerations

This is a brand-new feature. While most customizable settings work as expected, a few combinations can result in odd-looking tables; therefore, always view the completed email before sending it.

Here is a list of combinations to avoid for the best possible table results:

• Border thickness of five or higher for dashed and dotted border styles
• Removed header will permanently lose their styles

Another consideration to keep in mind when using the Table Content Block is to ensure you verify how your design with the table looks in mobile mode. At times, too many columns within a table can result in a mobile design view that is not ideal or presents as intended.

We do not yet have Mobile Style Properties for the Table Content Block. In the event you preview the mobile version of your table design, and it does not look ideal, you can move forward with one of the following two options:

• Use the Hide On Desktop/Mobile feature
• Edit your table within your design and test the mobile preview again