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

Bài viết này sẽ giúp bạn thiết kế table đẹp mắt mà không dùng bất kỳ một file hình và cũng không cần phải có kiến thức về photoshop, chỉ với vài đoạn css3 đơn giản. Bạn có thể xem kết quả sau khi thực hiện xong như bên dưới:

Đầu tiên chúng ta tạo HTML để làm ví dụ minh họa :

<table>
<thead>
<tr>
<td></td>
<td>Standard</td>
<td>Professional</td>
<td>Enterprise</td>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td>$99</td>
<td>$199</td>
<td>$399</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Custom domain</td>
<td><img src="check.png" awidth="16" height="16" alt="check"></td>
<td><img src="check.png" awidth="16" height="16" alt="check"></td>
<td><img src="check.png" awidth="16" height="16" alt="check"></td>
</tr>
<tr>
<td>Advanced control</td>
<td><img src="check.png" awidth="16" height="16" alt="check"></td>
<td><img src="check.png" awidth="16" height="16" alt="check"></td>
<td><img src="check.png" awidth="16" height="16" alt="check"></td>
</tr>
<tr>
<td>Unlimited support</td>
<td><img src="cross.png" awidth="16" height="16" alt="cross"></td>
<td><img src="check.png" awidth="16" height="16" alt="check"></td>
<td><img src="check.png" awidth="16" height="16" alt="check"></td>
</tr>
<tr>
<td>User registration</td>
<td><img src="cross.png" awidth="16" height="16" alt="cross"></td>
<td><img src="cross.png" awidth="16" height="16" alt="cross"></td>
<td><img src="check.png" awidth="16" height="16" alt="check"></td>
</tr>
</tbody>
</table>

Bây giờ là khâu quan trọng nhất, áp dụng css3 cho table này, ở đây mình dùng CSS3 selector như là :nth-child(n) hoặc :first-child và chú ý là nó không hoạt động ở IE6 và IE8.
Các bạn copy đoạn css sau :

.features-table
{
awidth: 100%;
margin: 0 auto;
border-collapse: separate;
border-spacing: 0;
text-shadow: 0 1px 0 #fff;
color: #2a2a2a;
background: #fafafa;
background-image: -moz-linear-gradient(top, #fff, #eaeaea, #fff); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,center bottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff));
}

.features-table td
{
height: 50px;
line-height: 50px;
padding: 0 20px;
border-bottom: 1px solid #cdcdcd;
box-shadow: 0 1px 0 white;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
white-space: nowrap;
text-align: center;
}

/*Body*/
.features-table tbody td
{
text-align: center;
font: normal 12px Verdana, Arial, Helvetica;
awidth: 150px;
}

.features-table tbody td:first-child
{
awidth: auto;
text-align: left;
}

.features-table td:nth-child(2), .features-table td:nth-child(3)
{
background: #efefef;
background: rgba(144,144,144,0.15);
border-right: 1px solid white;
}


.features-table td:nth-child(4)
{
background: #e7f3d4;
background: rgba(184,243,85,0.3);
}

/*Header*/
.features-table thead td
{
font: bold 1.3em 'trebuchet MS', 'Lucida Sans', Arial;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-top: 1px solid #eaeaea;
}

.features-table thead td:first-child
{
border-top: none;
}

/*Footer*/
.features-table tfoot td
{
font: bold 1.4em Georgia;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom: 1px solid #dadada;
}

.features-table tfoot td:first-child
{
border-bottom: none;
}

Để có thể chạy trên IE thì các bạn có thể tham khảo đoạn css sau :

/*Features table------------------------------------------------------------*/
.features-table
{
awidth: 100%;
margin: 0 auto;
border-collapse: separate;
border-spacing: 0;
text-shadow: 0 1px 0 #fff;
color: #2a2a2a;
background: #fafafa;
background-image: -moz-linear-gradient(top, #fff, #eaeaea, #fff); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,center bottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff));
font-family: Verdana,Arial,Helvetica
}
.features-table td
{
height: 50px;
line-height: 50px;
padding: 0 20px;
border-bottom: 1px solid #cdcdcd;
box-shadow: 0 1px 0 white;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
white-space: nowrap;
}
.no-border td
{
border-bottom: none;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.col-cell
{
text-align: center;
awidth: 150px;
font: normal 1em Verdana, Arial, Helvetica;
}
.col-cell1, .col-cell2
{
background: #efefef;
background: rgba(144,144,144,0.15);
border-right: 1px solid white;
}
.col-cell3
{
background: #e7f3d4;
background: rgba(184,243,85,0.3);
}
.col-cellh
{
font: bold 1.3em 'trebuchet MS', 'Lucida Sans', Arial;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-top: 1px solid #eaeaea !important;
}
.col-cellf
{
font: bold 1.4em Georgia;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom: 1px solid #dadada !important;
}
/**/

Hy vọng với bài viết này sẽ giúp các bạn làm chủ CSS3 và có thêm kinh nghiệm cho việc thiết kế web của mình.
Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster