RioVizual is a complete solution for creating any kind of table in WordPress. With this, you can create a table in the block editor interface with blocks like table builder, pros and cons, and more. 

Among many blocks, Table Builder is an exceptional one. It’s a complete pack that incorporates advanced features while retaining all of the Gutenberg table block’s properties. 

Let’s see what the table builder block has to offer and its ins and outs that make table creation effortless.

Block Control Toolbar #

We’re starting with the “Block Toolbar,” which will be placed above the table. By default, you’ll see 7 options, and you can access all the available options (14) by clicking any element.

Important Note: Out of the 14 options, bold, italic, and link will be available only when you have text, buttons, or list elements in your table.

Table Builder:  #

Table Builder includes 3 table-transforming options: table, columns, and group. Using the ‘table’ option, you can convert your table to the default table block format and transform any default table block into a Table Builder block.

Drag:  #

Use the drag option to move your table to any desired location easily. Simply click, then start dragging the ‘’Drag’’ icon and release it in your preferred spot. 

Move:  #

Rather than using the drag-and-drop option, you can use the move option to reposition your table. There, you’ll find up-and-down icons for repositioning tasks.

Align:  #

This option enables you to adjust the position of your entire table within your page or post layout. Based on the type of theme you’re using, you’ll have different alignment options.

Table alignment: #

This tool also aligns the table within the block to the left, right, and center. However, this alignment will work only if the table size is smaller than the default block size.

Bold: #

You can make any text bold, which is useful for drawing attention. To apply bold formatting, select the text you want to emphasize and click on the ”B” icon on the toolbar. 

Italic: #

Convert any regular text to italic by using the “I” option from the toolbar. Simply select your text from the table and then click on the italic option.

Link: #

Insert any type of link into your table’s content element. It functions as a hyperlink, making it ideal for linking to external sites, pages, or resources. You can choose whether to open the linked source in a new tab.

More: #

The downward-facing arrow or ‘’more’’ option next to ‘’Link’’ contains additional content element settings. By clicking on the downward-facing arrow, you’ll discover five functions, including inline code, inline image, strikethrough, subscript, and superscript.

Table #

Table options provide a way to customize and adjust the table structure to fit your specific layouts or content requirements. This option has 8 table manipulation functions:

1. Insert row before: Select a row, and then add a new one right above it.
2. Insert row after: Add a new row below the selected one easily.
3. Delete row: Select a row and easily remove it from your table, including all of its contents. 
4. Insert column before: Add a new column to the immediate left of your current columns.
5. Insert column after: Expand your table horizontally by adding a new column next to the current one.
6. Delete column: Permanently remove the chosen column, including all cells and their contents.
7. Merge Cells: Combines multiple adjacent cells into a single, larger cell.
8. Unmerged Cells: Revert previously merged cells to their original individual formats.

Note: All the manipulation functions available in the table options operate based on specific conditions. For instance, you can only use the merge function when selecting multiple cells; row functions are inaccessible while an entire column is selected, and so on.

Add Element #

Add Element, the core aspect of this block, lets you add a variety of interactive and visual elements to individual table cells. You can go beyond simple text-based tables and create engaging experiences for your audience by incorporating elements like:

1. Text: Input and display plain text into table cells.
2. Image: Add images to table cells to display illustrated data.
3. Button: Insert a clickable button for a direct call to action.
4. List: Use bulleted or numbered lists to organize information in a listing format.
5. Icon: Add an icon to a cell. Table Builder supports font awesome.
6. Shortcode: To embed dynamic or complex content.
7. Star Rating: Add a star rating to the table cell to represent visual feedback.
8. Icon Button: Add a clickable button with a combination of text and an icon.
9. Advanced Text: Allows you to add text alongside images or icons.
10. Icon List: This function is similar to a list but it lets you add custom icons.
11. Dual Button: Add two buttons side by side in a single cell.

Duplicate Element #

Using the “Duplicate Element”, you can create an identical copy of the selected element within the chosen cell. After duplicating an element, you can customize it based on your needs.

