How to Create a Table in Divi : Step-by-Step Guide

If you are trying to create a table in Divi and cannot find a proper table module, you are not alone. Many Divi users run into the same problem because Divi does not include a dedicated table module out of the box.

Although Divi 5 includes a Pricing Table module, it still lacks a built-in solution for creating structured tables like data tables, comparison tables, pros and cons tables, or product tables.

The good news is that there are two easy ways to solve this.

You can use a WordPress table plugin like RioVizual that works directly with Divi, or you can create a table manually using custom HTML and CSS. Both methods work with Divi.

This guide walks you through both approaches step by step, even if you have never created a table in Divi before.

Types of Tables You Can Create in Divi

Divi is widely used for blogs, review sites, and affiliate websites, all of which often rely on tables to organize content clearly. 

While Divi does not include a dedicated table module, you can still create many types of tables using plugins or custom HTML.

Here are some of the most common table types users create in Divi:

• Comparison Tables: Compare products, tools, or services side by side
• Pricing Tables: Display pricing plans, features, and CTAs clearly
• Data Tables: Organize specifications, statistics, matrices, and large data 
• Product Tables: Showcase products with images, pricing, and buttons
• Pros and Cons Tables: Highlight strengths and weaknesses in a clear layout
• Feature Tables: Compare features across plans, products, or versions

Each of these tables can be built quickly using the plugin method.

The HTML method also supports all of them, but it requires manual coding and additional effort for every update or design change.

Our Created Table Preview

By the end of this guide, you will be able to create tables like this in Divi using both the plugin and HTML methods.

The same workflow can also be applied to pricing tables, data tables, comparison tables, and other custom table layouts.

What You Need Before You Start

Before you start creating tables in Divi, make sure the following requirements are in place:

1. The latest version of WordPress is installed.
2. Divi is installed and activated. (Any version Divi 4 or, Divi 5)
3. RioVizual is installed and activated. (Required for the plugin method)

Method 1: Create a Table in Divi Using the RioVizual Plugin

RioVizual is a WordPress table plugin that supports the most common table layouts and includes a dedicated module for adding tables anywhere inside the Divi Visual Builder.

It offers two flexible ways to create tables in Divi, depending on your workflow and customization needs:

• Approach 1: Use pre-designed templates for faster table creation
• Approach 2: Build a table from scratch for full manual customization

Both approaches are covered below.

Approach 1: Create a Table Using a Pre-Designed Template

RioVizual includes a library of 70+ ready-made table templates, many of which are available for free. This is the fastest way to create a table in Divi without starting from scratch.

In this example, we are using the Table Builder block. Depending on your needs, you can also use other RioVizual blocks like Data Table, Pricing Table, Product Table, or Pros and Cons.

Step 1: Create a New Table from the RioVizual Dashboard

• Go to WordPress Dashboard > RioVizual > Tables
• Click Create New Table
• Enter a name for your table
• Enable the Synced toggle to update the table globally across your site whenever you make changes
• Click Create
• Click the + icon and select Table Builder

Step 2: Select a Pre-Designed Template

• Browse the available templates in the library
• Hover over the template you want to use
• Click Import

Your table will now be created with sample content and styling. You can replace the text, swap images, customize the design, and add your own data directly inside the editor.

Once your table is ready, click Publish to save it.

Step 3: Add the Table to Your Divi Page

Once your table is published, you can insert it into any page or post in Divi using the RioVizual Module or the Shortcode Module.

Option A: Using the RioVizual Module

• Open the page or post using the Divi Visual Builder
• Search for the RioVizual Module and insert it into your section or row
• Choose the table you created from the Select a Table dropdown
• Save and publish your changes

When you select a table, it loads instantly in the preview area so you can review it before publishing.

Option B: Using a Shortcode

• Go to WordPress Dashboard > RioVizual > Tables
• Copy the shortcode next to the table you want to use
• Open your page or post in the Divi Visual Builder
• Search the Shortcode Module and insert
• Paste the shortcode into the field and save

Both options let you reuse the same table across multiple pages.

If you update the table in the RioVizual dashboard, those changes will reflect everywhere the table appears, as long as the Synced toggle is enabled.

Method 2: Build a Table from Scratch

If you prefer to start with a blank canvas and build your table exactly the way you want, use the Build from Scratch option inside RioVizual.

In this approach, we are going to recreate the same table we imported earlier, starting from a blank layout.

Step 1: Create a Table from RioVizual’s Dashboard

Go to WordPress Dashboard → RioVizual → Tables, create a new table, and open the table editor using the Table Builder block.

We already covered this process in Approach 1 > Step 1.

This time, select Build from Scratch instead of choosing a template.

