Kho giao diện web đa dạngVới đủ các lĩnh vực - ngành nghề kinh doanh khác nhau

Kinh doanh hiệu quả hơn trên internet

MẪU WEBSITE THEO GIÁ

Thiết kế table đẹp mắt bằng CSS

Thay đổi dễ dàng theo phong cách của riêng của bạn

NULL

Mẫu web bán hàng, Mẫu web giới thiệu công ty, Mẫu web bất động sản, Mẫu web cá nhân ...

Thiết kế table đẹp mắt bằng CSS

Tác giả : Số lượt xem : 4006 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:

<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>

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

<tr>

<td class="compare-label">Product Image</td>

<td>

</td>

<td>

</td>

<td>

</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>

<span>(3 Reviews)</span>

</div>

</td>

<td>

<span>(3 Reviews)</span>

</div>

</td>

<td>

<span>(3 Reviews)</span>

</div>

</td>

</tr>

<tr>

<td class="compare-label">Price</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>

</tr>

<tr>

<td class="compare-label">Manufacturer</td>

<td>CUCGU</td>

<td>Nakia</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>

</tr>

<tr>

</tr>

<tr>

<td class="compare-label">Color</td>

</tr>

<tr>

<td class="compare-label">Weight</td>

</tr>

<tr>

<td class="compare-label">Dimensions</td>

</tr>

<tr>

<td class="compare-label">Action</td>

</td>

</td>

</td>

</tr>

</table>

</div>

Ở html trên là dựng khung cho table, tiếp theo ta là css:

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;
}

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 !

Hỗ trợ trực tuyến

Hỗ trợ khách hàng
0941 254 937 Gia Khang
Email chăm sóc khách hàng
support@thietkewebsite500k.net

Kho giao diện web đa dạngVới đủ các lĩnh vực - ngành nghề kinh doanh khác nhau

Thiết kế table đẹp mắt bằng CSS

Thiết kế table đẹp mắt bằng CSS

Hỗ trợ trực tuyến

Hỗ trợ trực tuyến

⭐ Chia sẻ 10 công cụ kiểm tra Backlink đối thủ tốt nhất

⭐ THIẾT KẾ TABLE ĐẸP MẮT BẰNG CSS (Tiếp)

⭐ Domain – Tên miền là gì ? Định nghĩa ý nghĩa của domain ?

⭐ Thiết kế table đẹp mắt bằng CSS

⭐ Tạo modal popup bằng css

DỊCH VỤ THIẾT KẾ WEBSITE GIÁ RẺ

Liên hệ

Thiết Kế Website

Liên Kết

Đăng Ký Dịch Vụ

Xin Vui Lòng Điền Đầy Đủ Thông Tin