Make More than $100 per Day
The Course includes the Launch Kit
Get it Now!

Create Responsive table for Blogger Posts

Step by step Create Responsive table for Blogger posts

Create Responsive table  for Blogger Posts


Create Responsive Table  for Blogger posts

In this tutorial, I will teach you how you can create an affiliate and products table, using HTML and CSS, you can add it to your blogger blog, and also WordPress website no problem, free and you can easily add this product comparison table to your website.

But, before that let’s understand, why you need this type of table on your website.

Suppose, you are running an amazon affiliate blog, and you want to display the products and buying links in an organized way.

this is the most beautiful, and the right table you need to use

let's get started right now without wasting your time:



1 - new post on your blogger

2- open HTML section

3 - put the inside HTML box the data table first thing::


<table class="Affiliate-product-table">
        <thead>
            <tr>
                <th>Image</th>
                <th>Product</th>
                <th>Feature</th>
                <th>Official Link</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="Affiliate-image">
                    <div class="p_tag">TOP Pick </div>  
                    <a href="#" rel="nofollow" target="_blank">
                        <img class="p-img" src="https://m.media-amazon.com/images/I/41jqMX1pBYL._AC_SL1080_.jpg" /></a>
                    </td>
                    <td class="Affiliate-product">
                        <a href="#" rel="nofollow" target="_blank">
                            <div class="p_title">
                            Ledger Nano X
                          </div></a>
                    </td>
                    <td class="Affiliate-feature">
                        Secure, buy, exchange and grow your crypto assets with our new Bluetooth-enabled hardware wallet. With all your crypto in one place, you’re in total control of your assets.
BTC, ETH, XRP, BCH, DOT, LTC, TRX, EOS, XLM, ADA, etc.	

                      </td>
                    <td class="Affiliate-btn">
                        <a href="https://amzn.to/3K0bbDZ" rel="dofollow" target="_blank">Learn More
                        </a>
                    </td>
                </tr>
          
                <tr>
                    <td class="Affiliate-image">
                        <div class="p_tag"> Trending </div>
                        <a href="#" rel="nofollow" target="_blank">
                            <img class="p-img" src="https://m.media-amazon.com/images/I/71vruAF83vL._AC_SL1500_.jpg" /></a>
                        </td>
                        <td class="Affiliate-product">
                            <a href="https://amzn.to/3fb6zN8" rel="dofollow" target="_blank">
                                <div class="p_title"> Ledger Nano S 
                              </div> </a>
                        </td>
                        <td class="Affiliate-feature">
                        Secure, buy and grow your crypto assets with the world's most popular hardware wallet. 
BTC, ETH, XRP, BCH, DOT, LTC, TRX, EOS, XLM, ADA, etc.	

                      </td>
                        <td class="Affiliate-btn">
                            <a href="https://amzn.to/3GcmKWo" rel="dofollow" target="_blank">Learn More </a>
                        </td>
                    </tr>
           <tr>
                <td class="Affiliate-image">
                    <div class="p_tag">Trending </div>  
                    <a href="#" rel="nofollow" target="_blank">
                        <img class="p-img" src="https://m.media-amazon.com/images/I/619NanMrh+S._AC_SL1300_.jpg" /></a>
                    </td>
                    <td class="Affiliate-product">
                        <a href="https://amzn.to/3HTJLh9" rel="dofollow" target="_blank">
                            <div class="p_title">
                            CoolWallet Pro
                          </div></a>
                    </td>
                    <td class="Affiliate-feature">
                        CoolWallet Pro supports Tron (TRX), Cosmos (ATOM), and Polkadot (DOT), BEP20 token- BNB, BEP20 official and customized tokens, TRC20 Tokens – USDT / USDJ / JUST / WBTT / WIN &amp; all other TRC20 tokens, in addition to the originally supported Bitcoin, Ether, Litecoin, Ripple, Stellar, BNB, USDT, and all ERC20 tokens. ETH 2.0, Tezos, Cardano, BEP20 tokens and other new coins are planned on the roadmap!



                      </td>
                    <td class="Affiliate-btn">
                        <a href="https://amzn.to/34DGkgr" rel="dofollow" target="_blank">Learn More
                        </a>
                    </td>
                </tr>
          
          
                </tbody>		
            </table>


4_ change your date example: product name, products images, links


5 _ below the first code put the following CSS::



