MẪU WEBSITE THEO GIÁ
Thay đổi dễ dàng theo phong cách của riêng của bạn
NULLTác giả : Số lượt xem : 5224 lượt xem
Table được dùng rất nhiều trong một trang web. Ví dụ như bảng giá, bảng thông tin, bảng danh sách sản phẩm được hiển thị theo cột cho người dùng theo dõi một cách nhanh chóng nhất.
Sau đây mình sẽ hướng dẫn các bạn làm bảng sản phẩm và các thông tin của nó được hiển thị theo dạng cột .
Link DEMO : Bấm Vào Đây
Trước hết ta có HTML sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
<div class="wrapper"> <table class="table table-compare"> <tr> <td class="compare-label">Product Image</td> <td> <a href="#"><img src="p40.jpg" alt="Product"></a> </td> <td> <a href="#"><img src="p40.jpg" alt="Product"></a> </td> <td> <a href="#"><img src="p40.jpg" alt="Product"></a> </td> </tr> <tr> <td class="compare-label">Product Name</td> <td> <a href="#">Perfomax</a> </td> <td> <a href="#">Perfomax</a> </td> <td> <a href="#">Perfomax</a> </td> </tr> <tr> <td class="compare-label">Rating</td> <td> <div class="product-star"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-half-o"></i> <span>(3 Reviews)</span> </div> </td> <td> <div class="product-star"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-half-o"></i> <span>(3 Reviews)</span> </div> </td> <td> <div class="product-star"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-half-o"></i> <span>(3 Reviews)</span> </div> </td> </tr> <tr> <td class="compare-label">Price</td> <td class="price">$20</td> <td class="price">$21</td> <td class="price">$20.5</td> </tr> <tr> <td class="compare-label">Description</td> <td>Printed evening dress with straight sleeves with black thin waist belt and ruffled linings.</td> <td>Printed evening dress with straight sleeves with black thin waist belt and ruffled linings.</td> <td>Printed evening dress with straight sleeves with black thin waist belt and ruffled linings.</td> </tr> <tr> <td class="compare-label">Manufacturer</td> <td>CUCGU</td> <td>Nakia</td> <td>Gola</td> </tr> <tr> <td class="compare-label">Availability</td> <td class="instock">Instock (20 items)</td> <td class="outofstock">Out of stock</td> <td class="instock">Instock (20 items)</td> </tr> <tr> <td class="compare-label">SKU</td> <td>#873289</td> <td>#874389</td> <td>#874389</td> </tr> <tr> <td class="compare-label">Size</td> <td>X</td> <td>XL</td> <td>XS</td> </tr> <tr> <td class="compare-label">Color</td> <td>Blue</td> <td>Blue</td> <td>Blue</td> </tr> <tr> <td class="compare-label">Weight</td> <td>0.3kg</td> <td>0.3kg</td> <td>0.3kg</td> </tr> <tr> <td class="compare-label">Dimensions</td> <td>40x20x72cm</td> <td>40x20x72cm</td> <td>40x20x72cm</td> </tr> <tr> <td class="compare-label">Action</td> <td class="action"> <button class="add-cart button button-sm">Add to cart</button> <button class="button button-sm"><i class="fa fa-heart-o"></i></button> <button class="button button-sm"><i class="fa fa-close"></i></button> </td> <td class="action"> <button class="add-cart button button-sm">Add to cart</button> <button class="button button-sm"><i class="fa fa-heart-o"></i></button> <button class="button button-sm"><i class="fa fa-close"></i></button> </td> <td class="action"> <button class="add-cart button button-sm">Add to cart</button> <button class="button button-sm"><i class="fa fa-heart-o"></i></button> <button class="button button-sm"><i class="fa fa-close"></i></button> </td> </tr> </table> </div> |
Ở html trên là dựng khung cho table, tiếp theo ta là css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
table{ padding: 0; border: none; border-collapse: collapse; border: 1px solid #ddd; width: 1170px; margin: 50px auto; } table td { padding: 0; border: none; border-collapse: collapse; } a { color: #666; text-decoration: none; } .table tr>td, .table tr>th { border: 1px solid #ddd; padding: 8px; line-height: 1.42857143; vertical-align: top; border-top: 1px solid #ddd; } .table-compare td.compare-label { width: 150px; background: #fafafa; vertical-align: middle; } img { vertical-align: top; max-width: 100%; } .table-compare .product-star .fa { line-height: inherit; color: #ff9900; } .table-compare .price { font-weight: bold; color: #ff3366; } .button { padding: 10px 20px; border: 1px solid #eaeaea; background: #666; color: #fff; line-height: 1.5; } .button:hover { background: #ff3366; border: 1px solid #ff3366; } .button .fa { line-height: inherit; } .button-sm { padding: 5px 10px; border: 1px solid #eaeaea; outline: none; cursor: pointer; } .table-compare .add-cart { background: #ff3366; color: #fff; } |
Bạn dùng html và css ở trên là được bảng như trong ảnh . Qua bài này giúp bạn css cho table đẹp và đa dạng lên.
Hy vọng các bạn sẽ thấy thích bài viết của mình chia sẻ cho các bạn, nếu có bất kỳ vấn đề khó khăn gì hay câu hỏi gì . Bạn đừng ngần ngại , hãy để lại bình luận ở dưới nhé.
Chúc Các Bạn Thành Công !