Tables

This feature allows users to create and edit tables directly within the text editor, making it easier to organize and display structured data. This functionality is especially useful for creating layouts, comparison charts, or any content that requires tabular representation.

Enable or Disable

The tables feature is disabled by default. You can enable or disable the ability to insert tables using the unlayer.init() method under the textEditor configuration.

unlayer.init({
  features: {
    textEditor: {
      tables: true  // Enable tables in the text editor
    }
  }
});

Setting tables: true enables the table creation and editing tools in the text editor. Users will be able to insert tables, modify the number of rows and columns, and adjust table formatting.

Best Practices

• Structured Data: For content requiring organized information, like pricing grids or data comparisons, enabling tables can significantly improve the readability and layout.
• Responsive Design: When using tables, especially in emails, it’s important to ensure that they are designed to be responsive. Emails are often viewed on mobile devices, and large or complex tables may not display well on smaller screens.
• Email Client Compatibility: Tables in emails can behave differently across various email clients (such as Gmail, Outlook, etc.). Be mindful of compatibility issues by testing the email templates on different clients. Some email clients, particularly older ones, may not fully support modern table styling or responsive layouts.
• Overcomplicated Layouts: When end-users design emails, they can create overly complex tables with too many rows, columns, or nested tables, and this can lead to poor rendering in certain email clients.