Xmailer
  • Xmailer: The Ultimate Email Marketing Platform
  • CONTACT LIST MANAGEMENT
    • Create a contact list
    • Resubscribe after an unsubscribe
    • List X-Ray
    • View or search your contacts
    • Contact Tags Manager
    • Export your contact list
    • Uploading a suppression list
    • Large suppression files
    • Exclusion Lists
    • GDPR Delete & Export
  • SEGMENTING
    • What you can do with segments
    • Create a segment
    • Designing your segment
    • Tag contacts in a segment
    • Export a Segment's Contacts
    • A/B test using segments
  • BROADCAST
    • What you can do with broadcasts
    • Create a Broadcast
    • Broadcast Settings
    • Choosing your email composer
    • Augment your subject line with a preheader
    • Adding your recipients
    • Schedule your Broadcast
    • Resend to non-openers automation
    • Broadcast Reporting
    • Duplicate a broadcast
    • Tag contacts who Open your broadcast
    • Resume an incomplete broadcast
    • Export Broadcast Openers & Unsubscribes
    • Cancel a broadcast
    • Cancel a broadcast funnel trigger
    • Revise tagging and funnel triggers for sent broadcasts
  • USING THE DRAG & DROP EMAIL COMPOSER
    • The Basics
      • Content Row Properties
      • Designing your email - Using Columns
      • Footer
      • Social Media Component
    • Working with multimedia
      • Adding video to your page
      • Using the image editor
      • Using dynamic images for countdown timers and personalized content
      • Search for free, high-quality stock photos in Xmailer
      • Editing Image Properties
      • Adding GIF animations & animated stickers with GIPHY
      • Adding video to your email
      • Using the File Manager
      • How to use external images in your design
    • Working with content blocks
      • Table Content Block
      • Using Internal Links in Pages
      • Working with paragraph and list content blocks
      • Using dividers and spacers
      • Letter and Paragraph spacing
      • Working with titles
      • Working with menus in Xmailer
      • Working with icons
      • Working with custom HTML
    • Settings, rows, & columns
      • Dark Mode Preview
      • Designing with Workspace Styles
      • Designing with Saved Rows
      • Mobile design mode
      • Co-editing
      • Column management
      • Configuring design settings
      • Settings, Rows, and Content: How do they work?
      • Adding a background image to your designs
      • How do I change the properties of a row?
      • Mobile Optimization Options
      • How do I select a row vs. content?
      • Undo, redo & history
      • Working with padding
      • Working with borders
      • Saving your designs in Xmailer
      • Locking content to prevent editing
  • FUNNELS
    • What you can do with funnels
    • Create a funnel
    • Choosing your funnel type
    • From Name & From Email - editing
    • Activating your funnel
    • Trigger an email funnel from a broadcast
    • Tag contacts who open your funnel messages
    • Choosing your email composer
    • Page Augment your subject line with a preheader
    • Design your automated email sequence
    • Contact Suppression and Exclusion
    • Adding a funnel to an opt-in subscriber form
  • SUBSCRIBER OPT-IN FORMS
    • What you can do with forms
    • Create an opt-in form
    • Sending to double opt-in contacts
    • Choosing your form type: floating bars, lightboxes,inline naked embedded, slide outs
    • Exit intent and display rules
    • Adding email and name input boxes to your form
    • Setting the size of your form
    • Configuring how your form displays on mobile devices
    • Configuring your mobile width
    • Add a close window X to your form
    • Adding a "No" button that closes your form
    • Tag subscribers who opt-in to your form
    • Adding "no thanks" text which closes your form
    • View your form conversion rate
    • Connect an existing form to your account
    • Adding your form to your website
    • Add opt-in subscribers to an automated email sequence
Powered by GitBook
On this page
  • Overview
  • How to Use
  • Customizable Table Settings
  • Accessibility Keys
  • Setting Your Focus
  • Additional Considerations
  1. USING THE DRAG & DROP EMAIL COMPOSER
  2. Working with content blocks

Table Content Block

Overview

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

How to Use

To use the Table content block, take the following steps:

  1. Log in to Xmailer

  2. Enter the design you’d like to add a table to

  3. Identify the Table content block

  4. Drag and drop the Table content block onto the stage of the builder

  5. 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:

  1. Navigate to the builder

  2. Identify the Table content block

  3. Drag and drop the Table content block onto the builder stage

  4. Click the table

  5. Navigate to Striped Rows under Content Properties inside the panel on the right-hand side of the screen

  6. Toggle Striped Rows to on

  7. 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 GIF demonstrates an example of 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.

Accessibility Keys

The ARIA Grid Pattern is a set of guidelines outlined by the W3C's Accessible Rich Internet Applications (ARIA) specification to enhance keyboard accessibility within web applications. It provides a structured approach for developers to create accessible grids, tables, and similar components, ensuring users can navigate and interact with them efficiently using keyboard controls alone. By adhering to the ARIA Grid Pattern, developers can ensure that all users have access to an inclusive application experience.

Setting Your Focus

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

  1. Navigate in Rows: You can navigate through rows using your arrow keys. When focused on the table, pressing Enter will direct the focus to the first cell, enabling grid navigation.

  2. Grid Navigation: Once in the grid navigation mode, press Enter or start typing to shift focus to the editor inside the cell.

  3. Move Between Editors: While using the editor in a cell, if you wish to move directly to another editor in an adjacent cell:

    1. To move down vertically, click Enter. To move to the right, click Tab.

    2. To move up vertically, use Shift + Enter. To move to the left, click Shift + Tab.

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

In addition to the ARIA Grid Pattern, we also included the following custom behaviors:

  • 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 focus is on the module: Pressing Enter sets the focus to the first cell of the grid selection.

    • 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: To delete a cell’s contents, use the backspace key when you are in the grid section.

  • Line break: To perform a line break while in a cell, click alt, ctrl, or metakey + Enter. For example, on a Mac keyboard, you would click command, plus sign (+), and then enter to perform a line break within a cell.

  • When the focus is on the text editor of the cell, click ESC to the parent cell.

  • When the focus is on the first cell, click ESC to go back to the module.

Additional Considerations

It is important to understand that this is a developing feature. While most customizable settings work as expected, a few combinations can result in odd looking tables.

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

  • Border thickness of five or higher for dashed and dotted border styles

  • Removed header will permanently lose their styles

A final consideration to keep in mind when using the Table content block is to ensure you verify how your design with the table looks like 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 two options:

  • Use the Hide On Desktop/Mobile feature

  • Edit your table within your design and test the mobile preview again

PreviousWorking with content blocksNextUsing Internal Links in Pages

Last updated 1 year ago

For keyboard accessibility, we followed the aria grid pattern. To learn more about the ARIA Grid Pattern, visit the .

For more information on how to ensure your table is compatible on mobile devices, visit our

ARIA Grid Pattern article
Mobile Design Mode Article.