Up next in 10
How To Add Table In Elementor - Create Data Tables in WordPress
4K views
Jan 23, 2024
Empower your WordPress website with this informative tutorial on adding tables in Elementor. Whether you're a web designer or a content creator, this video provides step-by-step instructions on creating data tables seamlessly. Dive into the customization process and learn how to use Elementor to enhance your website with visually appealing and functional tables. Tune in to discover how to efficiently present data on your WordPress site, making it both informative and aesthetically pleasing. Elevate your web design skills with this tutorial on creating tables in Elementor. ๐๐โจ
View Video Transcript
0:00
Hi everyone, welcome to KeyTube blogging and in this video I will show you how you can
0:04
add a data table to your WordPress website using Elementor. As you know there is no table blog in Elementor, so you need to use an add-on plugin for that
0:14
So let's check how you can add a data table in WordPress. So here in this video we are going to use two different plugins, so you can use whichever
0:22
plugins best suited for you. So let's start the video. And by the way, if you found this video helpful, then make sure to hit the like button
0:32
So all I have to do is go to WordPress dashboard here and here as you can see that the Elementor
0:38
plugin is installed in our website. Now to add a table blog, we need to use a plugin, so I will go to plugins, click on
0:46
add new and here I will search for table add-ons for Elementor
0:54
And here you will see this plugin table add-ons for Elementor. So let's install now
0:59
So you can also use this add-ons like element kits add-on or essential add-ons to add a
1:04
table, but it comes with a lot of blocks, so it is a heavy plugin
1:09
So if you just want to add a table to your Elementor site, then you can use this simple
1:14
plugin which will only add the table functionality to your Elementor website
1:19
So let's install this table add-on for Elementor. And next we are going to use a different plugin for adding a table to our Elementor
1:27
site as well. So let's check how we can add table using this plugin
1:32
So I will just go to post here and I will add a new post here and let me just name it
1:37
title like table. Now let me just publish this. Now I will click on edit with Elementor
1:45
Okay now the Elementor editor is added here. Let me just add a table here
1:51
So what I can do is I will click on search wizard here and I will simply search for table
1:57
Now you will see this block table using that plugin. So let's drag it here
2:03
And as you can see that the table is added here. Now let's check how we can add the headings and add the data in this table
2:11
So here you will see two options. One is table header, one is table body
2:16
So by default, it is created two headers. So if you want to add three columns, then you can simply click on add item here and
2:23
it will add the third table heading like this and you can change the table heading by clicking
2:29
on here. So let's say I want to set it like name and let's keep it as capitalized
2:40
Now in the second heading, let's set the text to something like age and let's in the
2:49
third heading, let me just add like phone number like this. And as you can see that we have added three columns
2:57
So if you want to add more columns, then you can click on here and here you will get the
3:01
fourth heading like this and you can change the data as well
3:06
Now here you will see this advanced settings here and here you will see this option call
3:11
span and you can set it like call span like this and you can also set the custom width
3:18
for this. So let's delete it for now. So I will delete it here
3:24
Now let's click on table body. Now here as you can see that there is the table data under the name, age, and phone number
3:31
So let's click on add item here and now it will add a table data for phone number as
3:36
well. Now how we can create a next row in this table
3:40
So for this, I will click on add item here and as you can see that by default it is adding
3:44
to the right section. So for this, you need to enable this new row option
3:49
So it will move to the new row and then you can add two more rows here and then again
3:54
if you click on add item here, it will again add it in the right side
3:59
So you need to click on new row here. So in this way, you can add multiple rows in this table
4:05
Now what if you want to add a more column outside this table, then you need to click
4:15
on table header here. Let's click on table heading here and let's change the table data like email address
4:26
Like this. Now let's click on table body here and let's click on add data here
4:32
And as you can see that it is adding table data here. So what if you want to add this data
4:39
So for this, here there is 1, 2, 3. So I will click on here and I will duplicate it and it will add a table data like this
4:48
and then 1, 2, 3 and here I will duplicate it and I will add the table data like this
4:55
So in this way, you can create a table in Elementor using this table addon plugin
5:01
And here you can see advanced options here as well. Like column span, row span, alignment, text alignment to center or left or right alignment
5:11
So you can play around this. You can change the decoration to underline, overline, or you can change it like line through
5:19
So here you will get a simple table functionality in your Elementor using this plugin
5:25
Now let's check how you can change some settings here. So let's click on style here and you can set the inner table padding
5:33
So let's say I want to deselect it and let's say I want to add a top padding of 10px and
5:40
I want to add a bottom pixel of 10px like this. And you can also set a right like 10px and in the left section, let's add it like 10px
5:52
So you can add a padding like this and you can change the header styling here
5:57
So here the text color is black. So let's change the background color to something like this
6:04
And let's change the text color to something like white like this
6:09
And as you can see that the heading color is now changed and you can also set a body
6:14
style as well. So let's change the background color of the body here like this
6:23
And you can change the text color as well. And you can also enable the stripped background if you want
6:29
So let's change the stripped background color like this. So if I add one more row here, so let's go here and let's add one more row
6:41
So let's click on here and as you can see that there is this stripped line showing here
6:49
So let's add a new row here. And as you can see that it is adding stripped line one after the other
6:57
So in this way, you can modify the table styling as well
7:02
And you can also make it as full width. So just click on full width and it will set and it will cover the entire screen and set
7:09
a full width table for your website. Now let's check how you can use the second plugin to generate table in your Elementor
7:17
or in your WordPress website. So let's go back here and let me just leave it here now
7:26
Now let's go back here. Now let's deactivate this plugin. Now let's click on add new plugin here and simply search for table here
7:40
And here you will see this option WP table builder. So you can use this plugin both with Elementor or both with Gutenberg as well
7:50
So you can use it in both cases. So let's activate this plugin
7:53
Now you will see this option WP table builder in the left side
7:57
So let's click on all table here and here you need to click on add new to create the
8:02
table fast. So you can name the table like suppose I can set it like database table and let's click
8:14
on blank here and let's click on generate. Now as you can see that it has now created a single row single column table
8:21
So you need to click on manage cell here and we need to add a right column like this
8:26
So as you can see that it has created two columns and you can add some bottom rows as well
8:32
And as you can see that the table is created. Now if you want to add more column, then you can simply click on add right column here
8:39
and will edit the right column for you and you can add a bottom row as well
8:45
Now here go to settings and here you will see some settings like you can set adjust
8:51
the cell padding. So by default it is set to 10 pixels so you can increase the cell padding from here and
8:57
you can set the table element to left center or right. You can set the table content max width and you can sort the table vertically or horizontally
9:06
and you will get some pro version in global font style and you can adjust the border table border
9:13
You can change the table border color as well and you can apply to inner border or header
9:18
inner border. So let's close here and as you can see that it has applied to the outer border as well
9:25
and you can close this and it will deselect from the inner border like this
9:34
And here you will set this option to horizontal scrolling. So it will add a horizontal scrolling for this table
9:41
Now you can enable sticky and you can enable pagination and search functionality in pro
9:45
version and you can also disable the theme style for your table
9:50
So most of the theme has the table styling built in. So if you want to disable it, then you can disable it from here and you can write your
9:58
own custom CSS for this table as well and you can set a text to remember the table which
10:04
categories or from which post the table is using. And you can set a tag and remember the post as well
10:14
Now here you can set accessibility settings like you can set the table role to table
10:19
So it will add a table code in the backend instead of deep table
10:24
So let's click on elements here and let's add a fast heading here
10:28
So let's set it like name and again age and let's say mobile number
10:37
Now let's add a name here. Let's add the age here and let's add a more random mobile number like this
10:50
And as you can see that the table is now added here. Now you can also insert images to this table
10:56
So you can simply drag it here and you can add images from your media library as well
11:02
So let me just choose this image. And you can see that the image is now added to our table and you can also add a button
11:11
here like this. Like you can change the button text here like call now
11:21
And you can add a link to this button as well. And you can set a button ID if you want
11:28
And here you can add a link to this button as well. And if you don't want this element, then you can simply delete it as well
11:37
And here you will also get the list functionality here. So let's add the list here and you can add list in this format using this table
11:44
So this table has more functionality than the previous plugin we discussed in this video
11:49
And you can also add a star rating here. So let's say you want to add a star rating here and you can set it like 3 and half star
11:59
and you can add this like ratings or you can add a new column here and you can set
12:09
this as ratings and let's delete it and let's add the rating block in the fourth
12:18
Let's add 5 star. And as you can see that our table is looking quite good
12:24
So you can insert images, star ratings, you can insert short codes or you can even write
12:30
your custom HTML code in this table. So let's click on save here
12:35
Now if you want to use this in your site, then you can simply click on embed here and
12:40
click on copy to clipboard. Now let's go back to the dashboard here
12:46
Now let's go to the post. Let's click on add new. Let's set a table title here
12:53
Let's publish this. Click on edit with Elementor and let's click on plus and let's add a short code block here
13:03
as well. So I will click on plus, search for short code and I will drag the short code block
13:10
like this and I will paste that short code here. And as you can see that the table is added, but sometimes some of the widgets are not
13:19
showing properly. So let me just update it and let me see the preview changes
13:26
As you can see that it is looking quite good in the front end
13:30
So in this way you can add a table to your WordPress website using Elementor
13:35
And if you are not using Elementor, then you can directly add this short code as well
13:40
So let me just go back here. Let's click on new post here and let's set it like table and let's edit using Gutenberg
13:51
So I will simply search for short code and I will paste the short code like this
13:58
Now let's click on publish and let's view this post. And as you can see that the same table is added to our Gutenberg page editor as well
14:07
So in this way you can add a table to your WordPress website using Elementor
14:12
So either you can use the table add-ons for Elementor or you can use the WP table plugin
14:17
for that. And if you found this video helpful, then make sure to hit the like button and to learn
14:22
more about WordPress and blogging, make sure to hit the subscribe button and I will see
14:28
you in the next one. Bye bye