How to Create a Table in Bricks Builder : Step-by-Step Guide

If you are reading this article, you are likely having trouble creating a table in Bricks Builder. You are not alone. Many users face the same issue when trying to build tables inside Bricks.

The main reason is Bricks Builder does not provide a complete solution for creating different types of tables out of the box.

The good news is that you have easier options.

By the end of this article, you will be able to create tables in just a few clicks and display them on any page or post using Bricks Builder.

By the end of the article, you will be able to create tables like above in just a few clicks, and display them on any page or post using Bricks Builder.

Further Reading: Best Bricks Builder Addons for your website

Required Setup:

Before you start, make sure the following are ready:

1. The latest version of WordPress is installed. 
2. Bricks Visual Builder is installed and activated. 
3. RioVizual plugin installed and activated.

Create a Table in Bricks Builder Using the RioVizual Plugin

RioVizual provides two flexible ways to create tables in Bricks builder. You can choose the method based on your workflow and customization needs:

You can:

• Use pre-designed templates for faster table creation
• Build a table from scratch for full design control

Let’s start with the faster method.

Method 1: Create a Table in Bricks Builder using Templates

RioVizual includes 71+ pre-designed table templates that help you create tables quickly without starting from scratch. Many of these templates are available in the free version.

Here is how you can Import one:

Step 1: Create a Table from RioVizual Dashboard

• Go to WordPress Dashboard → RioVizual → Tables

• Click Create New Table

• Enter a table name

• Enable the Synced toggle if you want this table to update automatically across your site
• Click Create
• Click the + icon and select Table Builder

Note: In this example, we are using the Table Builder block. You can also choose other blocks like Pricing Table, Pros and Cons, or Data Table based on your needs.

Further Reading: How to Create a Pricing Table in WordPress

Step 2: Choose a pre-designed Template

• Select a pre-designed template from the library

• Click Import.

Your table is now ready. You can edit the content, adjust the layout, and customize the design before publishing.

Step 3: Insert the table in Bricks Builder

Once your table is ready, you can display it on any page or post using Bricks Builder.

• Open the page or post with Bricks Builder
• Search for the RioVizual element and insert it
• Select your table from the “Choose a Table” dropdown
• Save and publish your changes

Alternative: Insert the Table Using a Shortcode:

You can also insert any table in any page or post created with Bricks Builder using the Shortcode element. Here is how to do this:

• Go to WordPress Dashboard → Riovizual → Tables

• Copy the Shortcode of your table you want to display
• Open the page or post with Bricks Builder

• Add the Shortcode element
• Paste the shortcode and save your changes

Both methods let you reuse the same table across multiple pages while keeping everything synced automatically.

Method 2: Create a Table in Bricks Builder from Scratch

If you prefer building a table from scratch, start with a blank layout in RioVizual and create the table as you want.

In this example, we will recreate the same table using the Table Builder block of RioVizual.

Here is a step-by-step guide to do this:

Step 1: Create a Table from RioVizual’s Dashboard

• Follow the same steps from Method 1 → Step 1 to create a new table
• This time, select Build from scratch to start with a blank layout.

Step 2: Define the initial Table Structure:

After selecting Build from scratch, a setup panel will appear. Here, you need to define the basic structure of your table.

• Column Count: Set to 3
• Row Count: Set to 3
• Cell Border Type: Select Separate cell border

Click Create Table after setting these values.

Once created, you will see a blank table canvas with an “Add Text” placeholder in each cell. This is your starting point. From here, you can add content, elements, and styling based on your design.

Step 3: Add Contents to your Table

Now you can start adding content to your table. RioVizual allows you to use different elements such as text, images, icons, star ratings, and buttons.

3.1 Add Image Element:

• Select the target cell where you want to add the image
• Click the + icon in the bottom-right corner of the cell
• Choose Image from the element list
• Open the Settings Panel and navigate to General tab
• Enable the Insert from URL toggle
• Paste your image URL into the field

This will display the image inside the selected table cell. You can also upload images directly from your computer or choose them from the WordPress media library.

3.2 Style the Image Element:

• Click Global style from the settings panel
• Expand the image styling options
• Open Sizing and set:
  • Width: 200px
• Open Alignment Settings and set
  • Middle Align (Horizontal)

3.3 Add Media & Text Element

• Select the target cell
• Click the + icon in the bottom-right corner
• Choose Media & Text from the element list
• Add your text by typing into the “Add text” placeholder
• Open the Settings Panel → General tab
• Enable the “Insert from URL” toggle to add media
• Paste the image URL into the field

Now, to save time:

• Right-click on Media & Text Element and click Copy Element
• Right-click on other cells and select “Paste Element”

This helps you quickly duplicate the same layout across multiple cells. You can also remove the default “Add text” placeholder by right-clicking and selecting “Delete Element.”

3.4 Style the Media & Text Element

• Click to open Global style from the Settings panel.
• Expand the Media & Text settings and apply the following:
  • Color: #FF0000
  • Background: #FFE4E4
  • Typography: 
    • Font Weight: 400
    • Font Size: 13 px
  • Border: Border radius 35px (all side)
  • Spacing: 
    • Padding: 3px (Top, Bottom)
    • Margin: 6px (Bottom)
  • Alignment:
    • Horizontal: Middle Align
    • Vertical: Middle Align

