See also the index of all tips.
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.
The same works for table columns, too, but then there has to be an element in the document that corresponds to the column. HTML provides COL for that. The table has to start with one COL for every column:
<table> <col><col><col><col><col><col><col><col><col><col> <tr><th>Month<th>'94<th>'95<th>'96...
(COL can be used for other things than style, but in this case all we need is that the COL elements are present.) The following rules give the first column a yellow background, and then every second column starting from column 3 a gray one:
col:first-child {background: #FF0} col:nth-child(2n+3) {background: #CCC}
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 |
The background of rows (TR) is drawn in front of the background of columns (COL), so if you want to be sure that the background of the columns is visible, you should not set a background on the rows.
Created 6 Febrary 2003;
Last updated Wed 06 Jan 2021 05:40:49 AM UTC