Delete Element #

Effortlessly delete any unwanted element by selecting it and clicking the ‘’Delete Element’’ option found within the table block’s toolbar.

Options #

The last option you’ll find in the block toolbar is named ‘’Option,’’ where you’ll discover a range of table management functions. Check out this WordPress doc about “more options” to learn about its ins and outs.

Global Settings: #

The ‘’Global Settings’’ option, located on the right side above the table, pertains to a set of configurations that apply globally to your entire table. Clicking on it will activate all the global settings options that you’ll find in the block settings panel.

Table Management #

RioVizual prioritizes flexibility, offering a wide range of table management options. When you click on any table cell, you’ll notice a gray ‘’+’’ icon above and on the left side of the table. By using these icons, you can insert a row or column both before and after.

A drag icon appears when you hover over any cell or content element in your table. Utilize the drag icon to seamlessly drag and drop your content element onto any cell within the table.

In addition to these features, explore further table management methods by right-clicking on the table header, row, and column:

Row Management: #

Hover over any row and click the downward arrow labeled ‘’Select Row’’ in the leftmost cell. After that, right-click on the same downward-facing arrow to reveal a menu containing various functions (10) for managing table columns:

1. Insert Row Before
2. Insert Row After
3. Duplicate Row
4. Move Row Left
5. Move Row Right
6. Copy Row
7. Cut Row
8. Delete Row
9. Add
10.  Delete

Column Management: #

To access column management functions, hover over any column’s first row and click the downward arrow labeled ‘’Select Column”. After that, right-click the same arrow to reveal column management options, which mirror those available for row management but are specifically designed for columns.

Note: Whenever you’re managing columns or rows, you’ll find a delete icon located above or beside the downward-facing arrow, allowing you to delete the entire row or column.

Individual Cell Management: #

Similar to columns and rows, RioVizual’s ‘Table Builder’ block also features easy-to-use cell management functions. When a cell is empty, simply right-clicking on it will prompt the ‘Add’ option. This allows you to access all available elements for adding content to a table cell.

Additionally, you can convert your last row to a footer section, or any footer section to a body section, by right-clicking after selecting the last row of your table.

Block Settings #

Like other Gutenberg blocks, a block settings panel appears on the right side of the block editor once you’ve created your table. Within the settings, you’ll find three main tabs: general, style, and advanced.

Each tab offers numerous customization and styling functions. Additionally, for almost all styling and customization options, there’s a reset option to revert the settings back to default.

Before we get into the three tabs, let’s check out two more exclusive options called “Normal” and “Hover” available in the block settings:

1. Normal 

Normal, it’s all about making the table responsive for a variety of devices. Under this, there are three functions to choose from: desktop, tablet, and mobile. Simply choose the device you want to focus on and tweak the styles and settings just for that specific device.

• Desktop
• Tablet
• Mobile

2. Hover

While you can choose a specific device type for the ‘’Normal’’, the ‘’Hover’’ does not provide that specificity. The hover effect will be applied globally across all devices. However, you can apply hover effect for individual cells and elements.

Note: Underneath the normal and hover, you’ll come across the ‘’Reset All Styles’’ option. This feature allows you to reset all the customizations you’ve applied to both the normal and hover states.

General #

The ‘’General’’ tab houses the primary structural settings for the entire table, offering a variety of customization options. Initially, you will find ‘’Table Settings,’’ and as you add elements to your table, additional settings options will become available within the ‘’General’’ tab.

• Table Settings

1. Equal Cells Width: Toggle on to make all cell widths equal, no matter their content type or amount. It helps make the table look balanced and uniform.

2. Convert First Row to Header: Turn the first row of your table into a header row, which will be highlighted differently from the rest of the cells.

3. Convert Last Row to Footer: Like the first-row option, this option sets the last row as the footer, often used for summaries.

4. Use Scrollbar on Large Devices: Activate the horizontal scrollbar, which is ideal for table layouts that exceed the capacity of the table container for large devices.

