These New Tables Are The Last Step in Achieving A Fully Mobile Responsive Affiliate Site

Stephanie K   106

Since it's the silly season, we decided to give all the affiliate marketers out there an early Christmas present...

Responsive comparison and review tables that actually look good on mobile.

And not only do they look good, they're conversion focused as well. These tables are specifically formatted to keep your buy buttons in view on mobile.

To celebrate, we've released a whole page full of pre-formatted mobile responsive WordPress table templates. You can preview them here. The table template page is under the 'Element Templates' set in the Landing Page cloud.


By saving these templates to your content templates library, you can add pre-built review tables to any post or page with one click. No CSS or HTML coding knowledge is needed, you can simply go ahead an insert a table into your post. All you have to do is fill in the blanks.

Why Responsive Tables are important for SEO?

I'm going to be honest, my SEO knowledge doesn't go too far beyond 'you should probably install Yoast SEO' - so I thought I'd go straight to the source and ask a specialist; testing-based SEO expert Matt Diggity.


Matt Diggity

Diggity Marketing

"Tables, and other forms of formatted/structured content, have become increasingly relevant for SEO. On the surface level, Google seems to be appreciating content that has been structurally marked-up, and tables are a great example of this.

But the main value I’ve seen from implementing tables on my sites has been the ability to steal featured snippets… the coveted position #0 ranking knowledge box at the top of the SERP result.

Based on personal experience, tables that are formatted with the criteria running horizontally, and the evaluated items running vertically have a much better chance to steal the snippet.

An example of this for a sneaker review table would have columns labeled “Name”, “Comfort”, “Durability”, “Price”, “Where to buy” while the rows would be labeled “Nike”, “Puma”, “Adidas”, etc.

The problem with this format is that with mobile devices the “Buy Now” button (call-to-action) usually bleeds off the viewing area. This is why you need a responsive table."

Mobile Responsive Tables in Action

Thrive Architect's mobile responsive tables work by moving the header row into a vertical position, and repeating the header titles for each entry.

Table on desktop

Desktop View

Mobile responsive table WordPress

Mobile View

Let's take Matt Diggity's example of the sneaker review post. Below is a Thrive Architect Table Element with mobile responsiveness applied. Take a look on your mobile...





Where to Buy

Excel 2000

4 out of 4

5 out of 4


Converse X

1.5 out of 4

5 out of 4



2.5 out of 4

2.5 out of 4


This restructuring works whether you have the criteria running across the top, as Matt suggests, or if you have the products running across the top and the criteria down the first column. Let's take a look at how that format ends up on mobile.

Comparison Table desktop

Desktop View

Responsive Comparison Table mobile

Mobile View

How To Make Your Tables Mobile Responsive

Once your table is created and formatted for desktop (within the Thrive Architect), go to mobile view in your responsive view options.

Setting up responsive tables in WordPress using Thrive Architect

Go to the mobile preview, then click create mobile responsive table

Resize your header text to suit mobile, then click the 'Create mobile-responsive table' checkbox in the main options menu.

Due to the way the re-formatting function works, the elements in the header will no longer be editable.

If you need to make further changes to the header elements, just un-check the box to revert the table to normal, make changes, then click the box again.

Note: The mobile responsive checkbox will only be visible in the table element menu once you've selected mobile view.

What's Your Take?

Is this been something you're been waiting for? Are you excited about these new responsive tables for WordPress sites?

Let us know in the comments below!

by Stephanie K  December 13, 2018


Enjoyed this article ?

You might also like:

