The Future of Cleaning: Exploring the Pros and Cons of Robot Vacuum Cleaners

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:

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