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;">
  <!--chen them--><!--chen them san pham--><!--chen them san pham--><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>

<!--end code Column-->

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
Digitalnomad.vn : Thiết Kế Web đa cấu trúc, trải nghiệm viết blog đa nội dung, Koc Content truyền thông cho chính mình, xây dựng hệ thống kiếm tiền tự động online, đa dạng nguồn tài chính từ việc kiến tạo các thu nhập thụ động trên internet. Gia Bảo, Blogger viết vì đam mê, chia sẻ kỹ thuật giúp bạn biến các thiết bị công nghệ kết nối internet, thành cỗ máy MMO khai thác mỏ vàng trực tuyến, các thức giúp chúng ta chạm tay vào 'tự do tài chính'.

Chủ Đề Nổi Bật :


Sponsor

1. thotgo.asia
2. goghepthanh.com
3. dichvuketoannasa.com
4. remcuakimanh.vn