Định kiểu bảng¶

Tóm lược nội dung

Bài này trình bày cách định kiểu cho đường kẻ, hàng tiêu đề và các hàng nội dung của bảng.

Định kiểu đường kẻ¶

Để tạo đường kẻ đơn, ta thực hiện như sau:

style.css
table {
    border-collapse: collapse; /* (1)! */
}

td {
    border: 1px solid #0097be;
}

Theo mặc định, mỗi ô trong bảng có đường kẻ riêng biệt, dẫn đến việc khi hiển thị, bảng có đường kẻ đôi giữa hai ô kề nhau.

border-collapse: collapse; có tác dụng kết hợp đường kẻ đôi thành đường kẻ đơn.

Để định kiểu cho các ô của hàng tiêu đề, ta thực hiện như sau:

style.css
th {
    background-color: #0097be;
    height: 1.5rem;
    min-width: 80px;
}

Để các hàng chẵn và lẻ có màu nền xen kẽ nhau, ta thực hiện như sau:

style.css
tr:nth-child(even) { /* (1)! */
    background-color: #e5e5e5;
}

:nth-child(even) là bộ chọn pseudo-class, dùng để chọn các hàng chẵn trong bảng.

Để làm nổi bật cho hàng khi rê chuột vào, ta thực hiện như sau:

style.css
tr:hover {
    background-color: #ceeaff;
}