This is an HTML/CSS tutorial that will teach you how to build a nice-looking comparison tables and boxes for an affiliate website (or really any other type of website) without using any plugin/page builders so that you can have a nice-looking, mobile-friendly AND fast website.

Image	Product	Features	Price
	Corsair M65 Pro RGB	Weight: 4.7 / 4 oz Sensor: Pixart PMW336x Buttons: 8	Check Price

If you don’t want to read through the whole tutorial and just want the code – feel free to grab it here. However reading through the tutorial will help you understand how it works. This way you can personalize it for the style and needs of your website(s).

Why code when you can use a page builder/plugin?

It’s not a secret to anyone that your website needs to be mobile-friendly. First of all, it directly impacts your rankings since Google has officially switched to mobile-first indexing (proof). Secondly, according to Statista.com, 52% of people have used mobile devices for browsing the web in 2018.

Making your website mobile-friendly is not hard. These days all popular WordPress themes use mobile-responsive layout. Building mobile-responsive pages is easy with page builders like Elementor, Divi or Thrive Architect. For responsive tables you can use plugins like Tablepress (responsive version is actually paid) or Ninjatables. So even if you are not familiar with HTML/CSS you can still easily build a professional-looking website.

However, page-builders and plugins (as some themes) have one big disadvantage – they slow down your website.

Speed is as important as responsive design – a slow website will both negatively impact your SEO rankings (proof) and frustrate your visitors.

I’m not going to go deep into why and how page builders and plugins harm your website’s speed. At the same time I’m not saying you should stop using them. At the end of the day it’s a trade-off – there are some plugins that your website absolutely needs (Yoast SEO, W3 Total Cache, Smush, Shortcodes). In other cases, using a page builder can be a much more viable option for you.

From studying SEO for the last 10 month I learned that it’s all about small details. With that being said, I don’t like the idea of sacrificing the speed and performance to make a site mobile-friendly.

Surprisingly, I didn’t find a quick and easy fix to make tables and comparison boxes collapse and look nice on mobile device (usually in internet-marketing niche every question is answered by every blog under the sun).

So I learned it myself and now I decided to write this article to teach others how to build nice-looking responsive table and a product box without using any builders or plugins.

Building a responsive table with HTMl/CSS

Step 1. Making things collapse with Flexbox

To make a table look good on a mobile screen, we need to make it collapse. Use the following HTML

<div class="example1">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
<div class="d">4</div>
</div>

And the CSS for it

.example1 {
	display: flex;
	border: 1px solid grey;
	min-height: 200px;
	margin-bottom: 20px;
	padding: 10px;
}
.a, .b, .c, .d {
	background-color: #E6DDD6;
	margin: 5px;
	width: 25%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font-weight: bold;
	font-size: 30px;
}

You should see 4 boxes placed inside a parent box. This is how a regular row of a table looks like. The cells of the row are displayed horizontally.

However, if you shrink your browser’s window you will see that it doesn’t look good anymore. The cells are just getting narrower.

This is absolutely unacceptable for mobile view since the content of the cells will be impossible to see, let alone tap the buttons with the precious affiliate links or whatever CTA you are using.

Even though it’s pretty obvious and old-school to have such “shrinking” tables, I still see a lot of websites (some with over 10k traffic monthly) that just slap an ugly-looking Tablepress table that impossible to see on mobile. Here is an example of the main money page of an affiliate website that’s getting 11.6k monthly visitors and doesn’t even have a responsive table.

Let’s look at what a table should REALLY look like on mobile.

Shrink your browser window and you will see that this time the cells collapse vertically. This video was made possible by Skillshare was made possible by Flexbox. Once you learn this simple trick – you will see that making a table collapse is really easy.

In this case, our parent element is the <div class=”example”>. So to change the direction of the child elements (boxes 1, 2, 3, 4) on mobile view, we need to add this code to your css file:

@media only screen and (max-width: 1015px) {
	.example {
		flex-direction: column;
	}
	.a, .b, .c, .d {
		width: 100%!important;
}
}

This code does 3 things:

1. @media only screen (max-width: 1015px) tells the browser that the CSS rules inside it should be ONLY APPLIED IF browser’s window is less than 1015px wide
2. flex-direction: column changes direction of child elements (those that are inside the parent element) to vertical, which is exactly what we want
3. we also set the width of the boxes 1, 2, 3, 4 to 100% since their original width is 25%

Basically you can already see that to make a table responsive all you have to do is:

1. set a CSS class to it’s rows
2. give that class display: flex property
3. combine @media only screen and flex-direction to make the cells display vertically on narrow screens

Step 2. Applying your Flexbox knowledge to make a table collapse (and look good)

When using CSS to build something, it’s best to start off with the layout (or a frame) and then align and adjust the content inside. Let’s start building out responsive table.

