One way to improve the readability of large tables is to color alternating rows. For example, the table below has a light gray background for the even rows and white for the odd ones. The rules for that are extremely simple:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
Month | '94 | '95 | '96 | '97 | '98 | '99 | '00 | '01 | '02 |
---|---|---|---|---|---|---|---|---|---|
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 |
In fact, CSS allows not only allow even/odd alternations, but arbitrary intervals. The keywords 'even' and 'odd' are just convenient shorthands. For example, for a long list you could do this:
li:nth-child(5n+3) {font-weight: bold}
This says that every 5th list item is bold, starting with the 3rd one. In other words, the items numbered 3, 8, 13, 18, 23, etc., will be bold.
No comments:
Post a Comment