Table Content Block
Beefree App is now RGE Studio!
The email design suite you already know and love just leveled up. We’re working hard to update our help center, but you still may see some references to the old product name.
This article applies to all plans.
Overview
The Table content block lets you add tables to emails and pages. Use the settings in the right panel to customize your table.
How to use
To add a Table block to your design:
- Log in to RGE Studio.
- Open the design you want to edit.
- Find the Table content block.
- Drag and drop it onto the builder stage.
- Edit your table as needed.
Customizable Table settings
Header section
You can add a header row to your table. Headers act as column titles and help you label each column.
If you delete a header row and re-add it later, the original formatting is lost. You'll need to redesign it from scratch.
Structure
You can customize your table's structure with the following options:
- Columns: Add or remove columns to the right of your table. The maximum number of columns is eight.
- Rows: Add or remove rows to the bottom of the table. There is no maximum number of rows.
- Background color: Edit your table's background color.
- Border: Customize your border style. You can choose from solid, dotted, and dashed. You can also select a custom border color and size.
Striped rows
Use the Striped Rows setting to create rows with alternating colors.
To enable Striped Rows:
- Click the table to select it.
- Go to Striped Rows under Content Properties in the right panel.
- Toggle Striped Rows on.
- Select a background color for the alternating rows.
The original table background color becomes the second alternating color.
Content
Use these settings to customize the text content in your table:
- Font Family
- Font Weight
- Font Size
- Text Color
- Link Color
- Align
- Line Weight
- Letter Spacing
- Text direction
Accessibility keys
The Table content block follows the ARIA Grid Pattern for keyboard accessibility.
Setting your focus
To set your focus for keyboard navigation:
- Navigate in rows: Use your arrow keys to navigate through rows. When focused on the table, press Enter to move focus to the first cell. This enables grid navigation.
- Grid navigation: Once in grid navigation mode, press Enter or start typing. This moves focus to the editor inside the cell.
-
Move between editors: While editing a cell, use the following keys to move to an adjacent cell:
- To move down, press Enter. To move right, press Tab.
- To move up, press Shift+Enter. To move left, press Shift+Tab.
The Table content block also includes these custom keyboard behaviors:
-
Enter key (vertical navigation): The Enter key behaves differently depending on your focus:
- When focus is on the module: Press Enter to move focus to the first cell in the grid.
- Shift+Enter: Press Shift+Enter to invert the direction of the Enter key.
- Tab key (horizontal navigation): Use Tab to navigate between cells horizontally. From the final column, Tab moves you to the first column in the same row.
- Delete cell contents: Press Backspace when in the grid section to delete a cell's contents.
- Line break: Press Alt, Ctrl, or Meta+Enter to add a line break inside a cell. On a Mac, press Command+Enter.
- When focus is on the cell's text editor, press Esc to return to the parent cell.
- When focus is on the first cell, press Esc to return to the module.
Additional considerations
Some setting combinations can produce unexpected results. Avoid the following:
- Border thickness of five or higher for dashed and dotted border styles
- Deleted header rows permanently lose their formatting
The following limitations apply to the Table content block:
- The Advanced Style Kit is not compatible with the Table content block.
- The Table content block does not support multilingual content.
Check how your table looks in mobile preview before publishing your design. Too many columns can result in a mobile view that doesn't display as intended.
Mobile Style Properties are not available for the Table content block. If your table doesn't look right in mobile preview, you have two options:
- Use the Hide On Desktop/Mobile feature.
- Edit your table and test the mobile preview again.
For more information, see the Mobile Design Mode article.
If you have any questions, feel free to contact us.
Comments
5 comments
I have been having issues with my emails not saving when adding a table to them, is anyone else having this issue?
Can users edit individual column widths within a table?
Hi Maggie, thanks for sharing your question with the community!
At this point, it isn't possible to adjust individual column widths in a table content block, but please know that I'm going to log this suggestion as feedback for our Product Team to process.
+1 for the adjustable column widths. I came here looking for that option.
Hi guys,
What would be really useful is to be able to delete a particular row. I know that a row can be delete by clicking on the minus sign, but it's always the bottom row that gets deleted. It'd be really nice to be able to delete a row the cursor is currently in when the minus sign is clicked. Otherwise, because the content can't be copied and pasted, removing a top row in a long table becomes a major nightmare.
Cheers,
Mario
Please sign in to leave a comment.