add-a-responsive-table-for-blogger

How to add a responsive table for blogger

How to add a responsive table for blogger

Hey, Guys, I hope you are well, In these crazy days. Today we will discuss the responsive table for bloggers. In blogger, no plugins are available for adding the table in the blogger. There are so many bloggers struggling on google. Who posts daily millions of articles.

Whenever we write the content and while need a table for better explanations for describing the content and good experience of the user, but unfortunately in blogger, we cant responsive table in blogger. Because of in blogger, no plugins are available for the table.

So if you are also a blogger and don’t know how to responsive table for blogger, and you want to responsive table, don’t worry about the article today only for you.

If you won’t see the result so click on the demo button and see the results

You want to add the responsive table, follow my step. I will guide you on adding the table in blogger within five minutes. There are 2 codes you have to paste in blogger, but one principle you have to paste whenever you have to add the table, so; if you want to add a responsive table without wasting time, let’s get started.

What is the responsive table?

The responsive table is a way of representing the content in standard methods in the form of columns. In which row & columns are added in the form of cell or box in the shape of rectangular Way. We can make the table according to requirements but after increasing the quantity of column and row. The table is Way of repressing the content in the form of a list that helps the user understand the content shortly and more efficiently.

Why table use in blogger?

Responsive tables help users understand the complicated content in a more straightforward Way. Whenever we have to represent two lists simultaneously, we can use them and represent them in signal format. For better understanding, you can see the mentioned below sheet.Also i want to tell you table of content is very important for long post so if don’t know how to add table of content so also read below mentioned below article.

How to add a responsive table for blogger

 You have to use two codes to add the table in blogger. One principle is adding the Theme section up to the </head>, and then the second HTML code will be added in the article you want to add the table. So means that 2nd code is used whenever needed in the table. We have to add the 2 principles, which means we can add the table within your minute. So follow my few steps.

Step.1:- First of all login your blogger account if not logged in, and if you are already logged in so go to 2 step

 

add-a-responsive-table-for-blogger

Step.2:- After logging in, go to the theme section and click. The theme section is available on the left side or between layout and settings.  

add-a-responsive-table-for-blogger

Step.3:- Now, to get the edit HTML section its available in Customize 

add-a-responsive-table-for-blogger

Step.4:- Now press the ctrl+F and write the </head> and press the enter then you get a </head> and press the enter as you can see in the screenshot

add-a-responsive-table-for-blogger

Step.5:- Now click on the below-mentioned Table Code button, then you get the code and paste the up to </head> and click on the Save button. Also, you copy the below-mentioned code. Now go to go to step np 6.

<style type="text/css"> table {
font-size: 1.5em;
	margin: .25em 0 .75em;
}

table tr {
	background: #eee;
	border: 1px solid #ccc;
	padding: .35em;
}

table th,table td {
	padding: .625em;
	text-align: center;
	border: 0;
}

table th {
	font-size: .85em;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: #ddd;
}

table td img {
	text-align: center;
}

@media screen and (max-width: 600px) {
	.post table {
		border: 0;
	}

	.post table caption {
		font-size: 1.3em;
	}

	.post table thead {
		display: none;
	}

	.post table tr {
		border-bottom: 3px solid #ccc;
		display: block;
		margin-bottom: .725em;
	}

	.post table td {
		border-bottom: 1px solid #ccc;
		display: block;
		font-size: .8em;
		text-align: right;
	}

	.post table td:before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
		text-transform: uppercase;
	}

	.post table td:last-child {
		border-bottom: 0;
	}
} </style>

Step.6:- Now go to that article where you want to add the responsive table and edit the article.

Step.7:- in which location you want to add the table, write any number and like as screenshot and copy the no as according to screenshot.

add-a-responsive-table-for-blogger

Step:-8 After this, change the view of post compose into HTML and press the ctrl+F and paste copied words. Then you will get copied words in HTML code and now select the words from HTML.

add-a-responsive-table-for-blogger

Step:-9 Now click on the Table code and download it and copy the code, or also you can copy the below-mentioned code and now replace it with selected code and click on the save.

<table>
	<caption>Caption Table</caption>
	<thead>
		<tr>
			<th scope="col">Name</th>
			<th scope="col">Address</th>
			<th scope="col">Email</th>
			<th scope="col">Phone Number</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td data-label="Name" scope="row">Technical Arp</td>
			<td data-label="Address">Manchester, England</td>
			<td data-label="Email">[email protected]</td>
			<td data-label="Phone Number">021-01010xxx</td>
		</tr>
		<tr>
			<td data-label="Name" scope="row">john Doe</td>
			<td data-label="Address">New York, US</td>
			<td data-label="Email">[email protected]</td>
			<td data-label="Phone Number">021-999999xxxx</td>
		</tr>
		<tr>
			<td data-label="Name" scope="row">Justin Bieber</td>
			<td data-label="Address">New York, US</td>
			<td data-label="Email">[email protected]</td>
			<td data-label="Phone Number">021-2929292929101019</td>
		</tr>
		<tr>
			<td data-label="Name" scope="row">Selena Gomez</td>
			<td data-label="Address">Texas, US</td>
			<td data-label="Email">[email protected]</td>
			<td data-label="Phone Number">021-819199191991919</td>
		</tr>
	</tbody>
</table>

Step:-10 Now go back to the post and click on the preview section, and you will get the table on the article where you add the words.

add-a-responsive-table-for-blogger

Step:-11 Now, according to your requirement, edit the table slots, and also you can search in the search bar. 

add-a-responsive-table-for-blogger

Note: The search bar only shows the table result, not the whole post.

Conlusion:-

In the case of bloggers, no plugins are available to add a responsive table for bloggers. After some research,, I have got a method to add the table in blogger. It is simply a way to add the table. After adding CSS and HTML code, you can add the table in blogger as you saw in the article. We had successfully added the table blogger. That table is fully responsive and SEO-friendly. You have to follow my few steps, and you can easily add the responsive table in the blogger. If you want to see the demo post, you can check by clicking on the DEMO button below.

So I hope this article is very informational for you. If you like this article, please share it with your friends & have any suggestions put in a comment in the below comment section.


Also Read:- How to Add Reaction Bar Buttons in Blogger and WordPress

How to Add Contact Form in blogger

How to Add Terms and Conditions on Blogger

Free Privacy Policy For Website

How to Add AdSense Account in Blogger|WordPress