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

If you are reading this article, the chance is high that you are using Elementor and have gotten stuck while creating a table.

It’s not just you; many Elementor users experienced the same issue while creating a table in Elementor.  And we are going to share 3 easiest methods on how you can overcome this situation and be able to make any table using your (free/pro) Elementor page builder. So, you don’t have to be stuck anymore! (Thank me later). 

After reading this article, you will be able to create this kind of table within a few clicks using your native Elementor page builder. 

Required Setup

1. The latest version of WordPress is installed.
2. Elementor Plugin installed and activated (Free or Pro)
3. RioVizual installed and activated (Free or Pro).

How to create a table in Elementor using RioVizual

A dedicated table plugin, such as RioVizual, would be a great choice for creating any table in Elementor. It’s an all-in-one table creation solution with a dedicated Elementor widget. RioVizual utilizes native Gutenberg for creating tables, which is lightweight and allows you to create any visually appealing table in just a few clicks. 

Method 1: How to add a table in Elementor using Riovizual’s Template:

Step 1: Create a Table from RioVizual’s Dashboard:

Riovizual offers the largest library of pre-designed table templates. And most of them are for free! All you have to do is select your preferred template and insert it anywhere using Elementor.

Follow the few simple steps to do this:

• Go to WordPress Dashboard → Riovizual → Tables.

• Click “Create New Table”. 

• Name your table. 

Note: Enable the Synced toggle for global updates (optional)

• Click “Create”. 
• The Table Builder interface will open.

• Click the “+” icon and select Table Builder.

Note: We have chosen the Table builder to proceed. You can choose any of them according to your preference.

Step 2: Choose a Pre-Designed template:
  Import table template.gif

• Choose a pre-designed template and click import.  
• Make the necessary changes and publish. 

Step 3: Insert the table in Elementor using the RioVizual Widget:

• Open the page/post with Elementor you want to insert the table. 

Insert Table – Elementor Widget.gif

• Search for the Riovizual Widget.
• Select the table you created from the RioVizual dashboard. 
• Save the changes and publish. 

Note: Alternatively, you can use the Elementor shortcode widget to insert the same table.

Alternative: Insert the table using the Elementor Shortcode:

• Go to WordPress Dashboard → Riovizual → Tables.

Copy Shortcode from Riovizual Dashboard .gif

• Copy the shortcode of the table you created.
• Open the page/post with Elementor where you want to insert the table. 

Paste Shortcode – Elementor.gif

• Search for the Shortcode Widget. 
• Paste the shortcode of the table you copied earlier. 
• Save the changes. 

Method 2: Create a Table in Elementor from Scratch:

Now I am going to recreate the same table from scratch. So you can create a custom one for your Elementor website.

Step 1: Create a Table from RioVizual’s Dashboard:

• Go to WordPress Dashboard → Riovizual → Tables.

• Click “Create New Table”. 

• Name your table and enable the Synced toggle for global updates (optional)

• Click “Create”. 

The Table Builder interface will now open. Choose your preferred table type. We are using the Table Builder to recreate the same table we imported earlier.

• Click the “+” icon and select Table Builder.

• Select build from scratch to create a table from a blank canvas.

Step 2: Define the initial Table Structure:

• Header Section: Enable this toggle to convert the first row to a header. 
• Footer Section: Left it to the default as our template had no footer. 
• Table Style: Choose the Default table style. 
• Cell Border Types: Select Collapse cell border. (Default)
• Column Count: Set the number of columns to 3. 
• Row Count: Define the number of rows to 8. 
• Click Create Table after setting the values.

Note: These settings can be modified later if needed.

• You’ll now see a blank table with editable cells containing placeholder text that says “Add text.”
  

Step 3: Add Header information:

• Select each header cell and input the data accordingly. 

Add Text – Header & First Column.gif

Step 4: Add the Image Element:

• Click the “+” icon in the bottom-right corner of the cells.
• Select the Image element and insert your image.
    Add Image Element to RioVizual Table.gif

Step 5: Fill out the body text: 

• Place the cursor in any cell and start typing.

Fill Out Other Text.gif

Step 6: Add the Icon elements:

• Click the “+” icon in the bottom-right corner of the cells.
• Find and select the icon element. (We will customize the icon letter)

Add Icon – Riovizual Table.gif

Step 7: Add the Button elements. 

• Click the “+” icon in the bottom-right corner of the cells.
• Find and select the Button element.

Add Button – Riovizual Table.gif

Note: All the elements from our imported template have been added to our table. Now it’s time to customize these elements to match the template we imported earlier.

Step 8: Customize your table:
Riovizual offers 4-stage customization facilities within its (General, Style, Advanced, Device Specific Options) Tab. 

8.1: Header Customization: To customize the header (first row), do the following:

• To style the header, first select the header using the Row selector. Hover over the left edge of your first row and click on Row selector to choose the header.  

• Change the Header Background:
• Go to the style tab and expand Cells. 

• Choose Custom to make the changes to the selected row only. 

• Open Background settings and select Classic to add a single-color background.

• Choose a background color from a color palette or enter a Hex Code. We will use the hex code: #0471FB.

• Style the Header Text: 
  • Select the header by clicking the row selector. 

• Go to the Style tab and expand Text.

• Choose custom to make these changes to the selected row only. 

• Choose a white text color for the header background. Use palette or enter a Hex Code. We will use the hex code: #FFFFFF.
  

• Expand Typography → Choose Font weight →   600 px.

8.2 Style multiple Cells (First Column): 

Our chosen table template features a distinct background for each cell in the first column, excluding the header cell. Additionally, each cell has a bold text style. We will now apply the same design to our table.

