How to Create Table in Divi (With and Without Plugin)

If you are reading this guide, there is a high chance that you got stuck while creating a table in Divi. You are not alone. Over 2.3M+ Divi users might have gone through the same experience when trying to create a table in Divi.

Although Divi 5 is becoming popular for covering many key aspects of a WordPress website by working as both a theme and a page builder, it still lacks a dedicated table module to create tables using the Visual Builder.

But you do not have to settle for these limitations anymore.

In this guide, we will show you two of the easiest methods to add any table inside your Divi Visual Builder.

By the time you read one-fifth of this article, you will already be able to create a table layout like this in just a few clicks. And after completing the full guide, you will be confident in creating any tables in Divi.

Required Setup

Before getting started, make sure the following requirements are in place:

• The latest version of WordPress is installed.
• The latest version of Divi is installed and activated.
• The RioVizual plugin is installed and activated.

Approach 1: How to Create a Table in Divi Using RioVizual

RioVizual offers two flexible ways to create tables in Divi:

• Use Pre-designed templates for quick table setup
• Build from scratch when you want full control over the design from the start

You can choose the approach that best matches your workflow and customization needs.

Let’s start with the faster approach.

Method 1: Create a Table in Divi Using RioVizual’s Pre-Designed Templates

RioVizual includes a library of 71+pre-designed templates that help you create tables faster. Many of these templates are available for free and allow you to create tables without starting from an empty layout.

Follow the steps below to get started.

Step 1: Create a Table from RioVizual’s Dashboard

• Go to WordPress Dashboard → RioVizual → Tables
• Click on Create New Table
• Enter a table name
• Enable the Synced toggle to update tables globally across your site
• Click Create
• Click the + icon and select Table Builder

Note: In this example, we are using the Table Builder block. Depending on your use case, you can also choose other RioVizual blocks such as Pricing Table, Pros and Cons, or Data Table.

• Choose a pre-designed template that matches your needs.
• Click Import.

Your table is now created. You can update the content, adjust the layout, customize the styling, and then publish it.

Step 2: Insert the table in Divi

Once the table is ready, you can insert it into any page or post using Divi. Here is how you can do this:

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

Alternative: Insert the Table Using a Shortcode

You can also insert any table created from RioVizual’s dashboard using the Shortcode Module. Here is how to do it:

• Go to WordPress Dashboard → Riovizual → Tables

• Copy the shortcode for the table you want to display
• Open the page or post with the Divi Visual Builder
• Insert the Shortcode Module
• Paste the shortcode and save your changes.

Both methods allow you to reuse the same table across multiple pages while keeping the content synced.

Method 2: How to Create a Table In Divi from Scratch

If you prefer building a table in Divi from scratch, start with a blank layout in RioVizual. It will help you design the table exactly the way you want from the very beginning. 

Here is a step-by-step guide on how you can do this:

Step 1: Create a Table from RioVizual’s Dashboard

Follow the same steps described earlier in #Create a Table from RioVizual’s Dashboard.

This time, select Build From Scratch to start with a blank canvas.

Note: In this example, we are using the Table Builder block to recreate a layout similar to a pre-designed template. You can choose other table blocks if your requirements are different.

Step 2: Define the Initial Table Structure

After selecting Build From Scratch, a table setup interface will appear. Start by defining the basic structure of your table. 

These settings can be adjusted later as your design evolves.

• Header Section: Enable this toggle to convert the first row into a header.
• Footer Section: Leave it to the default as the example table had no footer.
• Column Count: Set to 5.
• Row Count: Set to 6.

After setting the values, click Create Table.

Once the table is created, a blank table canvas will appear with a text placeholder labeled Add Text in each cell.

Step 3: Add Contents to your Table

Now you can start adding content to your table, such as text, images, lists, ratings, buttons, and more, to recreate the same layout. Follow the steps below.

3.1: Add Header Text (Define Columns)

• Click any cell in the header row and start typing the text to define your column titles.

3.2: Add Body Text (Product and Price Columns)

• Add text to the remaining columns by typing directly into the cells, such as the Product and Price columns.

3.3: Add Images (Image Column)

• Select the cell and click the “+” icon in the bottom-right corner
• Choose Image from the available element list
• Then 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

3.4: Add Lists (Features Column)