Note:
If the layout does not match your template exactly, you can:

• Enable equal cell widths from table settings, or
• Set the table to full width

3.5 Change Cell Widh:

• Click Table Settings from the top-right corner of the table
• Go to the General tab in the Settings Panel
• Enable the Equal Cells Width toggle

Now the Wrapper of the Media & Text looks exactly the same as the table we have created earlier.

3.6 Add Text Element

• Select the cell where you added the Text element
• Click the + icon in the bottom-right corner

• Choose Text from the element list

• Click the “Add text” placeholder and enter your content

3.7 Style Text Element

• Select the text element and open Global Style
• Expand the Text Style settings and apply the following:
  • Color: #141414 (text color)
  • Typography:
    • Font Weight: 600
    • Font Size: 20 px
    • Letter Spacing: 0.5px
    • Text Transformation: Capitalize
  • Spacing:
    • Margin: 16px (bottom) 

Note: Unlink the spacing fields if you want to apply different values to each side.

3.8 Add Advanced List Element

• Select the target cell
• Click the + icon in the bottom-right corner
• Choose Advanced List from the element list
• Open Settings Panel → General tab

Now configure the list items:

• Add your text content
• Select an icon from the Font Awesome library

You can also add, duplicate, or remove list items as needed.

3.9 Style the Advanced List

• Open Global Style and expand Advanced List settings
• Apply the following:

• Icon Style:
  • Gap: 8px
  • Size: 14px
  • Color: #08DC64

• Item Style:
  • Color: #666666
  • Typography: 
    • Font Weight: 400
    • Line Height: 15px
    • Letter Spacing: 0.5px

3.10 Add a Star Rating Element

• Select the target cell
• Click the + icon in the bottom-right corner
• Choose Star Rating from the element list
• Open Settings Panel → General tab

Now Configure the rating:

• Rating Value: 4.8
• Rating Scale: 5.0
• Enable Show Rating Value
• Enable the toggle for Show Rating Value and apply:
  • Rating Value Style: Numeric
  • Rating Value Position: Bottom

This helps display clear ratings along with numeric values for better understanding.

3.11 Style the Star Rating

• Select the element and open Global Style
• Expand the Star Rating settings and apply the following:

• Icon Style:
  • Fill Color: #FFC300 (rated stars)
  • Unfill Color: #F6F6F6 for (unrated stars)

• Wrapper Style:
  • Spacing → Margin: 40 px (bottom)
  • Alignment → Middle (Horizontal)

3.12 Add Advanced Button

• Select the target cell
• Click the + icon in the bottom-right corner
• Choose Advanced Button from the element list
• Add your button text in the “Add Text” field
• Paste your destination link into the URL field

This allows you to add call-to-action buttons inside your table.

3.13 Style Advanced Button

• Select Hover State → Global Style → Adv. Button
• Apply the following changes:
  • Icon Style:
    • Gap: 12 px
    • Size: 14 px
  • Button Style:
    • Color: #000000
    • Background: #FFE23D
    • Typography:
      • Font Weight: 500
      • Font Size: 16px
    • Border: 
      • Border Radius → 35px (top, right, bottom, left)
    • Alignment: 
      • Middle (horizontal)

Now switch back to the Normal (Non-hover) State and apply the same styles:

• Icon Style:
  • Gap: 12 px
  • Size: 14 px
• Button Style:
  • Color: #000000
  • Background: #FFE23D
  • Typography:
    • Font Weight: 500
    • Font Size: 16
  • Border: Border Radius → 35px (top, right, bottom, left)
  • Alignment: Middle (horizontal)

3.14 Add Button Element

• Select the target cell
• Click the + icon in the bottom-right corner
• Choose Button from the element list
• Add your button text in the “Add Text” field
• Open the Settings Panel → General tab
• Set Alignment → Middle (Horizontal)
• Paste your destination link into the URL field

3.15 Styl the Buttons

• Select Hover State → Global Style → Button
• Do the following changes:
  • Color: #000000
  • Background: transparent
  • Typography:
    • Font Weight: 500
    • Font Size: 15px
    • Text Decoration: Underline
  • Alignment: Middle (Horizontal)

This creates a clean, link-style button that works well for secondary actions.

Final Result

And that’s it. You have now recreated the same table layout that we imported earlier.

You can now insert this table into any Bricks Builder page or post using the RioVizual element or the Shortcode element we covered earlier.

Which Method should you apply?

In this guide, we covered the most practical ways to create tables in Bricks Builder. All methods work, but the right choice depends on your time, skill level, and design needs.

Our Recommendations

• Use RioVizual to create and display tables inside Bricks Builder
• Start with pre-designed templates to save time and get faster results
• Build from scratch only when you need a fully custom layout

For beginners, the template method is the easiest and most efficient way to get started.

If you want to explore more options, check out our detailed guide on the Best WordPress Table Plugins to find the right solution for your website.

FAQ