If you’ve been using WordPress for quite some time, you might know how to create a table in WordPress using Gutenberg’s block editor.
But when it comes to advanced styling, customization, and making a supremely responsive table, you’ll need a third-party plugin.
Introducing RioVizual, a drag-and-drop table builder with the flexibility to add columns, and rows, as well as customize styling and formatting.
It’s a free table maker that allows you to create advanced tables and pros-and-cons tables (more table blocks are coming).
As mentioned before, you can create a table in WordPress in multiple ways including using and not using a plugin. We’re going to cover both ways with a detailed step-by-step process.
- Create a table in WordPress editor
- Create a table in WordPress plugin – RioVizual
How to create a table in WordPress editor
Gutenberg comes with a dedicated table block with basic functionalities to create a table directly from the WordPress editor. Here is the step-by-step process of it:
Step 1: Access the Gutenberg Block Editor
Login to your WordPress dashboard, then go to the page or post where you want to add a table. After that, click on the “+” icon, and select or search for the “Table” block.
Step 2: Specify Table Dimensions
Determine how many columns and rows you wish to have in the table and click the ”Create Table’’ button. Later you can add more or remove rows and columns as needed.
Step 3: Add and Edit Content Elements
Once the table structure is established, you can proceed to add content. Click inside each cell to insert text, images, or other supported content elements. Click on the “More” option from the top toolbar to find out content element types.
Step 4: Customize Table Appearance
After adding all the necessary information to the table, customize its appearance using the toolbar above. You can adjust table width, alignment, text formatting, linking, cell and row management, and more.
Step 5: Style the Table from Block Settings
In the WordPress block editor, you’ll find table settings on the right side, providing both settings and style options. The settings enable you to activate a header and footer section for your table, along with controlling the width of cells.
In contrast, the style options enable you to customize the appearance with options like:
- Selecting the default or stripes style
- Modifying the text or background color
- Fine-tuning the typography’s appearance with various adjustments
Once you’ve finalized your customization and styling, simply click the “Update” or “Publish” button to apply the changes and then preview the page or post.
Note: Check out this article to learn how to create a table in WordPress without plugins in many different ways.
How to create a table in WordPress with RioVizual
RioVizual, a drag-and-drop plugin, directly builds tables within your posts or pages with exceptional customization, style, and responsive options. It may be the newest but finest table block plugin available.
Here is a step-by-step guide to creating stunning tables in WordPress with RioVizual:
Step 1: Install RioVizual:
Begin by installing the RioVizual plugin from WordPress.org, or get it from the dashboard’s plugin option. Like this:
Dashboard> Plugins> Add New Plugin> Search for RioVizual> Install Now> Active
Step 2: Access the RioVizual Table Builder:
Once the plugin activation is done, open your desired page or post where you want to insert the table. Click on “+” or block inserter and find out RioVizual table builder.
Step 3: Select Build from Scratch and Configure Initial Requirements:
After inserting the table builder, you’ll have the option to select “Build from Scratch” or import a template. Select build from scratch.
Now configure the basic requirements that RioVizual offers, which include setting the number of columns and rows. You can also choose to enable header and footer sections, select table styles, and select cell border types, which you can all customize later.
Note: RioVizual table builder lets you see the result of each action you take, from inputting column counts to choosing cell border types.
Step 4: Add All the Necessary Table Data
Once the table is ready, begin adding data to the cells. To insert text, simply click on a cell. To add other content types, such as images, buttons, lists, icons, or shortcodes, click on the ‘Add Element’ button.
Here is how you can add and customize all the content elements:
- Text:
Click on an empty cell, type your content, and then customize the text style in ‘’Block Settings.’’ From the ‘Style’ option, tweak global and individual settings like color, link color, background, and more to enhance the appearance.
- Image:
To insert an image, click on “Add Element” from the toolbar above, select “Image” and then Select or Upload Media.
You can use the “Use External Url” option from the block settings’ general to use an image link to upload an image.
Don’t forget to use the ”Block Settings” style option to refine and customize the image. Similar to text, you can apply both global and individual cell custom designs to the image
- Button:
RioVizual lets you add buttons to your tables with tons of customization options. Simply navigate to the “Add Element” option and select the button icon.
Customize the button’s text and link through the block settings’ general tab. For visual enhancements, explore the style options within the block settings.
- List:
Including a list in a table makes the table more informative, actionable, and user-friendly. RioVizual lets you add as many lists as you want to the table.
Use the duplicate option from block settings’ general option to make multiple tables by inserting them manually. You can also edit each list individually by clicking on each of them.
RioVizual also gives you the opportunity to further customize and style the list with the style option. Besides having complete control over style and customization, you can choose from five styles to enhance the design.
- Icon:
Follow the process by going to “Add Element” and then add an icon to the table.
Take help from the “General” option to change the icon as well as include a link to the icon.
You can also further customize and style the icon using the style option of “Block Settings.”
- ShortCode:
RioVizual is all about making things easier for WordPress users and having a shortcode option in the table is a reflection of that. With just a few clicks, you can add any special functionality to your tables without diving into the complexities of WordPress coding.
You’ll find the shortcode option in the “Add Element” option as the 6th content element option. Besides just adding ShortCode, you can also style the added specific content type from the block settings’ style option.
Step 5: Update or Publish the Table
By now, you’ve successfully incorporated all the essential data and content elements into your table. It’s time to finalize your masterpiece and bring it to life on your WordPress site by clicking on update or publish.
Besides all the demonstrated features, functions, and customization options, RioVizual also has some other key features. Some of them are:
- Table Option:
Gutenberg’s table block has a table option at the table’s top toolbar and RioVizual also has the same. Here you’ll find features like inserting and deleting rows and columns. Plus, you’ll also find features like:
- Merge Cells:
To merge cells, simply select the cells you want to combine and click the “Merge Cells” button. The selected cells will merge into a single cell, effectively combining their contents.
- Split Merged Cells:
Sometimes, after merging cells together, you may need to create a new cell below the merged area. RioVizual’s “Slip Merged Cells” option makes this task a breeze.
- Duplicate Element:
RioVizual simplifies content creation with its user-friendly duplicate element feature, enabling you to effortlessly copy and paste any element within the same cell. This can be super useful for creating complex layouts and for quickly replicating content.
- Delete Element:
Effortlessly eliminate any unwanted content element with RioVizual’s intuitive delete element option. Simply select the element you wish to remove, and with a single click, it’s gone in a flash.
- Global Settings:
The global settings option provides a central location for making changes to the table that apply globally. It includes features like:
- Scroll on PC view:
Enable this option to allow users to scroll horizontally when you create a wider table.
- Stack on mobile:
Similar to the scroll option on PC view, enabling this feature allows users to horizontally scroll through the table when it has a lot of columns.
- Enable responsive table:
Enabling this feature will effectively adapt the table layout for mobile devices by stacking the table cells vertically, ensuring that all content is readily accessible on smaller screens.
- Fixed Control:
This feature keeps the table’s top row and/or first columns in place while scrolling the table. It’s useful for ensuring that users can always see the table’s top row and/or first columns, even when scrolling the table.
- Responsive Brake Point:
Users can define a breakpoint that triggers a seamless transition between responsive and fixed layouts for the table. This functionality is valuable for managing the table’s appearance across various screen sizes.
- Keep all cells content when merging cells:
Users can effortlessly merge cells in the table without compromising the integrity of the content. Additionally, users have the option to toggle it off if they prefer not to retain the content of merged cells.
Note: For those of you who don’t have much time to create tables, RioVizual’s pre-made templates might be your best friend. All templates are free and fully customizable, requiring no heavy lifting.
Frequently Asked Questions
Still have questions in your mind? We probably know what you are thinking about, and therefore, we’ve included some commonly asked questions along with their answers.
- How to Create a Pressable Button in a WordPress Table?
While the WordPress table block lacks the ability to embed buttons directly, it requires manual coding to achieve this functionality. In contrast, RioVizual offers a built-in button option, enabling seamless button addition and customization, including text, color, and overall appearance.
- How to Create a Comparison Table in WordPress?
WordPress table blocks allow you to create basic comparison tables, but their capabilities are limited. In order to go beyond its limitations and create advanced comparison tables, RioVizual is the ideal choice. RioVizual elevates comparison tables to a whole new level with its extensive features and ability to incorporate multiple content elements.
- How to Create a Responsive Table in WordPress?
Gutenberg’s table block is already responsive for mobile devices, so you don’t need to worry about responsiveness when using it. On the other hand, RioVizual offers a comprehensive set of features to make each and every content element responsive for mobile and tablet devices.
Closing Thoughts
Those days are gone when deep-coding knowledge was mandatory for creating tables. Now, Gutenberg itself has a table block with plenty of setting options, and third-party plugins like RioVizual also simplify the table creation process with a drag-and-drop approach.
We’ve shown two different ways to create a table in WordPress using the table block and the RioVizual plugin. Now it’s up to you which one you choose for your next table creation.
Opt for RioVizual if you want complete control over table creation and aim to add different types of tables to your site. Using WordPress table plugins like RioVizual will enable you to create responsive, stylish, and feature-rich tables.
Leave a comment