Các Trang Mẫu Web
Thủ thuật và lời khuyên CSS

Trạng thái

Chú ý: Tại thời điểm viết (tháng 2/2003), những trình duyệt chính vẫn chưa hỗ trợ bộ chọn 'nth-child' (đưa ra vào tháng 11/2001) và chỉ hỗ trợ rất ít thành phần của thẻ COL.

Quy luật chẵn và lẻ

Một cách để cải thiện khả năng đọc trên các bảng lớn là tô màu lần lượt các hàng. Ví dụ, bảng dưới đây với các hàng chẵn có nền là màu xám nhạt và với các hàng lẻ có nền là màu trắng. Quy tắc đó vô cùng đơn giản:

tr:nth-child(even) {background: #CCC}tr:nth-child(odd) {background: #FFF}

Month	1994	1995	1996	1997	1998	1999	2000	2001	2002
Jan	14	13	14	13	14	11	11	11	11
Feb	13	15	12	15	15	12	14	13	13
Mar	16	15	14	17	16	15	14	15	15
Apr	17	16	17	17	17	15	15	16	16
May	21	20	20	21	22	20	21	20	19
Jun	24	23	25	24	25	23	25	23	24
Jul	29	28	26	26	27	26	25	26	25
Aug	29	28	27	28	28	27	26	28	26
Sep	24	23	23	26	24	24	24	22	21
Oct	20	22	20	22	20	19	20	22
Nov	18	17	16	17	16	15	14	15
Dec	15	13	13	14	13	10	13	11

Thực chất CSS cho phép không chỉ xen kẽ chẵn/lẻ mà còn những khoảng tuỳ ý. Các từ khoá ‘even’ và ‘odd’ chỉ là lối viết tắt cho tiện. Ví dụ, với một danh sách dài bạn có thể làm như sau:

li:nth-child(5n+3) {font-weight: bold}

Có nghĩa là mục thứ 5 trong danh mục sẽ được tô đậm, và bắt đầu từ mục thứ 3. Nói cách khác, các mục số 3, 8, 13, 18, 23, … sẽ đậm.

Các cột chẵn và lẻ

Đối với các cột của bảng thì cũng như vậy, nhưng sau đó phải có một thành phần trong văn bản tương ứng với cột. HTMT cung cấp thẻ COL để làm điều đó. Bảng phải bắt đầu với một thẻ COL cho mỗi cột:

<table><col><col><col><col><col><col><col><col><col><col><tr><th>Month<th>1994<th>1995<th>1996...

(thẻ COL có thể được dùng cho những đối tượng khác chứ không chỉ trong trang mẫu, nhưng trong trường hợp này tất cả những gì chúng ta cần là các thành phần của thẻ COL phải được đưa ra.) Quy tắc dưới đây cho ra cột đầu tiên có nền màu vàng và sau đó các cột xen kẽ khác bắt đầu từ cột 3 có nền màu xám.

col:first-child {background: #FF0}col:nth-child(2n+3) {background: #CCC}

Month	1994	1995	1996	1997	1998	1999	2000	2001	2002
Jan	14	13	14	13	14	11	11	11	11
Feb	13	15	12	15	15	12	14	13	13
Mar	16	15	14	17	16	15	14	15	15
Apr	17	16	17	17	17	15	15	16	16
May	21	20	20	21	22	20	21	20	19
Jun	24	23	25	24	25	23	25	23	24
Jul	29	28	26	26	27	26	25	26	25
Aug	29	28	27	28	28	27	26	28	26
Sep	24	23	23	26	24	24	24	22	21
Oct	20	22	20	22	20	19	20	22
Nov	18	17	16	17	16	15	14	15
Dec	15	13	13	14	13	10	13	11

Nền của các hàng (TR) được tô lên trên nền của các cột (COL), vì vậy nếu bạn muốn chắc chắn rằng nền của các cột được hiển thị bạn không nên đặt màu nền cho các hàng.