Step 2: Define the Initial Table Structure

After selecting Build from Scratch, a table setup interface will appear. Here you can define the basic structure of your table:

• Header Section: Enable this toggle to convert the first row into header
• Column Count: Set to 5
• Row Count: Set to 6
• Click Create Table after setting these values.

Once created, a blank table canvas will appear with an Add Text placeholder inside each cell. This is your starting point.

Tip: You can adjust the column count and row count later as your content grows. These are not permanent values.

Step 3: Add Content to Your Table

Now you can start filling your table with content. This table uses five columns: Image, Product Name, Features, Price, and View. 

Follow the steps below to add content to each.

3.1: Add Header Text

• Click any cell in the header row
• Start typing directly to define your column titles

Add a label to each header cell to name your columns. For this example, the column titles are: Image, Product, Features, Price, and View.

3.2: Add Body Text

• Click any cell in the Product or Price columns
• Type your content directly into the cell

Add the product name for each row in the Product column, and the price for each row in the Price column.

3.3: Add Image

• Select the target cell in the Image column
• Click the + icon in the bottom-right corner of the cell
• Choose Image from the element list
• Select how you want to upload the image:
  • Upload: Upload an image from your computer
  • Media Library: Choose an image from the WordPress Media Library
  • Insert from URL: Insert an image using its direct URL

Repeat this step for each row in the Image column.

3.4: Add List

• Select the target cell in the Features column
• Click the + icon in the bottom-right corner
• Choose List from the element list
• Select each List item placeholder and type your feature list
• Press Enter to add more items

3.5: Add Button

• Select the target cell in the View column
• Click the + icon in the bottom-right corner
• Choose Button from the element list
• Click the button placeholder and type your button text (CTA)
• Navigate to Settings Panel > General tab
  • Paste your destination URL into the Add URL field.

Step 4: Style the Table and Its Elements

Now that all the content is in place, it is time to style the table and its elements. This step covers the styling settings for every element you added in Step 3.

4.1: Style the Image

• Open Global Style from the Settings Panel or Block Toolbar
• Expand the Image settings and apply:
  • Sizing > Width: 100px
  • Alignment > Horizontally Center

Tip: Styling from Global Style applies to all the common elements in the table at once, instead of styling each one individually.

4.2: Style the Text

• Open Global Style from the Settings Panel or Block Toolbar
• Expand the Text settings and apply:
  • Font Weight: 600
  • Font Size: 16px

Note: These settings apply to all text elements in the table, including both the Product name and Price columns.

4.3: Style the Buttons

The Button element has two states: Normal and Hover. Start by styling the Hover State first, then return to Normal State.

Hover State:

• Open Global Style from the Settings Panel
• Select Hover State from the state switcher
• Expand Background and apply:
  • Background: Classic
    • Background Color: #FFD56C

Normal State:

• Switch back to Normal State (Desktop)
• Open Global Style from the Settings Panel and apply:
  • Color: #000000
  • Border:
    • Border Radius: 4px (all corners)
    • Border Width: 1px
    • Border Color: #FFD56C
  • Spacing > Padding: 12px (Top, Right, Bottom, Left)
  • Alignment > Horizontally Center

4.4: Style the Header Row

• Hover over the cells in the header row to reveal the Row Selector
• Click the Row Selector to select the entire header row
• Open Settings Panel > Style > Cell and apply:
  • Background: Classic
    • Background Color: #FFD56C
  • Spacing > Padding: 12px (Top, Right, Bottom, Left)

4.5: Style Multiple Cells in the Features Column

You can select and style all cells in the Features column at the same time to keep the design consistent.

Select Multiple Cells:

• Press and hold the Ctrl key
• Click the first cell in the Features column
• While still holding Ctrl, click the last cell in the same column
• Press Shift to select all cells between them

Style the Selected Cells:

• Open Settings Panel > Style > Cell and apply:
  • Background: Classic
    • Background Color: #FFFCF5
  • Sizing > Width: 300px

And that is it. Your table is now fully built and styled from scratch. To insert it into any Divi page or post, follow the same steps from Approach 1 > Step 3 using the RioVizual Module or Shortcode Module.

If you are using other elements or want deeper customization, you can explore the RioVizual documentation for more options.

Method 2: Create a Table in Divi Without a Plugin (HTML/CSS)

Divi includes a Code Module that lets you add custom HTML and CSS directly to any page or layout. This is a simple option for adding a quick table without installing an extra plugin.

It works best when you only need one or two tables that do not require frequent updates. And also when you are comfortable with writing and editing HTML directly.

Keep this in mind before you start:

Divi places the Code Module inside its own section and row layout. If the table looks compressed, set the row width to full width and reduce section padding so the table has enough space to display properly.

