Este documento é uma tradução de português (Europeu) do documento Inglês oficial.: |
(This page uses CSS style sheets)
Atenção: Atenção: no momento desta escrita (Fevereiro 2003), a maioria dos navegadores ainda não suporta o selecionador 'nth – child' (criado em Novembro de 2001) e muito poucos suportam elemento COL.
Uma forma de melhorar a legibilidade de grandes tabelas é colorir alternadamente linhas. Por exemplo, a tabela em baixo tem um simples fundo cinza para as linhas pares e branco para as linhas ímpares. As regras para isso são extremamente simples:
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 |
De facto, o CSS permite não só alternancias Pares/Ímpares, mas intervalos arbitrários. As palavras-chave 'Pares' e 'ímpares' são apenas atalhos convenientes. Por exemplo, para uma lista longa pode fazer isso:
li:nth-child(5n+3) {font-weight: bold}
Isto diz que cada quinto item da lista está a negrito, a começar na terceira. Noutras palavras, os itens 3,8,13,18,23, etc estão a negrito.
O mesmo funciona paras as colunas nas tabelas mas têm que ter um elemento no documento que corresponda à coluna. HTML disponibiliza COL para isso. A tabela têm que começar com COL em todas as coluna:
<table> <col><col><col><col><col><col><col><col><col><col> <tr><th>Month<th>1994<th>1995<th>1996...
(COL pode ser usado para outras coisas sem ser o estilo, mas neste caso tudos o que precisamos é que os elementos COL estejam presentes.) As regras seguintes dão à primeira coluna fundo amarelo e depois um fundo cinza a todas as colunas a partir da terceira coluna.
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 |
O fundo da linha (TR) é desenhado em frente ao fundo da coluna (COL), então se quer ter a certeza que o fundo da coluna é visível, não defina um fundo nas linhas.