Table of contents

Thủ Thuật Blogspot

Code Đăng sản phẩm tiếp thị liên kết dạng bảng ( Table ) & dạng cột ( Column )

Code Đăng sản phẩm tiếp thị liên kết dạng bảng ( Table ) & dạng cột ( Column )

A. Code dạng bảng tự co dãn theo kích thước màn hình thiết bị :

<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}

th, td {
text-align: left;
padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}
</style>

<div style="overflow-x: auto;">
<table>
    <tbody><tr>
      <th>Hình</th>
      <th>Mô tả</th>
     </tr>
    <tr>
      <td>

<div class="button-giua-anh">
<img alt="Xem gian hàng" src="https://salt.tikicdn.com/cache/w444/ts/product/f3/32/1d/35aca981cf84dd9f3cc7b07ae5e21f9c.png" style="width: 100%;" />
<a href="https://shorten.asia/qQgBWMax">
<button class="btn">Shop</button></a></div>


      </td>
      <td>
Cà rốt là một loại rau củ tốt cho sức khỏe, với độ giòn, vị ngon và chứa rất nhiều beta carotene, chất xơ, vitamin K1, kali cũng như chất chống oxy hóa. Ăn cà rốt rất thích hợp cho việc giảm cân, giúp giảm cholesterol, cải thiện sức khỏe mắt, thậm chí là giảm nguy cơ ung thư.
Tag Shop ( #SpicescleanandhealthyfoodqQgBWMax )

      </td>
     </tr>
   <tr>


      <td>
<div class="button-giua-anh">
<img alt="Xem gian hàng" src="https://salt.tikicdn.com/cache/w444/ts/product/f5/2b/45/4b9cb4e9185f38d34ec1c8229b2e6ae6.jpg" style="width: 100%;" />
<a href="https://shorten.asia/qQgBWMax">
<button class="btn">Shop</button></a></div>


     </td>
      <td>Cải xoăn Kale là loại rau đẹp nhất của họ nhà rau cải, chúng có màu sắc rất bắt mắt và đặc biệt rất giàu dinh dưỡng.ngọn cải non, mềm và ngọt
Tag Shop ( #SpicescleanandhealthyfoodqQgBWMax )
</td>
     </tr>


   <tr>
      <td>

<div class="button-giua-anh">
<img alt="Xem gian hàng" src="https://salt.tikicdn.com/cache/w444/ts/product/b4/8c/fb/a988a0d79387cd949dffba2c612c7cb9.png" style="width: 100%;" />
<a href="https://shorten.asia/qQgBWMax">
<button class="btn">Shop</button></a></div>


     </td>
      <td>

Rau Má (300gr/gói) - Chuẩn An Toàn VietGap
Tag Shop ( #SpicescleanandhealthyfoodqQgBWMax )


     </td>
     </tr>




   <tr>
      <td>hình sản phẩm</td>
      <td>Mô tả</td>
     </tr>
</tbody></table>
</div>

B. Code đăng sản phẩm dạng column tự do dãn theo kích thước màn hình thiết bị :

<style>
/* SECTIONS */
.section {
   clear: both;
   padding: 0px;
   margin: 0px;
}

/* COLUMN SETUP */
.col {
   display: block;
   float:left;
   margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/* GRID OF TWO */
.span_2_of_2 {
   width: 100%;
}
.span_1_of_2 {
   width: 49.2%;
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
   .col {
       margin: 1% 0 1% 0%;
   }
}

@media only screen and (max-width: 480px) {
   .span_2_of_2, .span_1_of_2 { width: 100%; }
}

</style>

<div class="section group">
   <div class="col span_1_of_2">
<div class="button-giua-anh">
<img alt="Xem gian hàng" src="https://salt.tikicdn.com/cache/w444/ts/product/f3/32/1d/35aca981cf84dd9f3cc7b07ae5e21f9c.png" style="width: 100%;" />
<a href="https://shorten.asia/qQgBWMax">
<button class="btn">Shop</button></a></div>

<p style="text-align: justify;padding:10px">
Cà rốt là một loại rau củ tốt cho sức khỏe, với độ giòn, vị ngon và chứa rất nhiều beta carotene, chất xơ, vitamin K1, kali cũng như chất chống oxy hóa. Ăn cà rốt rất thích hợp cho việc giảm cân, giúp giảm cholesterol, cải thiện sức khỏe mắt, thậm chí là giảm nguy cơ ung thư.
Tag Shop ( #SpicescleanandhealthyfoodqQgBWMax )
</p>


</div>
   <div class="col span_1_of_2">

<div class="button-giua-anh">
<img alt="Xem gian hàng" src="https://salt.tikicdn.com/cache/w444/ts/product/f5/2b/45/4b9cb4e9185f38d34ec1c8229b2e6ae6.jpg" style="width: 100%;" />
<a href="https://shorten.asia/qQgBWMax">
<button class="btn">Shop</button></a></div>
<p style="text-align: justify;padding:10px">

        Cải xoăn Kale là loại rau đẹp nhất của họ nhà rau cải, chúng có màu sắc rất bắt mắt và đặc biệt rất giàu dinh dưỡng.ngọn cải non, mềm và ngọt
Tag Shop ( #SpicescleanandhealthyfoodqQgBWMax )
      </p>

   </div>
</div>

Tham khảo :

http://www.responsivegridsystem.com/calculator/ : Code tạo column responsive
https://www.w3schools.com/howto/howto_css_table_responsive.asp - Code tạo bảng responsive