CSS

Đị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 cod…

Hung.Pro.VN

Developer Windows

---

• 14/07/2017
• Views

• #CSS
• #HTML

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

DOMAIN	Giá ưu đãi	Số Lượng	Coupon
.COM	88k	100	MBCOM88
.COM + .NET	160k	30	MDCOMNET
.COM + .COM	160k	70	MCCOM80

LIVE DEMO

Previous post

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

Next post

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

Related post

---

Hung.Pro.VN

Nhà thiết kế Web

View Articles

Tôi là admin trang Hung.Pro.VN là một người có đam mê với Blogspot, kinh nghiệm 5 năm thiết kế ra hàng trăm mẫu Template blogpsot như" Bán hàng, bất động sản, landing page, tin tức...

Share this article