How to Use Table Widget

How to Use Table Widget

I’m going to write a documentation. In this documentation, I’ll show you how to use Table widget. This widget holds the opportunity of adding custom code. So, let’s get it started.

To Insert Widget

Inserting widget, it is just a matter of dragging and dropping. As you see in the screenshot above.

Content Tab

Using the content tab, you’ll be able to make a layout of a particular part (such as a table) of a website. And in this regard, some handy sections in the tab will assist you a lot.


Go to the Content tab > Table.

This section holds a few controls (Source, Content, Header & Body Alignment, Responsive, etc.). From the Source control, select Custom, CSV File (allow data in a table structured format), or Static.

Most importantly, in the Content control, you can add code custom.

In addition, from the Responsive control, you can set Responsive 1, Responsive 2, or No Responsive.

Data Table Settings

Simply, go to the Content tab > Data Table Settings.

In this section, you’ll get some switcher buttons(). Just you’ve to activate or deactivate them in accordance with your demand.

Style Tab

Now, let’s work with Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you require to design. 

Styling with the Style tab in Elementor will always give you a fantastic experience.

Let’s have a look.


Only, go to the Style tab > Table.

Here, this section will allow you to add Border, Border width and color to around the Table.

The is another switcher below called the Leading Column Style that highlights the first column as the leading column over others. Turning on the switcher will pop up another section in the Style tab named Leading Column.

This section lets you customize the leading column by color, border, typography, and padding.


To style the Header part, go to the Style tab > Header.


In this section, you will be able to add border style, border width and cell padding to the body of the table.

Most important thing is that there are three modes (Normal, Hover, and Stripe). In terms of the Normal mode, you may add background, text, and border color.


And regarding the rest two modes, you can set background color and text color.



Simply, go to the Style tab > Body.


There are two modes (Header and Footer). These two modes separately allow you to style the Header part and Footer part. Look at the screenshot below.



Just, go to the Style tab > Filter.

Video Assist

In conclusion, though there are various table creating plugins in the WordPress repository, I hope our Table Widget will be one of the best solutions for making table. Watch video assist and to get more ideas about the usage of the widget by Element Pack, take a jump into the demo page.

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

A first-ever all-in-one web solution with essential widget, extensions, and features for Elementor WordPress.

Your complete web development partner.


Copyright © 2022 BdThemes.
All Rights Reserved. Site built with Element Pack & Rooten Theme.

AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy Element Pack Pro?

Don’t miss 230+ essential Elementor widgets and 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.