5. Use Scrollbar on Small Devices: Similar to the previous function, this one adds a scrollbar, but specifically for smaller devices.

6. Enable Responsive Table: This option allows you to make your table responsive by specifying a breakpoint. With control over the breakpoint, you can easily adapt your table to different screen sizes.

Important Note: Enabling the responsive option will display two columns with a header, three columns with both a header and footer, and a single column without both on small screens. Following the responsive option, you can set the top row as the header if your table doesn’t have a header.

7. Enable Stack Table: 

Utilize the stack table option, which lets you specify the breakpoint, to optimize the table for various screen sizes.

Important Note: Upon activation, it will display all your table information in a single column. 

8. Sticky:

The sticky option gives you the ability to control the position of elements on your table. It has three options:

i. None: Go for “None” option when you don’t what fixed row or column. 

ii. Top Row: Ensures continuous visibility of your table headers as users scroll vertically. (It won’t work on large screens if the “scrollbar on large devices” is enabled. Also, it won’t work on small screens if the scrollbar, responsive table, or stack tables are on.)

iii. First Column: While scrolling sideways, the first column remains in place. It helps your viewers see the information in each row. (It works only with scrollable tables and won’t function on small devices if stack table option is enabled.)

Important Note: When you choose the top row as a sticky format, you can set the offset from the top. Alternatively, for the first column selected as a sticky option, you can set the offset from the left.

9. Keep Cells Content on Merge: Toggle this option to keep cell data while merging multiple cells. By enabling this, you’ll make sure the data from those cells doesn’t get deleted.

• Content:

In the general tab, you won’t see the ‘’Content’’ option, but when you click on ‘’Add Caption,’’ it will become visible. Within the ‘’Content’’ option, you’ll find a function called ‘’Caption Text’’ with a field to input the text you want to set as your table caption.

Style  #

The ‘’Style’’ tab has a range of styling and customization options, with support for both global and custom functions. Initially, you’ll find options for cells, tables, and captions. But, adding different elements will reveal additional styling and customization options related to those specific elements.

• Cell:

You can style table cells globally or individually. Within the cell options, you’ll discover functions for background, border, sizing, spacing, and alignment, offering a wide range of customization options.

If you select the global settings option for a cell, you can choose the border type from two options, including collapse and separate. The separate option lets you set cell gaps both horizontally and vertically.

Important Note: Choosing the ‘’separate’’ option introduces two new settings with distinct styling options. In the cell border settings, you’ll find the border-radius function. Additionally, within the table settings, you’ll discover an option for spacing.

• Table

The table option allows you to style the entire table with some of the most commonly used styling functions. By choosing the default option, you’ll find functions such as color, link, background, typography, and more.

Alternatively, selecting ‘’strips’’ introduces two additional styling functions for odd and even row backgrounds, along with color functions like classic and gradient.

Note: The table option doesn’t include a custom or individual styling function. Any changes you make will apply globally.

Caption: #

RioVizual’s table builder block enables you to add captions to your table. Besides just adding it, you can choose your preferred position for the caption and customize it with dozens of styling options, including:

1. Color
2. Link Color
3. Background
4. Typography
5. Border
6. Box Shadow
7. Sizing
8. Spacing
9. Alignment

Advanced #

We offer the utmost flexibility for users. With the advanced options, you can achieve specific design requirements that might not be possible with our block’s built-in options. 

Initially, you’ll have two options in the advanced tab after initiating a table: 

1. Plus Extra – Cell: You have two options for selecting a cell tag: TH and TD. If you choose TH, you can then select scope attributes for row, col, rowgroup, and colgroup.

2. Advanced: The advanced option offers three functions: adding additional CSS classes for selected elements, selected cells, and the entire table. This provides flexibility for adding custom CSS to your table.

Note: We’ve focused on exploring the introductory interface and settings of the ‘’Table Builder’’ block in this documentation. To understand how various content types and customization options impact table creation, please refer to this documentation: