Table Overview

DiviGear introduces a new table module so you can showcase your data more efficiently with responsive design. With DiviGear’s table module, table creation will be effortless.  

In this documentation, we aim to show you the features and capabilities of DiviGear’s table module.

Table Settings 

When you select the Table module to use, the table settings window will appear.

The Table Settings window has three tabs: Content, Design, and Advanced. 

Under the content tab, you will see a plus icon that says Add New Item. If you want to create a table, click on this option. 

Table Row Item Settings – Content

Clicking on this option will take you to the Table Row Item Settings window where you can create the columns, and rows and input the data of the table. This tab has all the options to individually edit rows and columns.

Content

  • Columns: The first thing in the Table Row Item Settings is the Columns editor under the Content section. This is where you can input the data that will go into each column of the table.

Type in to input the data. The data you input in the first line will go to the first column of your table. Press Enter to create the second column and type in the data you want to input there and so on.

To create an empty column use the HTML code for space (&nbsp). If you want to use an icon, use this code <span class=”et-pb-icon”> icon code </span>. You can find a list of icon codes from here.

To add more rows, go back to the Table Settings tab and add more rows by clicking on the (+) icon.  

  • Row Type: The next option is Row Type, where you can choose the type of row you just created. If it’s the first row, you need to choose Head, Foot if it’s the last row, and choose Body for the rest. 
  • Badge: For the head of the table, you can use a badge by turning the badge option on.
    • Badge Text: Set the text for the badge. 
    • Badge Position: Choose the column where the badge will be positioned.

Table Options

The Table Options has two buttons-

  • Enable Row Merge: Enabling this option lets you merge rows. Once you enable it, two fields will appear.
    • Merge Row Item: Choose which row you want to merge. It accepts numerical input as the row number.
    • Merge Row Item Value: Choose how many rows you want to merge.
  • Enable Column Merge: The option lets you merge rows. When enabled, two fields will appear.
    • Merge Column Item: Choose which column you want to merge. It accepts numerical input as the row number.
    • Merge Column Item Value: Choose how many columns you want to merge.

Note: For the head and the foot “Enable Row Merge” is disabled.

Label

You can give the module a custom label instead of a default one.

Table Row Item Settings – Design

The table can be visually customized using the options provided here.

Row

Edit the row’s background color, font, text alignment, text color, text size, spacing, line height, text shadow, etc.

Icon

Change the icon color and size, add borders and cell margins, etc.    

Link

Any links added to the table using HTML can be customized here. You can add a background, change the font, text size, etc.

Badge

If you’re using a badge, you can modify it from this section. You can change the background, and alignment, add margins and paddings, change font and text, etc. Also, by enabling the Full Width Badge option, you can make the badge as wide as the column.                     

Table Row Item Settings – Advanced

This section has options to further customize your table rows and columns using CSS code.

Now that we have explored adding rows and columns and how to customize them individually, we will explore the Table Settings where we can modify the entire table.

Table Settings – Content

Right under the rows you have added you will find the following sections.

Settings

Turn on the Responsive Mode to optimize for mobile devices.

Background

You can add a background color, gradient, image, video, pattern, and mask.

Admin Label

You can assign a custom label to the module instead of the default one.

Table Settings – Design

Customize the visuals of the whole table from this tab.

Table

You can customize the outermost border of the table and make the corners round. 

Head

Add a background color, change fonts, text alignment, text color, etc. to the table’s head. 

Body

Change the background color, fonts, text alignment, text color, etc. of the table’s body. You can choose different settings for the odd and even rows of the table.

Foot

Change the background color, fonts, text alignment, text color, etc. of the table’s foot.

First Column

Customize the background, font, text, and border of the first column. You can exclude the head and the foot by enabling the Exclude Head and Foot option.

Last Column

You can choose a different background, font, text, and border for the last column and also leave out the head and the foot.

Image

If there is one or more images in the table, you can change their size, add a cell margin, and customize the border from this section. 

Icon

Here you can customize any icon that is used in the table. The customization options include color, size, margin, borders, etc.

Link

HTML links can be customized here, including adding a background, changing the font, and changing the size of the text.

Border Style

Enable or disable different borders of the table.

Custom Spacing

Add custom padding to the outermost border, head cell, body cell, and foot cell. 

Sizing

Lets you customize the height, width, and alignment of the table module.

Spacing

Add margins and padding to the module.

Border

Change border style, and color, and apply rounded corners.  

Box Shadow

Apply a shadow to the Data Table module.

Filters

Modify the colors that were applied to the module.

Transform

Make changes to the scale and position of the module.

Animation

Apply an animation effect to the Data Table module.  Choose from 7 different styles of animation.

Table Settings – Advanced

The advanced section contains features that are common to every Divi module. 

If you want to customize each item in the data table module using CSS, here are the customization options available to you. 

Submit a Comment

Your email address will not be published. Required fields are marked *