You won’t find any option to create a Responsive Table In Blogger but do you know it can be easily done with the help of HTML and CSS. In this article, I will let you know everything in detail about how you can add a table in Blogger (Blogspot).

Why Add Table In Blogger Post?

Well, the answer is short and simple, the table is useful to display the important information about the product or services in a quick window and if you are using a table in your blog post there is a chance that you can become eligible to get a position in the featured snippet.

Suppose if your post is about a Mobile phone then its important features can be mentioned in the table, or if it is a movie then its characters, details, and other info can be added with the help of the table. You will discover endless benefits of using a table but first of let us learn how to create one.

Also Check: How To Add Custom CSS To Blogger?

How To Create Responsive Table In Blogger?

Step 1: Log in to Blogger Dashboard > Click on Theme > Customize
Step 2: Navigate to Advanced & Choose Add CSS
Step 3: Paste the below CSS code > Save

Note: Step 1-3 is one time work, you don’t need to repeat these steps again and again.

table {
	border-collapse: collapse;
	width: 100%;
	background-color: #ffffff;
	color: #000;
	text-align: left;
}

table tr>th {
	background: #04373D;
	color: #ffffff;
}

th,
td {
	padding: 8px;
	border: 0.1px solid #808080;
}

tr:hover {
	background-color: #ddd;
}

tr:nth-child(even) {
	background-color: #ddd;
}


/* To Make It Responsive */

@media screen and (max-width: 600px) {
	table {
		width: 100%;
	}
	thead {
		display: none;
	}
	tr:nth-of-type(2n) {
		background-color: inherit;
	}
	tr td:first-child {
		background: #f0f0f0;
		font-weight: bold;
		font-size: 15px;
		text-align: center;
	}
	tbody td {
		display: block;
		text-align: center;
	}
	tbody td:before {
		content: attr(data-th);
		display: block;
		text-align: center;
	}
}

Step 4: Now create a table in any HTML editor
Step 5: Paste the code in your Blogger Post (In HTML Section)
Step 6: Publish/Update the post

Here is the result of the responsive table in blogger, If you have some basic knowledge of CSS then you can make this table even more attractive and beautiful.

See the Pen How To Create Responsive Table In Blogger (Blogspot)? by Hex ToiD (@vikask2y2) on CodePen.

Wrap Up

I hope this article helped you to add a responsive HTML table in blogger/Blogspot. If this article is useful to you in any way then make sure to share it with your friends on social media and let them about this secret trick to create a table in blogger posts. Don’t forget to share it with your friends on social media who want to add table with HTML in blogger.

Happy Blogging!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.