Use the following HTML

<table>
<tr class="row">
<th id="th1">Image</th>
<th id="th2">Product</th>
<th id="th3">Features</th>
<th id="th4">Price</th>
</tr>
<tr class="row">
<td id="td1">1</td>
<td id="td2">2</td>
<td id="td3">3</td>
<td id="td4">4</td>
</tr>
</table>

This is a table that consists of two rows and four columns. The first row is the header row and the second one is a regular row. We don’t need more than that since we need to build just 1 header and 1 regular row that you can copy paste as many times as you need.

As you can see, I marked up both rows with .row class and each cell has a unique id. I use unique id since each cell will contain different elements and later it’s going to be much easier to manipulate and align everything.

So how do we turn this

into this?

Okay, so you have the html code for the table. Now add the following CSS:

.row {
	display: flex;
}
.row td, th {
	width: 25%;
}
.row th {
	text-align: center;
	color: white;
	background-color: black;
	font-weight: bold;
}

First of all, we make make both header and regular row to “display:flex”.

Next, we set the width of all of the cells in our table to 25% to even them out.

Then we apply basic styling to our header cells.

At this point your table should look like this:

The next step you need to do is to make the table rows collapse on narrow screens (just like you’ve done in the previous section). To do so add the following CSS:

@media only screen and (max-width: 1015px) {
	.row {
		flex-direction: column;
	}
	td, th{
		width: 100%!important;
}
	#th1, #th3, #th4 {
		display: none;
	}
}

From the previous section you already know the first 3 steps of what this code does:

1. @media only screen tells the browser to apply the CSS rules ONLY IF the browser screen is less than a certain width (in this case 1015px).
2. “flex-direction: column” – we set the row direction to vertical instead of horizontal
3. we set the width of the cells to 100% because they originally we set it to 25%

In the last step I made only 1 header cell display on mobile view. So instead of having this:

You will only have “Product” cell display on mobile just like this:

Looks much better, doesn’t it?

At this point the frame of our table is ready. It does two important things:

• It collapses on narrow screens
• It only displays one header cell instead of all four

Now it’s time to replace 1, 2, 3 and 4  with images, buttons and text.

Cell 1. Download this image.

Then upload it to your WordPress website and insert it into cell 1 (and remove the number 1 from it).

Cell 2. Paste this

Corsair M65 Pro RGB

Cell 3. Paste this

• Weight: 4.7 / 4 oz
• Sensor: Pixart PMW336x
• Buttons: 8

Cell 4. Paste this HTML code in the text editor (NOT visual builder)

<button><a class="link" href="https://google.com" target="_blank" rel="noopener noreferrer">Check Price</a></button>

At this point your table should look like this.

Let’s make it look better. Add the following CSS code:

#td1 {
	padding: 30px;
	width: 25%;
}/*makes the image smaller*/
#td2 {
	font-weight: 900;
	font-size: 17px;
	text-decoration: underline;
	color: black;
}
#td2 p{
	margin-bottom: 0;
}/*styles up the product name and removes margin between it and the star review*/
#td3 {
	display: flex;
	align-items: center;
	font-size: 15px;
}
#td3 ul{
	list-style-image: url('https://lebich.pro/wp-content/uploads/2019/03/check.png');
}/*reduces font size and adds a check, you need to upload this icon to your wordpress site to make it work*/
.link {
	background-color: #b01a1f;
	border: 2px solid transparent;
	padding: 10px 15px;
	display: inline-block!important;
	color: white;
}
.link:hover {
	border: 2px solid #b01a1f;
	color: #b01a1f;
	background-color: white;
}
button {
	padding: 0;
	border: none;
}
#td4 {
	display: flex;
	align-items: center;
}/*sets style to the button, link and sets it in the middle instead of top side*/

Now the table should look like this on desptop:

and like this on narrow screen:

I would like to do a couple more things here.

First of all, I would like to align the image, product name, the list and button to the center.

Second thing I would like is to place the product name above the image, which is again easy to do with just 1 line of CSS code.

Add this code INSIDE the @media only screen because we are styling the mobile look now.

Read the comments in the code to see what exactly does what.

	#td1 {
		display: flex;
		justify-content: center;
	}/*aligns the image to center*/
  #td3, #td4 {
	justify-content: center;	
	}/*just center alignment*/
	#td2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		order: -1;
	}/*aligns to the center and sets the order -1 which puts the name before image, since by default the order is 0*/

Now you should have a table that looks like this on mobile:

To sum up

I’m not a professional designer and I understand that my methods are far from being perfect. But as long as it works and does what I want it to do – I’m happy. I hope this tutorial was useful to you and you learned a little bit of CSS with me today.

If you have any questions about the tutorial – feel free to let me know in the comments.