How To Create Responsive Table In Blogger?

Disclosure: Some of the links to products in this article are affiliate links. It simply means, at no additional cost to you, we’ll earn a commission if you click through and buy any product.

This is the step-by-step tutorial to create a Responsive Table In Blogger 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).

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 these steps to create a table in blogger posts.

Happy Blogging!