<style>
    /* Affiliate Product Box */
    .Affiliate-product-table {
      margin: 30px 0;
    }
    .Affiliate-product-table thead {
      background: #424242;
      color: #fff;
    }
    .Affiliate-product-table,
    .Affiliate-product-table td,
    .Affiliate-product-table th {
      border: none;
      box-sizing: border-box;
    }
    .Affiliate-product-table thead th {
      font-weight: 300;
      font-size: 17px;
      padding: 10px;
      margin: 0;
    }
    .Affiliate-product-table tr {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center;
      transition: 0.3s;
    }
    .Affiliate-product-table tbody tr:hover {
      transform: scale(1.02);
      transition: 0.3s;
      box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
    }
    .Affiliate-product-table tbody tr {
      border: 2px solid #e1e1e1;
      margin-bottom: 5px;
    }
    .Affiliate-product-table tr td:first-child,
    .Affiliate-product-table tr th:first-child {
      width: 25%;
    }
    .Affiliate-product-table tr td:nth-child(2),
    .Affiliate-product-table tr th:nth-child(2) {
      width: 25%;
    }
    .Affiliate-product-table tr td:nth-child(3),
    .Affiliate-product-table tr th:nth-child(3) {
      width: 30%;
    }
    .Affiliate-product-table tr td:last-child,
    .Affiliate-product-table tr th:last-child {
      width: 20%;
    }
    .Affiliate-product-table .Affiliate-image {
      position: relative;
    }
    .Affiliate-product-table .p_tag {
      position: absolute;
      left: -10px;
      top: 0;
      background: #5898ff;
      padding: 5px 5px;
      color: #fff;
      font-size: 12px;
      text-transform: uppercase;
    }
    .Affiliate-product-table .p_tag::after {
      content: ' ';
      display: block;
      position: absolute;
      left: -10px;
      bottom: -7px;
      border-color: rgba(0, 0, 0, 0) #133091 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
      border-style: inset solid inset inset;
      border-width: 0 10px 7px;
    }
    
    .Affiliate-product-table .p-img {
      width: 90%;
      max-height: 140px;
      margin: 0 auto;
      display: block;
      height: auto;
      object-fit: contain;
    }
    .Affiliate-product-table .Affiliate-product .p_title {
      font-weight: 600;
      font-size: 17px;
      line-height: 1.2;
      text-decoration: none;
      color: #4b77b7;
    }
    .Affiliate-product-table .Affiliate-btn a {
      background: #ef651e;
      text-transform: capitalize;
      padding: 10px;
      border-radius: 5px;
      color: #fff;
      font-size: 15px;
      display: block;
      text-align: center;
      transition: 0.3s;
    }
    .Affiliate-product-table .Affiliate-btn a:hover {
      background: #000;
      transition: 0.3s;
    }
    .Affiliate-product-table .Affiliate-feature {
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 10;
      -webkit-box-orient: vertical;
    }
    @media only screen and (max-width: 768px) {
      .Affiliate-product-table .p_tag {
        position: absolute;
        left: -20px;
      }
      .Affiliate-product-table tbody tr {
        padding: 10px;
      }
      .Affiliate-product-table tr td:first-child {
        width: 40%;
      }
      .Affiliate-product-table tr td:nth-child(2) {
        width: 60%;
      }
      .Affiliate-product-table tr td:nth-child(3),
      .Affiliate-product-table tr th:nth-child(3) {
        width: 100%;
      }
      .Affiliate-product-table tr td:last-child,
      .Affiliate-product-table tr th:last-child {
        width: 100%;
      }
      .Affiliate-product-table .Affiliate-btn a {
        margin-top: 20px;
      }
      .Affiliate-product-table tr th:nth-child(2) {
        width: 100%;
      }
      .Affiliate-product-table tr th:first-child,
      .Affiliate-product-table tr th:nth-child(3),
      .Affiliate-product-table tr th:last-child {
        display: none;
      }
    }
    /* End Affiliate Product Box */
    </style>
	


6_ save and publish your post

Click on this image to see example:

table for blogger post


Thank you for visiting and watch in you have any questions feel free to ask on, don't forget to subscribe to my Youtube Channel for more



About the Author

Hello, my name is Khalid I am a blogger, developer, and the creator of zoom4display and zoom4diet blogs, as you can see I am very interested and passionate to repair and find new ideas to easier our daily life at home, backyard, at work and tech i…

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.