• Select the cell and click the “+” icon in the bottom-right corner
• Choose List from the available element list
• Add the feature text to the list item placeholder by typing directly

3.5: Add Buttons (View Column)

• Select the cell and click the “+” icon in the bottom-right corner
• Choose the Button from the available element list
• Click the button and add the Button text by typing
• Set the destination URL for the button

Step 4: Style your Elements and Table

Now it is time to style the table and its elements so they match the design of the template we imported earlier. You can also adjust these settings based on your own brand guidelines.

4.1 Style The Image

• Open Global Style from the Settings Panel
• Expand Image Settings and apply the following changes:
  • Sizing → Width: 100px
  • Alignment → Horizontally Center

ℹ️ Some options in the right-side panel may be hidden by default. Click the (⋮) three-dot menu to reveal additional controls.

4.2 Style The Text

• Open the Global Style from the Settings Panel
• Expand Text Settings and apply the following changes:
  • Font Weight: 600
  • Font Size: 16Px

4.3 Style The Buttons

• Open Global Style from the Settings Panel.
• First, choose the Hover State to style the button when a user hovers over it.
  • Open Background → Background Color → Classic → #FFD56C
• Then switch back to the Desktop / Non-Hover State to style the button when it is not being hovered.
  • Open Color and set #000000 (black) as the button text color.
  • Next, open Border Settings and apply the following:
    • Border Radius: 4Px (top, right, bottom, left)
    • Border Width: 1Px
    • Border Color: #FFD56C
  • Open Spacing → Padding → 12Px (top, right, bottom, left)
  • Finally, open Alignment Settings and set the buttons to 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 Tab → Cell and apply the following changes:
  • Background → Background Color → #FFD56C
  • Spacing → Padding → 12 px (top, right, bottom, and left) 

4.5 Style Multiple Cells (Features Column)

To keep the design consistent, you can style multiple cells in the Features column at the same time along with their content.

• Select Multiple Cells
  • Press and hold the Ctrl key.
  • Click the first cell in the column.
  • While still holding Ctrl, click the last cell in the same column.
  • Press the Shift key once to select all cells between them.
• Style The Cell Background
  • Open Settings Panel → Style Tab → Cell and apply the following changes:
  • Background → Background Color → #FFFCF5
  • Sizing → Width → 300 px

And that is it. Your table should now reflect the same styling as the table we imported earlier. If you are using other elements or want deeper customization, you can explore the RioVizual documentation for more options.

Step 5: Save and Publish the Table

After making all the necessary changes, your table should closely match the design you want. Now you only need to save and publish the table.

Once published, you can insert the table anywhere on your website using the Divi Visual Builder, following the same steps described in #Method 1.

Approach 2: How to Create a Table in Divi Without a Plugin (Requires Advanced Skills)

Creating tables in Divi without a plugin requires manual coding. You will need to write HTML and CSS to build and style the table yourself.

Below, we are sharing the complete HTML and CSS used to recreate the same table design shown earlier. You can copy this code and modify the content or styling to match your needs if you prefer not to start from scratch.

Here is how you can do it.

Step 1: Write the HTML and CSS Code or Copy the Following:

The following code recreates the same table structure we built earlier. You can copy the code and replace the content with your own. Also, adjust the styling if needed so it matches your website design.

<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>

Step 2: Insert the Table using Divi Visual Builder

• Open the page or post in the Divi Visual Builder where you want to display the table
• Search for the Code Module and insert it

• Paste the HTML code you copied

• Preview the page to make sure the table appears as expected
• Once everything looks correct, save or publish your changes.

Our Created Table Preview in Divi Using HTML and CSS (Without Plugin)

Which Method should you apply?

In this guide, we have described all the practical ways to create tables in Divi. Each method works, but the right choice depends on your workflow and technical effort.

Since you are using WordPress as a no-code solution for managing your website, creating tables should be simple. 

That is why we recommend using a dedicated table plugin like RioVizual. 

RioVizual provides the easiest and most scalable approach for creating and managing tables on your website, whether you need comparison tables, pricing tables, data tables, or pros and cons tables. RioVizual covers all your table creation needs.

You can start with RioVizual’s pre-designed templates to build tables quickly, or create one from scratch if you want to build everything from the beginning.

If you want to explore more options, you can also check our detailed guide on the 10 Best Divi Table Plugins to find the right solution for your Divi-fueled website.