Leave a Comment

    • Hi Jan. It’s available now within Thrive Architect (using the table element). Just make sure you’ve updated to the latest version of the plugin.

      • Hi Doug,

        Try following these steps:
        (first off, if you’re using any caching, make sure to clear it)
        1. Open a page or post with the ‘Edit in Thrive Architect’ button
        2. Search for the ‘Table Element’
        3. Drag that onto your page or post to add table to your page
        4. Change to ‘Mobile’ in the ‘Responsive View’ menu (shown here) and select the table element on the page. You should see the ‘make table mobile-responsive’ checkbox within that menu (there’s a screenshot of this in the article above)

        If the option still isn’t showing for you I would suggest contacting our support forum.

      • Hi Stephanie, I thought so. I have also TA in the newest version 2.0.15 but this menu is unfortunately not available by me 🙁

      • Hi Jan,

        Make sure you’re in ‘mobile’ under the responsive view settings, then select the table element. From the table element sidebar menu you should have the option to make the table mobile responsive. If it’s still not coming up for you, contact our Support Forum and they should be able to help.

  • It would be great to be able to insert some spacing between sections (between the old rows, now columns). Not sure if I’m explaining it properly, but between the old row 1 and row 2 in the mobile view, it would be nice to be able to break it up a bit.

    • Hi Randy,

      I understand what you mean. A suggestion for helping with this is making the first column a different color so that when it changes in mobile there’s a color change to let visitors know it’s a new entry. But I’ll pass this on to the developers nonetheless and see if there’s anything we can do about it.

  • Pure genius – and what a great heads up on snippets too from Matt. I don’t know any other CMS as good as ThriveThemes now Architect is firmly established.

    • Hi Galib,

      First off make sure you’ve updated to the latest version of Thrive Architect, and if you’re using any caching, make sure to clear it.

      Then try following these steps:
      1. Open a page or post with the ‘Edit in Thrive Architect’ button
      2. Search for the ‘Table Element’
      3. Drag that onto your page or post to add table to your page
      4. Change to ‘Mobile’ in the ‘Responsive View’ menu (shown here) and select the table element on the page. You should see the ‘make table mobile-responsive’ checkbox within that menu (there’s a screenshot of this in the article above)

      If the option still isn’t showing for you I would suggest contacting our support forum.

  • ALL IN ! So timely ..Building two sites and needed a mobile way to display offerings that didn’t suck…

    Now can put my good hands around the neck of more competitors..and show them a thing or two..

  • Wow, this is pretty awesome stuff guys. Great work! That was a huge drawback of tables that they just don’t show up nicely on mobile view.

    This is a great addition to be able to show tables nicely on both desktop and mobile view. Happy Christmas :)!

    • Hi Grant,

      The templates are on the ‘Table Templates’ page within the gallery, which you’re right, is pretty hard to find among them all. The exact preview page is here.

    • Hi Mario,

      Unfortunately not, it’s a Thrive Architect element so it can only be created within the Thrive Architect editing window. But you can create and edit posts with Thrive Architect, so you can create whole post with Thrive Architect including the tables.

  • Very cool Stephanie! So now that Woocommerce is working on other themes this should be great for your store – something I still have to figure out – when can we expect a post on setting up a photo store with a variety of categories of photo sections with a variety of sizes and types – in other words the photos are imported as a variable product csv table – will be trying to get this done over the next few weeks – will post if I get it working. Looking forward to the new theme – drool, drool!

    • Hi Craig,

      I’m going to be honest, that’s not something we’re planning to create a post about at this stage. It’s a little bit too niche. Although I do understand WooCommerce is being used by a lot of our customers – so I’m keeping a keen eye on how we can integrate that into more of our content. I hope you manage to figure it out! (and I’m also drooling over the new theme 🙂

  • A recent article buy SEMRush showed the data they gathered highlighted the importance of using tables to be featured in rich snippets, and by coincidence I saw this once myself for a competitor’s site.

    However, I wasn’t aware of the item placement (in rows, rather than columns) as being important. This is very helpful.

    I’m going to change my tables (current done in the Amazon AAWP plugin) or possibly try with Architect if they can be done with shortcodes perhaps.


  • This is really neat! I think it would look better if there were some separation between each of the rows when they stack up on mobile so it’s not as difficult to see where one stops and the next one starts. Possibly just a thicker divider line or something.

    • Hi Christina,

      Thanks for the suggestion. I’ll send it through to the developers. An immediately implementable solution for this is to have a different color for the first or last entry in the table so the visitor knows when that color repeats it’s a new entry.

  • This is fantastic! Thank you! I was just able to update a pricing table on my website. It looked good on desktop, decent on tablets, but crashed on mobile. Now it looks great on all 3 devices 🙂

    Good job!

    • Mary!! I had exactly the same idea. That’s why everyone ended up with a template too, I wanted to play with the tables 🙂

  • I had a client complaining about the non-responsive table I built with the old content builder, so this is fantastic news!! Love it. Big thanks to the team.

    • Hi Jaco,

      The columns are already mobile responsive. You can chose to either stack the columns on mobile and tablet, or reduce the size of the content so the content will still fit next to each other on mobile. More details on the responsiveness of columns can be found at around 12.50 of this video.

      • Thank you for that Stephanie! The problem is I had to begin with a blank page in order to get my header exactly as I want it to be. A logo on each side and the menu in the middle. The problem is it looks fine in Desktop view but are totally chaos in mobile and tablet view. As soon as I hide certain elements for certain views, I can’t add new elements in the mobile and tablet view. I know it works from Desktop view downwards but truly a headache! Thank you for your assistance and comments on all of our opinions. Appreciate it! 😉