Getting Started

Divi is a fantastic theme having all the necessary modules that help to accomplish the dream design. However, in some cases, the Divi modules can’t get you what you desire. For instance, designing a data table is quite tough with the Divi default modules. Consequently, Diviflash launched a table module for divi dedicated to creating a remarkable table on the website. This module was invented along with all the advanced features. Such as the child item, responsive setting, table, head, body, foot, first & last column, image, icon, link, border style, and custom spacing are the most attention catcher features. On top of these, a couple of supportive features are available under this module. Finally, you get the features of the Divi table module listed into three categories, the Content, Design & Advanced tab.

Child Item

Before discussing the global features, it’s essential to get proper instruction about the child item first. The child item is the feature where you input data and create a table row. To be specific, one child item is one table row; and if you go further down to the child item, you will discover a couple of features dedicated to importing a variety of data. Once again, the feature list is structured under three categories,
+ Content Tab
+ Design Tab
+ Advanced Tab

Child Item Content Tab

The Child item content tab contains the most crucial features deployed to build a table from scratch. All the features that are required to create a Divi table are integrated under this content tab. Such as the content, table option & admin label features are presented here to complete the initial process of establishing the table module.

Content

The content feature carries the most prominent customizing attributes of the child item content tab. This feature allows you to create numerous columns with the advantage of providing data in columns. The entire procedure of creating columns and adding data is completed by writing the regular text in the column section of the content feature. Remember, the text is separated by newlines, and providing an icon, image & link on the table required HTML codes. However, read the article for detailed instructions on creating columns, including adding data in the Divi table module.
Moreover, you can specify the row type for the created column between three different row styles, the head, body & foot. It would be best to be concerned that selecting the head type row brings you a property called Use Badge. This property is used to attach a badge with a particular data imported in the head section. Also, you can provide a custom text & position for the badge.

Table Option

The table option of the child item plays a significant role in structuring the data in an informative way. For example, at some point, you need to demonstrate the Divi table data by merging a specific column & row over a number of item values. Accordingly, the table option lets you merge a particular column with multiple items values for all types of rows. On the other hand, the Enable Row merge property of the table option allows you to merge the values of a few items into a single row. Note down; the Enable Row Merge property is only available for the body type of row.

Admin Label

Admin Label of Divi table child item provides the opportunity to modify the item name as you wanted. So, it doesn’t have to be the child item’s actual name that generally shows on the wireframe view.

Child Item Design Tab

The Child item design tab is regarded as the second step of creating the Divi table module. The design tab is deployed to embellish each part of the child item that got attached in the content tab. So, for instance, you can decorate the row, icon, link & badge of the particular child item. So, without further ado, let’s discuss each feature workability with a detailed demonstration.

Row

The row feature works exactly as its name represents itself. This property changes the row background color, font style, weight, alignment, text color & size of a particular child item. Besides, the row letter-spacing & line-height get adorned over various text-shadow effects.

Icon

The Icon feature of the child item design tab is presented to set a proper icon color, size & cell margin. Likewise, this feature helps to apply a distinct border style, width & color over a border corner rounding effect.

Link

The link feature integrates numerous design properties that help to decorate the link of a particular child item. This feature authorizes you to play with the linked background color, padding, font-weight, style, alignment, text color & size. Furthermore, you get yourself an option to fix the link letter-spacing & line-height alongside different text-shadow effects. Nevertheless, apply distinct link border style, width & color along with a border corner rounding effect under this feature.

Badge

Except for the padding, all the properties you get in the link are also included under the badge feature.

Child Item Advanced Tab

As a designer, you will be satisfied with what you achieve under the child item content and design tab. However, the child item advanced tab gives you the power to play with the item for further customization. Moreover, the developer can make changes by coding in the custom CSS property of the advanced tab. Also, the visibility, transitions, position & scroll effects feature are here to provide you the extreme support.

Note: Once again, all the features and effects you get here apply individually to each child item of the Divi table module.

Global Features of Advanced Divi Tabs Module

So, now it’s the right time to discover the entire working process of the global features of the Divi data table. Be aware that the global features affect the whole module at once. Like any other Divi module, the structure of the Divi table global features is separated into three categories,
+ Content Option
+ Design Option
+ Advanced Option

Divi Table Module Content Tab

The content tab is responsible for adding a new item to the Divi table module. This tab also has the purpose of making the entire module responsive for the mobile & tablet. Moreover, it has some features to change the whole module background & name. So, let’s find out how all the features of the content tab works.

Setting

Under the setting feature of the content tab, you get the attribute called Responsive Mode. Activating the responsive mode makes the entire module tablet & mobile friendly.

Background

The background features of the Content tab have multiple attributes to apply for a better layout view, such as background color, gradient color, image, and video properties. On top of these features, there are some settings to make each adjustment as you desire. Note, this background will apply to the entire module.

Admin Label

Admin Label of the Divi table module provides the opportunity to modify the module name as you want. So, it doesn’t have to be the module’s actual name that generally shows on the wireframe view.

Divi Table Module Design Tab

The design tab is considered the most remarkable part of the Divi table module. This tab carries a vast number of advanced features dedicated to adorning each ingredient applied before. Such as the table, head, body, foot, first & last column, image, icon, link, border style & custom spacing are counted as the most precious features among others. Except for these features, a couple of supportive functionalities are included under this tab.

Table

