HOT !!!Hiện Tại HungCoder.Com Đang Phát Hành Trang Chat Miễn Phí Cho Mọi Người Giao Đỗi Thông Tin Với Nhau.Click Here

Thứ Sáu, tháng 7 14, 2017

Định dạng bảng (Table) trong CSS

Hôm nay mình sẽ hướng dẫn các bạn cách tạo bảng (Table) bằng CSS đẹp ^^.


Bảng này dùng để giúp các website / blog chia sẽ những thứ cần phân loại chuẩn nhất cho mọi người :). Còn bên dưới là đoạn code cho mọi người nhé :P

Đầu tiên là đoạn CSS
<style type="text/css">
table{
    width:100%;
}
table,th,td{
    border:1px solid gray;
    border-collapse: collapse;
}
th,td{
    padding:7px 15px;
}
th{
    background-color: #008040;
    color: white;
}
tr:nth-child(even){
    background-color: #F0F0F0;
}
tr:hover{
    background-color: #ddd;
}
</style>

Với đoạn code CSS trên các bạn có thể để đâu tùy thích :P
Đoạn thứ 2 là đoạn hiển thị :)

<table>
<tr><th>DOMAIN</th><th>Giá ưu đãi</th><th>Số Lượng</th><th>Coupon</th></tr>
<tr><td>.COM</td><td>88k</td><td>100</td><td>MBCOM88</td></tr>
<tr><td>.COM + .NET</td><td>160k</td><td>30</td><td>MDCOMNET</td></tr>
<tr><td>.COM + .COM</td><td>160k</td><td>70</td><td>MCCOM80</td></tr>
</tr>
</table>

Chúc các bạn thành công :)

DEMO

DOMAINGiá ưu đãiSố LượngCoupon
.COM88k100MBCOM88
.COM + .NET160k30MDCOMNET
.COM + .COM160k70MCCOM80

LIVE DEMO

0 Bình Luận:

Đăng nhận xét


Top