Sử dụng CSS thiết kế bảng biểu (Table)

Chúng ta có thể sử dụng CSS trong table  để có giao diện đẹp hơn. 
Một số thuộc tính thông dùng trong việc sử dụng thiết kế table:

• border
• border-collapse
• padding
• width
• height
• text-align
• color
• background-color

CSS Table Border
Dùng thuộc tính border tạo đường viền cho table, dùng thuộc tính border cho các thẻ th và td
Ví dụ:

<style>  
table, th, td {  
    border: 1px solid black;  
}  
</style>  

Xem ví dụ

Thuộc tính Collapse

Nhóm các thuộc tính border vào một.

<style>  
table, th, td {  
    border: 1px solid black;  
    border-collapse: collapse;  
}  
</style>  

Xem ví dụ

Thuộc tính Padding

Thuộc tính Padding thêm khoảng trắng từ border đến nội dung trong Ô table

<style>  
table, th, td {  
    border: 1px solid black;  
    border-collapse: collapse;  
}  
th, td {
    padding: 10px;
}
</style>  

Xem ví dụ

 Thuộc tính even and odd cells

Trong bảng các bạn muộn tạo dòng chẵn và dòng lẻ 2 màu khác nhau thì xem ví dụ sau:

<style>  
table, th, td {  
    border: 1px solid black;  
    border-collapse: collapse;  
}  
th, td {  
    padding: 10px;  
}  
table#alter tr:nth-child(even) {  
    background-color: #eee;  
}  
table#alter tr:nth-child(odd) {  
    background-color: #fff;  
}  
table#alter th {  
    color: white;  
    background-color: gray;  
}  
</style>  

Xem ví dụ