The HTML and CSS Code

<table border="1" cellpadding="12" cellspacing="0" style="border-collapse: collapse; width: 100%; font-family: Inter, sans-serif;">
  <thead style="background-color: #ffd56c; text-align: center;">
    <tr>
      <th style="padding: 12px;">Image</th>
      <th style="padding: 12px; width: 100px;">Product</th>
      <th style="padding: 12px; width: 200px;">Features</th>
      <th style="padding: 12px;">Price</th>
      <th style="padding: 12px;">View</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background-color: #ffffff;">
      <td style="text-align: center; padding: 20px;">
        <img src="https://riovizual.com/wp-content/uploads/2024/08/apple-iphone-14.jpg" alt="iPhone 14" width="100" />
      </td>
      <td style="padding: 20px; width: 100px; font-weight: 600; text-align: center;">
        <strong>iPhone 14</strong>
      </td>
      <td style="background-color: #fffcf5; padding: 20px; width: 200px;">
        <ul style="font-size: 15px; color: #141414; margin: 0; padding-left: 20px;">
          <li>6.1-inch Super Retina XDR</li>
          <li>A15 Bionic chip</li>
          <li>Dual 12MP cameras</li>
        </ul>
      </td>
      <td style="padding: 20px; font-weight: 600; text-align: center;">$799</td>
      <td style="padding: 20px; text-align: center;">
        <a href="#" style="font-size: 15px; color: #000; background-color: transparent; border: 1px solid #ffd56c; border-radius: 4px; padding: 12px 20px; text-decoration: none; display: inline-block;">View on Amazon</a>
      </td>
    </tr>
    <tr style="background-color: #ffffff;">
      <td style="text-align: center; padding: 20px;">
        <img src="https://riovizual.com/wp-content/uploads/2024/08/samsung-galaxy-s23-5g.jpg" alt="Samsung Galaxy S23" width="100" />
      </td>
      <td style="padding: 20px; width: 100px; font-weight: 600; text-align: center;">Samsung Galaxy S23</td>
      <td style="background-color: #fffcf5; padding: 20px; width: 200px;">
        <ul style="font-size: 15px; color: #141414; margin: 0; padding-left: 20px;">
          <li>6.1-inch Dynamic AMOLED 2X</li>
          <li>Snapdragon 8 Gen 2</li>
          <li>50MP main camera</li>
        </ul>
      </td>
      <td style="padding: 20px; font-weight: 600; text-align: center;">$799</td>
      <td style="padding: 20px; text-align: center;">
        <a href="#" style="font-size: 15px; color: #000; background-color: transparent; border: 1px solid #ffd56c; border-radius: 4px; padding: 12px 20px; text-decoration: none; display: inline-block;">View on Amazon</a>
      </td>
    </tr>
    <tr style="background-color: #ffffff;">
      <td style="text-align: center; padding: 20px;">
        <img src="https://riovizual.com/wp-content/uploads/2024/08/google-pixel7-new.jpg" alt="Google Pixel 7" width="100" />
      </td>
      <td style="padding: 20px; width: 100px; font-weight: 600; text-align: center;">Google Pixel 7</td>
      <td style="background-color: #fffcf5; padding: 20px; width: 200px;">
        <ul style="font-size: 15px; color: #141414; margin: 0; padding-left: 20px;">
          <li>6.3-inch OLED</li>
          <li>Google Tensor G2</li>
          <li>50MP wide + 12MP ultra-wide cameras</li>
        </ul>
      </td>
      <td style="padding: 20px; font-weight: 600; text-align: center;">$599</td>
      <td style="padding: 20px; text-align: center;">
        <a href="#" style="font-size: 15px; color: #000; background-color: transparent; border: 1px solid #ffd56c; border-radius: 4px; padding: 12px 20px; text-decoration: none; display: inline-block;">View on Amazon</a>
      </td>
    </tr>
    <tr style="background-color: #ffffff;">
      <td style="text-align: center; padding: 20px;">
        <img src="https://riovizual.com/wp-content/uploads/2024/08/oneplus-11.jpg" alt="OnePlus 11" width="100" />
      </td>
      <td style="padding: 20px; width: 100px; font-weight: 600; text-align: center;">OnePlus 11</td>
      <td style="background-color: #fffcf5; padding: 20px; width: 200px;">
        <ul style="font-size: 15px; color: #141414; margin: 0; padding-left: 20px;">
          <li>6.7-inch AMOLED</li>
          <li>Snapdragon 8 Gen 2</li>
          <li>50MP main camera</li>
        </ul>
      </td>
      <td style="padding: 20px; font-weight: 600; text-align: center;">$699</td>
      <td style="padding: 20px; text-align: center;">
        <a href="#" style="font-size: 15px; color: #000; background-color: transparent; border: 1px solid #ffd56c; border-radius: 4px; padding: 12px 20px; text-decoration: none; display: inline-block;">View on Amazon</a>
      </td>
    </tr>
    <tr style="background-color: #ffffff;">
      <td style="text-align: center; padding: 20px;">
        <img src="https://riovizual.com/wp-content/uploads/2024/08/xiaomi-redmi-13-.jpg" alt="Xiaomi 13" width="100" />
      </td>
      <td style="padding: 20px; width: 100px; font-weight: 600; text-align: center;">Xiaomi 13</td>
      <td style="background-color: #fffcf5; padding: 20px; width: 200px;">
        <ul style="font-size: 15px; color: #141414; margin: 0; padding-left: 20px;">
          <li>6.36-inch AMOLED</li>
          <li>Snapdragon 8 Gen 2</li>
          <li>50MP Leica main camera</li>
        </ul>
      </td>
      <td style="padding: 20px; font-weight: 600; text-align: center;">$749</td>
      <td style="padding: 20px; text-align: center;">
        <a href="#" style="font-size: 15px; color: #000; background-color: transparent; border: 1px solid #ffd56c; border-radius: 4px; padding: 12px 20px; text-decoration: none; display: inline-block;">View on Amazon</a>
      </td>
    </tr>
  </tbody>
</table>

Note: Replace the sample content with your own before publishing. Update product names inside the <td> cells, image URLs and alt text inside the <img> tags, feature text inside the <li> tags, price values in the price column cells, and button links inside the <a href=”#”> tags.

How to Add the HTML Table in Divi

1. Open your page or post in the Divi Visual Builder
2. Click the + icon to add a new module
3. Search for the Code Module and insert it into your section or row
4. Paste the complete HTML code inside the Code Module
5. Preview the page to make sure the table appears as expected
6. Click Save or Publish once everything looks correct

Note: The CSS is written as inline styles directly inside the HTML tags, so you do not need to add a separate stylesheet or use Divi’s custom CSS settings.

Making Your Divi Table Responsive

Mobile responsiveness is one of the most overlooked parts of table design. A table that looks clean on a desktop can quickly become difficult to read on smaller screens if it is not properly optimized.

Without responsive settings in place, users may need to zoom in, scroll sideways, or struggle to read your table content on mobile devices.

Responsive Options in the Plugin Method (RioVizual)

RioVizual includes built-in responsive controls so you can adjust how your tables look across different screen sizes directly from the editor.

You can access these settings from: Table Settings > General tab > Responsiveness

Here are the most useful responsive features available:

• Enable Scrollbar on Large Devices: Adds horizontal scrolling when table content exceeds the container width. This is especially useful for wide product tables and comparison tables with many columns.
• Responsive Mode: RioVizual includes multiple responsive modes such as Responsive, Scrollable, and Stack. These modes automatically adjust the table layout for smaller screens by enabling horizontal scrolling or stacking content vertically for better readability.
• Sticky: Makes the first row or first column sticky so users can still see row and column labels while scrolling through large tables. This is useful for product tables and data tables with many rows.
• Desktop, Tablet, and Mobile Controls: RioVizual includes separate responsive controls for each device type. You can customize styling, spacing, alignment, and content visibility independently for each screen size while previewing the result in real time.

Responsive Options in the HTML/CSS Method

If you are using the manual HTML method, you need to handle responsiveness yourself.

For tables with many columns, horizontal scrolling is the most practical approach on mobile. Wrap your <table> element inside a <div> container and apply the following CSS:

css
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

You can also use Divi’s built-in responsive settings in the Style panel to adjust column width, padding, and font size for tablet and mobile breakpoints.

General Responsive Guidelines for Any Method

• Avoid using more than 4 to 5 columns on mobile layouts
• Keep cell text short to prevent overflow issues
• Test on real devices, not just browser resize tools
• Make buttons and clickable elements large enough to tap comfortably
• Use scrolling or stacked layouts for large tables on mobile

Which Method Should You Use?

Both methods work for creating tables in Divi, but the right choice depends on how much time you want to spend and how much flexibility and scalability you need.

Use the Plugin Method (RioVizual): This is the better option for most users, especially beginners. It makes table creation faster with pre-designed templates, built-in responsiveness, reusable tables, and centralized table management across your entire site.

Use the HTML/CSS Method: This method works best when you only need one or two static tables and prefer full manual control over the structure and styling. It is more suitable for users who are comfortable working with HTML and CSS.

Looking for more options? Check out our guide to the Best Divi Table Plugins to compare all available choices.