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

Elementor is powerful, but it still lacks built-in table creation features. If you are reading this article, there is a good chance you have already got stuck.

You are not alone. Many Elementor users run into the same problem.

The good news is that WordPress offers multiple solutions that make table creation much easier.

In this guide, we will share two simple methods to help you create tables using both the Free and Pro versions of Elementor.

By the end of this article, you will be able to create tables like this in just a few clicks using your Elementor page builder.

Required Setup

Before you start creating tables in Elementor, make sure the following requirements are in place.

1. The latest version of WordPress is installed.
2. Elementor Plugin installed and activated.
3. RioVizual installed and activated.

Once these requirements are met, you are ready to start creating tables in Elementor.

Method 1: Create Table in Elementor Using the RioVizual Plugin

RioVizual offers two flexible ways to create tables in Elementor. You can choose the approach that best matches your workflow and level of customization.

• Use pre-designed templates for quick table creation
• Build a table from scratch when you need full design control

Let’s start with the faster approach.

Approach 1: Create a Table Using RioVizual’s Pre-Designed Templates

RioVizual includes a large collection of ready-made table templates. Many of these templates are available for free and help you 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 if you want to apply updates globally across your site.
• Click Create.

• Click the + icon and select Table Builder.

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

Step 2: Choose a pre-designed Template:

• Choose a pre-designed template.
• Click Import.

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

Step 3: Insert the table in Elementor

Once the table is published, you can add it to any page or post built with Elementor.

• Open the page/post with Elementor.

• Search for the RioVizual widget and insert.
• 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 widget. Here is how to do this:

• Go to WordPress Dashboard → Riovizual → Tables.

• Copy the Shortcode for the table you want to display.
• Open the page/post with Elementor.
• Insert the Shortcode widget.

• Paste the shortcode and save your changes.

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

Approach 2: Create a Table in Elementor from Scratch

If you prefer building a table from scratch, start with a black layout of RioVIzual and create the table as you want. Here is a step-by-step guide:

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 to recreate a layout similar to a pre-designed template. You can select other table blocks if your requirements are different.

Step 2: Define the Initial Table Structure

After selecting Build from scratch, a table setup panel 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: Left it to the default as the previous table had no footer.
• Table Style: Select Default.
• Cell Border Types: Use Collapse (default).
• Column Count: Set to 3.
• Row Count: Set to 8.

Click Create Table after setting the values. 

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, icons, star ratings, and buttons.

Add Text:

• Add Text to First Row / Header: Begin by adding text to the header row to define each column.
• Add Body Text: Add body text for the first column, such as labels or values.

To add text, click any cell containing the Add Text placeholder and start typing.

Add Images

• Select the cell where you want to insert the image.
• Click the + icon in the bottom-right corner of the cell.
• Choose Image from the element list.
• Choose your preferred method 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 directly from the Image URL.

Add Icons

• Select the targeted cell.
• Click the “+” icon in the bottom right corner.
• Choose an icon from the Element list.

Add Buttons

• Select the target cell.
• Click the “+” icon.
• Choose Button from the Element list.
• Add button text by selecting the button text placeholder and typing.

Once all elements are added, the table structure and content are complete. The next step is to style the table and its elements to match your design.

Step 4: Style the Table and Its Elements

Once the table structure and content are in place, the final step is styling. In this section, you will style individual elements and the overall table to match the design used in the pre-designed template.

4.1: Style the Header Row

• Select the first row using the Row Selector.
• Open the Settings Panel.
• From the General tab, set the horizontal alignment to Center.
• Go to Style → Cells.
• Open Background settings and choose Classic for a solid background.
• Apply the background color #0471FB.

Next, adjust the header text so it remains clearly visible against the background.

• With the header row selected, go to Style → Text.
• Set the text color to #FFFFFF.
• Open the Typography and apply 600px as the font weight.

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

4.2: Style Multiple Cells in the First Column

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

Follow these steps to select and style the cells together:

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

Now you can apply style to all the selected cell within at once from the Settings Panel.

Style the Cell Background

• Go to the Style tab in the Settings Panel.
• Expand the Cells options.
• Open Background settings and choose Classic for a solid background.
• Select a color from the palette or enter a hex value. In this example, we are using #0471FB to match the imported design.

Style the Text Inside the Cells

• From the Style tab, expand Text options.
• Open Typography settings.
• Set the Font Weight to 600.

4.3: Style the Icons:

Now you can customize the icons from the Settings Panel to match the table preview.

Change the Icon:

• Select the icon inside the table cell.
• Open the Settings Panel and go to the General tab.
• Click the Select Icon.
• Choose a checkmark or cross-style icon from the Font Awesome icon library.

Change Icon Color:

• With the icon selected, open the Style tab.
• Open the Coler Settings from the Icon Style group and apply the following:
  • Green for the checkmark icon.
  • Red for crossmark icon.

4.4: Style the Buttons

To match the button design used in the imported table, apply the following styles.

• Open Global Style from the Settings Panel.
• Expand the Button styling options and apply the following changes:
  • Color: Apply white #FFFFFF as the button text color.
  • Background: Apply a solid background to the buttons using color #0471FB.
• Open the Typography and apply the following:
  • Font weight: 500px
  • Font Size: 15px
  • Line Height: 22px
• Open the Border settings and apply a 4px Border Radius around the button to make the button corner rounded.
• Open the Spacing settings and apply a padding (inner spacing) around the button:
  • Top: 8px
  • Bottom: 8px
  • Left: 12px
  • Right: 12px

Tips: To apply different spacing values, unlink the padding fields before entering custom values.

4.5: Style the Images:
Next, style the images so they match the design of the table imported earlier. Follow these steps to do this:

• Open Global Style from the Settings Panel.

• Expand the Image Styling section.
• Open Sizing and set the image width to 140px.
• Open Spacing and apply a 20px margin (outer spacing) to the top and bottom.
• Open Alignment and set the horizontal alignment to Center.

4.6: Style the Entire Table:

Finally, apply styling to the entire table canvas and its cells to match the imported layout.

Enable Equal Cell Width:

• Open Table Settings from the top right corner.
• Enable the toggle Equal Cell Width from the General tab.

This ensures all table cells maintain consistent width based on their content and match the original template.

Apply a Cell Border:

• Open the Cell styling options.
• Navigate to Bordersettings and apply:
  • Border Width: 1px
  • Border Style: Solid
  • Border Color: #F0F0F0

Open Alignment Settings:

• Adjust the cell alignment to Center horizontally. 

And that’s it! We have now recreated the same table from scratch that we previously imported. 

You can now insert this table into any page or post using Elementor Page Builder, following the same steps described in the Insert the table in Elementor section.

Method 2: Create a Table in Elementor Without a Plugin:

Creating tables in Elementor without plugins requires manual effort. You need a basic understanding of HTML and CSS, as the table structure and styling must be coded manually.

This method is suitable if you want full control over the markup or prefer not to rely on additional plugins. Below, we are sharing the complete HTML and CSS used to recreate the same table design shown earlier.

You can copy this code and customize it based on your own content requirements.

HTML & CSS Version of the table

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Product Comparison Table</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    .comparison-table {
      width: 100%;
      border-collapse: collapse;
    }

    .comparison-table th, .comparison-table td {
      border: 1px solid #f0f0f0;
      padding: 16px;
      text-align: center;
      vertical-align: middle;
    }

    .comparison-table thead th {
      background-color: #0471fb;
      color: #ffffff;
      font-weight: 600;
    }

    .comparison-table tbody tr:nth-child(even) {
      background-color: #f0f3f9;
    }

    .comparison-table tbody tr:nth-child(odd) {
      background-color: #ffffff;
    }

    .comparison-table img {
      width: 140px;
      margin: 20px 0;
    }

    .comparison-table .icon-check {
      color: #1fd100;
      font-size: 20px;
    }

    .comparison-table .icon-cross {
      color: #ff1706;
      font-size: 20px;
    }

    .btn-buy {
      background-color: #0471fb;
      color: #fff;
      font-size: 15px;
      padding: 8px 12px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 500;
      text-decoration: none;
      display: inline-block;
    }

    .btn-buy:hover {
      background-color: #150aa0;
    }

    @media screen and (max-width: 767px) {
      .comparison-table img {
        width: 60px;
      }
    }
  </style>
</head>
<body>

  <table class="comparison-table">
    <thead>
      <tr>
        <th>Values</th>
        <th>Xiaomi Mi 9T</th>
        <th>Asus ROG Phone 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><strong>Preview</strong></td>
        <td><img src="https://riovizual.com/wp-content/uploads/2023/07/Xiaomi-Redmi-9T.webp" alt="Xiaomi Mi 9T"></td>
        <td><img src="https://riovizual.com/wp-content/uploads/2023/07/asus_rog.webp" alt="Asus ROG Phone 2"></td>
      </tr>
      <tr>
        <td><strong>OS</strong></td>
        <td>MIUI V10.2 (Android 9.0 Pie)</td>
        <td>Android 9.0 Pie with ROG Gaming X more UI</td>
      </tr>
      <tr>
        <td><strong>Camera</strong></td>
        <td>48MP</td>
        <td>48MP</td>
      </tr>
      <tr>
        <td><strong>Storage</strong></td>
        <td>256GB</td>
        <td>1TB</td>
      </tr>
      <tr>
        <td><strong>Radio</strong></td>
        <td><span class="icon-check">&#10004;</span></td>
        <td><span class="icon-cross">&#10006;</span></td>
      </tr>
      <tr>
        <td><strong>Price</strong></td>
        <td>$320.00</td>
        <td>$1,795.00</td>
      </tr>
      <tr>
        <td><strong>Buy Now</strong></td>
        <td><a href="#" class="btn-buy">Buy Now</a></td>
        <td><a href="#" class="btn-buy">Buy Now</a></td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Note: Before using this code, replace the sample content, including images, text, icons, prices, and links, with your own data.

How to Use this Code in Elementor

• Open the post/page with Elementor Page Builder.
• Search for the HTML widget.
• Paste the HTML and CSS code into the widget.
• Save your changes.

The table will now appear on your page exactly as defined in the code.

Which Method should you apply?

In this guide, we covered all practical ways to create tables in Elementor. Each method works, but the right choice depends on how much time, control, and technical effort you want to invest.

Since you are using WordPress, table creation should be simple and efficient. WordPress is built around a strong plugin ecosystem designed to reduce manual work and speed up common tasks.

For most use cases, using a dedicated table plugin like RioVizual is the easiest and most scalable approach.

Our Recommendations

• Use an all-in-one table plugin like RioVizual to create any type of table.
• Start with RioVizual’s pre-designed templates to save time.
• Build tables from scratch only when you need full control over structure and styling.

If you want to explore more options, we have tested and compared 15 Best WordPress Table Plugins to help you choose the right solution for your website.

FAQ