The table feature is imported to modify the entire border of the Divi table module. This feature authorizes you to implement a decorative border style, width & color with a border corner rounding effect. Moreover, you can apply different types of box-shadow impacts along with a perfect shadow color. Nevertheless, you get yourself an option to define the border shadow position.

Head

Decorating the head section of the Divi table module requires the head feature of the design tab. This head feature is responsible for changing the header background color, font-weight, style, alignment, text color & size. Besides that, you can set the table header letter-spacing & line-height with various text-shadow effects. Not only that, the head feature allows you to implement a new border style, width & color alongside a border corner rounding effect.

Body

The body is an imperative feature to embellish every single body row of the Divi table module. Under the body feature, you get the opportunity to apply a body row background color, row odd & even number background color. Besides that, this feature lets you modify the font-weight, style, alignment. text color, size, letter spacing & line-height alongside text-shadow. You can even implement a distinct border style, width & color, and border corner rounding & box-shadow effects.

Foot

Each of the customizing properties you get in the head settings is also included under the foot feature of the Divi table module.

First Column

The first column plays a significant role in the Divi table module in some cases. Consequently, the Divi table module imported a feature called First Column dedicated to adorning the earliest column. This feature permits you to change the first column background color with the facility to exclude the head & foot of the column. Also, you get yourself an option to modify the font-weight, style, alignment, text color, size, letter spacing & line-height under different types of text-shadow effects. Nevertheless, you are authorized to embellish the first column border style, weight & color alongside a border corner rounding effect.

Last Column

Each of the customizing properties you get in the first column is also included under the last column of the Divi table module.

Image

The image feature of the Divi table module helps to set a perfect image size & apply a suitable cell margin around the image. Moreover, this feature gives you the authorization to define the image border width, style, & color with a border corner rounding effect.

Icon

Each of the customizing properties you receive in the image settings is also included under the icon settings of the Divi table module. In addition, you can change the icon color as you want under this feature.

Link

The link is a remarkable feature dedicated to decorating any link or button provided in the Divi table module. This feature lets designers change the link background color, font-weight, style & alignment. Also, you can provide the padding around the background color. Plus, you are permitted here to decorate the link text color, size, letter spacing & line-height over different text-shadow effects. Lastly, the link border width, style & color can be embellished over a corner rounding effect beneath this feature.

Border Style

The border-style feature provides you with a couple of design properties deployed to adjust the Divi table border width overlap. Activating the Head Row Equal Border attribute eliminates the border where it gets doubled at the head portion of the module. Consequently, the head border looks clean & great that improves the entire module appearance. The same thing is attainable for the body and foot of the Divi data table. However, turning on the Last Column Border Right attribute diminish the border from the right side of the last column. Whereas, the First Column Border Left attribute helps to hide the left border of the first column.

Custom Spacing

The custom spacing is an innovative feature that works to provide a suitable gap between the module ingredients. The custom spacing allows you to implement compatible padding around the entire table, head, body & foot section of the Divi table module.

Sizing

You would love to control the Divi table module’s alignment, width, and height as a designer. Here, the sizing feature stands in your favor to increase or decrease your container’s width and height. In addition, you can set a min or max height & width of the table.

Spacing

Divi makes the spacing setting a default feature for the entire module. Therefore, you will find two standard margins and padding settings that work the same for all Divi modules in this function.

Border

The Border feature of the divi table module can provide you a border corner rounding effect for the container. Also, you can customize the design by changing the border width, style, and color under it. However, don’t feel confused by just reading; try once and see if it’s easier than you thought.

Box-Shadow

This Box shadow affects the entire divi table module and has six distinct shadow effect styles with all the necessary settings.

Transform

The transform feature of the divi table module provides you five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions on your table module will give you better control over the section.

Animation

Animation effect setting exists in all the Divi default modules. It has seven different effects and other options to adjust the beauty of the animated section.

Divi Table Module Advanced Tab

Whatever designers want is achievable under the content & design tab, so take the pleasure as much as you can. However, the advanced tab of the divi table module has a great purpose of carrying the designers to the next level in the web designing industry. Designers or developers can precisely play with every ingredient by encoding the CSS ID & Classes & other Custom CSS codes. Moreover, The visibility, transitions, position, and scroll effects settings are included here to work proficiently.

CSS ID & Classes

CSS ID: The only purpose of the CSS ID section is to identify the ingredient separately while linking, scripting, or to style the module.
CSS Class: Assign any CSS classes to the element, separated by spaces, which can be used to assign custom CSS style from within your child’s theme or from Divi’s custom CSS inputs.

Custom CSS

The Custom CSS section has three distinct CSS implementing areas in the Divi table module. You have access to all the areas to write down any CSS Code and target any particular area.

Visibility

The visibility option of the advanced setting offers designers to conceal the divi table module on particular devices.

Transitions

Under the transition setting, you have features like Transition duration, Delay, and Curve Speed for better customization.

Position

Here you can take complete control over the relative, absolute, and fixed position. This option is also available in every Divi module and works almost the same for all.

Scroll Effects

If you want to provide a scroll effect to your module, here you have the opportunity with the scroll effect setting. Under this setting, you get a Sticky position, scroll transform effects, vertical motion, and motion effect trigger functions like any other Divi module.

NOTE:
Mobile: Any setting that has a mobile icon will allow you to customize according to devices. You can select different settings for desktop, tablet & Mobile.
Mouse: A mouse pointer in the setting will allow you to set a hover effect on this element.