• Select Multiple Cells at Once:
  • Press & Hold Shift Key and select the first cell. 

Select Multiple Cells – First Column.gif

• Scroll down and select the last cell. 

Now, multiple cells are selected from our first column. Now we’ll style it together.

• Change Cell’s Background: 
  • Go to the style tab and expand cells.

• Select ‘Custom’ to make changes to the selected cells only.

• Open the background settings and select Classic for a single-color background. 

• Set a background color using the color palette or Hex code. We are using the Hex code: #0471FB.

• Style Text (Multiple Cells – First Column) :
  • Navigate to the Style tab and expand Text.

• Choose ‘Custom’ to make changes to the selected text only. 

• Expand Typography settings.

• Set the Font Weight to 600px. 

8.3: Style the Icons:
There were two icons in the template we inserted. We will now customize our icons to match these. Follow the steps below to do this:

• Customize the Icons (General Tab):
  • Select the icon.
  • Navigate to the General Tab.
  • Click the Select icon. 
  • Choose the exact icon from the icon library (Font Awesome)
    

Icon Customization – General Tab.gif

• Style the Icons (Style Tab):
  • Select the icon.
  • Navigate to the Style Tab.
  • Select ‘Custom’ to modify the selected icon only. 
  • Open color settings. 

Customize Icons – Style Tab.gif

8.4: Style the Buttons:
To match the button style, follow these steps:

• Select a button and go to the Style tab.

• Choose Global to make the changes to our two buttons together.

• Choose button styles to ‘Filled’ (for a solid color or texture to fill the interior of the button).  
• Open the Color setting and set it to white. Use the color palette or use the Hex code: #FFFFFF. (The default color is also white)

• Open the Background settings and select Classic for a single-color button background. 

• Set The Color using a color palette or using the Hex Code: #0471FB.

• Open typography settings and set font weight: 500px; Font size: 15px; Line Height: 22px.

• Open the border settings and set a border radius of 4px to create a rounded corner button. 

• Open the Spacing settings to set the padding (inner spacing) around the button.

• First, Unlink the value field to add different values to each field. 

• Set an 8Px to Top and Bottom, and 12Px in Left and Right. 

8.5: Style the Images:
We will now style our images to match the table we imported earlier exactly. Follow these steps to do this: 

• Select any images from the table and go to the style tab.

• Choose Global to style both images together. 

• Open Sizing from the expanded image settings.   

• Set a 140px base width for both images. 
• Open spacing to set a margin (outer spacing) around the image.

• First, Unlink the value field to add different values to each field. 

• Set a 20px margin on top and a 20px margin on the bottom. 

• Center the images horizontally using the Middle align option.
  

8.6: Style Your Table: 

We need to style the entire table to match the template we selected earlier.

Customization in (General Tab):

• Make Cells Width to Equal: 
  • Select the Entire table and go to the General tab. 

• Enable the “Toggle → Equal Cells Width” option. 

It will help you make all table cells equal based on their content and match the template we imported earlier.

Customization in (Style Tab):

• Border Customization:
  Add and customize a border around the table like the template we imported.  Follow these steps to do this:
  
  • Select the entire table and go to the Style tab.

• Expand the Cell section. 

• Select ‘Global’ to apply changes to the entire table. 

• Open Border settings. 

• Add a 1px border width around the table. And set a border color. We are using the Hex Code: #F0F0F0 as our border color.  

Set the Alignment: Align all elements in the middle within the cell.

• Open the Alignment Settings from the expanded Cells options. 

• Set the Middle align options from Horizontal Alignment. 

Congratulations! We have now recreated the same table from scratch that we previously imported.

8.7: Save and Publish the table:
After completing all the customizations, it’s now time to publish the table we created.

• Click the Publish button in the Top right corner to publish the table. 

Now you can insert the table anywhere using Riovizual’s widget or shortcode in Elementor.

Method 3: Create Elementor Table without Plugin:

Creating tables in Elementor without a plugin is complex. It requires knowledge of HTML and CSS. We are sharing an HTML and CSS version of our table so you can create it exactly as we described.

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>

Edit the content before using this code:
You must edit the content, including images, text, and icons, before using this code on your website.

How to use this code on your Elementor Post/Page?
Use HTML in Elementor.gif

• Open the post/page with Elementor Page Builder.
• Search for the HTML widget.
• Paste the code and save changes.
  
  
  
  

Which Method should you apply?

In this article, we have described all the methods to create a table using Elementor. You can choose any of them to create tables. The table creation process needs to be easy. Therefore, we prefer creating a table using the Dedicated Table plugin, such as Riovizual. 

Our Recommendations: 

1. Use a dedicated table plugin like RioVizual to create any table.

2. Use the pre-designed templates of RioVizual to speed up the table creation process.

3. Built from scratch to create and customize the table according to your needs.

Want to learn more about which table plugin would be the best for your website? We have tested and compared 15 Best WordPress Table Plugins for you.

FAQ:

Question 1: Can Elementor alone Create Tables?
Answer: The answer is technically yes. Elementor has a built-in pricing table widget for creating tables. But it’s limited when you need to make data tables, product comparison tables, pros and cons tables, and more.

Question 2: Can I create a table without using a plugin in Elementor?
Answer: Yes, you can create a table without using a plugin in Elementor. But it required knowledge of HTML and CSS to create one. 

Question 4: Are Elementor tables responsive?
Answer: Yes, Elementor offers sufficient customization options to set custom breakpoints for its built-in Pricing Table widget in its Pro version.

Question 5: What’s the best free way to add a table in Elementor?
Answer: Using a dedicated table plugin like RiVizual is the best way to add tables in Elementor. It saves time, offers scalability, and enables you to manage tables across the website more effectively.