Up next in 10
How to Add Responsive HTML Table In Blogger & WordPress ( 2 Ways )
485 views
Jan 26, 2024
In this instructive video, viewers will discover two ways to add a responsive HTML table in both Blogger and WordPress. The tutorial provides step-by-step guidance on incorporating HTML tables that dynamically adjust to different screen sizes, ensuring a responsive and user-friendly layout. Whether you're a blogger, content creator, or managing a WordPress website, this video offers practical insights into enhancing the presentation of tabular data on your platform. With clear instructions, users can choose the method that best suits their needs, making it accessible for various skill levels.
View Video Transcript
0:00
Hi everyone, welcome to Kitu Blogging and in this video I will show you how can add a responsive
0:04
HTML table to your blogger and WordPress website. So I have prepared two HTML table
0:11
So this is the responsive HTML table style one and as you can see I have added name
0:17
email, location and age. And let me just open it in a mobile view. And as you can see
0:23
this is how the HTML table looks like in mobile. So it will break down each section in
0:30
a separate table like this and let me just show you the second HTML table
0:37
So this is the same HTML table but with a different style in mobile
0:42
So let me just click on inspect element here and as you can see the HTML table will
0:47
looks like in mobile and user can easily scroll down the table like this
0:53
So this is how the responsive HTML table works in Blogger and WordPress
0:58
So you can use it in Blogger and WordPress. and WordPress website easily
1:03
So let me just show you first how to edit in Blogger. So for this you have to go to Blogger dashboard and here you have to click on new post
1:12
Now you have to set a title here and here you have to switch to the HTML view first
1:17
And let me just copy the HTML table 1 So let me just copy this code and I will paste it here like this and I will hit publish so that it will load the table in your blogger website
1:32
And if you want to add the table in WordPress then you have to go to Post and click on Add New
1:38
Now you have to click on the plus icon and select the custom HTML block
1:43
Now paste that HTML code here and let me just preview it in a new tab
1:50
And as you can see, the table is added in our WordPress website
1:55
And let me just click on inspect element here. And as you can see, the table is working perfectly fine in WordPress also
2:03
So in this way you can use this same HTML table in both Blogger and WordPress website
2:08
Now let's check how you can edit this HTML table. So for this, let me just open the Blogger Post Editor
2:16
So as you can see, there is four levels like name, email address
2:20
location and H. And the value is same in each of the levels and there is data like name, email address
2:27
location and H. Suppose I want to change this level and as you can see there is a spelling
2:33
mistake in name. So if I want to change the first level then what I can do is just let me just
2:41
zoom in the page and I will click on here and I will select control Now I will select here Now I will scroll down and I will select here then I will scroll down and I will select here So you have to select the control button and select all the cursor
3:01
So let me just select it again. Okay, I have select all the cursor here
3:14
So if I want to change the level then I can delete everything at once
3:19
Suppose I will type like fast name. So as you can see the level is changed in all fields
3:26
In this way you can change the levels simultaneously by selecting the levels
3:31
So all you have to do is just select control and select the cursor icon where you want to change
3:38
So if I want to change the email address, then what I can do is just select it
3:43
Then I will click on control and then select it, then select the third one, then select the
3:49
fourth one, then select the fifth and sixth. Now I can change like address
4:00
And as you can see, the email is changed to email address. in all the positions
4:05
So in this way you can bulk edit your levels. Now let me just publish this page Now let me just view this HTML table And as you can see we have changed the levels to fast name email address and if I open this
4:25
table in a mobile view and as you can see all the levels is now changed
4:31
So you just need to select control and select the cursor where you want to change the text
4:37
I hope you got the idea how to add a responsive HTML table to your blogger and WordPress
4:42
website and if you want to further customize it like change the heading color then you can
4:48
simply click on inspect element and here you will see this option like t h means table heading
4:58
so you can change the background color of the table heading like this and you can also change
5:03
the text color according to your choice so let me just select something like yellow
5:12
And you can find the CSS code by just go to the CSS code given here and as you can see
5:20
this is the background color and this is the text color. And you can also change the font weight
5:27
So in this way you can further customize the HTML table. So if you launch something new in this video, then make sure to hit the like button and
5:36
do subscribe to blogging for more upcoming videos like this and I will see you in the next video
5:42
Thank you