Todos os exemplos deste artigo foram testados em Internet Explorer 6.0 SP2 a 8.0 (8.0.6001.18999), Mozilla Firefox 1.7.3 a 3.6.13, Google Chrome 8.0.552.224, Apple Safari 5.0.3.
Enquanto o HTML antigo praticamente só tem o atributo border
da
tag table
como recurso para borda de tabelas, a folha de estilos
em cascata — o CSS — oferece uma infinidade de recursos e opções
para formatação de bordas de tabelas e suas células.
Uma página interessante é a HTML
and CSS Table Border Style Wizard, que lista as propriedades e valores
disponíveis para tabela (table
) e célula (td
ou
th
) em CSS2, permitindo que você teste as diversas opções e veja
o resultado visual imediatamente, de forma interativa em uma tabela de exemplo.
Vejamos a seguir uma formatação básica de borda para tabela e célula,
definindo largura 1 pixel (border-width
), estilo de linha sólida
(border-style
) e cor (border-color
) — preta para
a tabela e azula para as células —, na forma abreviada da propriedade
border
com os valores das três propriedades específicas definidos
em sequência.
table.comBordas { border: 1px solid black; } table.comBordas td { border: 1px solid blue; }
valor 1.1 | valor 1.2 | valor 1.3 |
valor 2.1 | valor 2.2 | valor 2.3 |
O resultado desse estilo trivial ainda não está visualmente muito agradável.
Uma opção fundamental é a propriedade border-collapse
da tabela, que elimina o espaço entre as células de forma que a as bordas em torno
das células se fundam em uma só.
table.comBordaSimples { border-collapse: collapse; /* CSS2 */ background: #FFFFF0; } table.comBordaSimples td { border: 1px solid black; } table.comBordaSimples th { border: 1px solid black; background: #F0FFF0; }
Basta aplicar o estilo (class
) comBordaSimples à tabela:
Coluna 1 | Coluna 2 | Coluna 3 |
---|---|---|
valor 1.1 | valor 1.2 | valor 1.3 |
valor 2.1 | valor 2.2 | valor 2.3 |
valor 3.1 | valor 3.2 | valor 3.3 |
valor 4.1 | valor 4.2 | valor 4.3 |
No IE, a borda da tabela tem sempre precedência sobre a borda das células que estão nos limites da tabela. Já os demais navegadores testados obedecem corretamente as regras de precedência definidas na especificação CSS2 (revisão 1: 2.1) do W3C:
Veja o seguinte exemplo de estilo complexo.
table.comBordaComplexa { border-collapse: collapse; /* CSS2 */ background: #FFFFF0; border: dashed red 1px; /* Precedência tem bug no IE */ } table.comBordaComplexa td { border: 1px dotted blue; } table.comBordaComplexa th { border: 1px solid blue; border-bottom: 2px solid green; background: #F0FFF0; }
Coluna 1 | Coluna 2 | Coluna 3 |
---|---|---|
valor 1.1 | valor 1.2 | valor 1.3 |
valor 2.1 | valor 2.2 | valor 2.3 |
valor 3.1 | valor 3.2 | valor 3.3 |
valor 4.1 | valor 4.2 | valor 4.3 |
Eis uma imagem (extraída do Mozilla) de como a tabela com bordas sobrepostas deve ser exibida corretamente:
Esta opção só funciona em navegadores que suportam CSS3. Funciona no Firefox 3.6, Chrome 8 e Safari 5, mas não no Internet Explorer até o 8.
table.linhasAlternadas { border-collapse: collapse; /* CSS2 */ background: #FFFFF0; border: solid green 1px; } table.linhasAlternadas tr:nth-child(even) /* CSS3 */ { background: #F0FFFF; }
Coluna 1 | Coluna 2 | Coluna 3 |
---|---|---|
valor 1.1 | valor 1.2 | valor 1.3 |
valor 2.1 | valor 2.2 | valor 2.3 |
valor 3.1 | valor 3.2 | valor 3.3 |
valor 4.1 | valor 4.2 | valor 4.3 |
Para navegadores apenas com suporte a CSS2, a única alternativa é criar explicitamente uma classe de estilo, e aplicá-la em todas as linhas (tr) alternadas.
table.linhasAlternadas tr.even /* estilo explícito CSS2 */ { background: #F0FFFF; }
<table class="linhasAlternadas"> ... <tr class="even"> <td>valor 1.1</td> ... </tr> ... <tr class="even"> <td>valor 3.1</td> ... </tr> ... </table>
Coluna 1 | Coluna 2 | Coluna 3 |
---|---|---|
valor 1.1 | valor 1.2 | valor 1.3 |
valor 2.1 | valor 2.2 | valor 2.3 |
valor 3.1 | valor 3.2 | valor 3.3 |
valor 4.1 | valor 4.2 | valor 4.3 |
A especificação CSS2 define a
pseudo-classe dinâmica :hover
não só para links
(tag A
), mas para qualquer elemento visível, quando o usuário o
aponta, sem ativá-lo, com um dispositivo de apontamento. Simplificando, é a
pseudo-classe de estilo para quando o usuário apenas passa o mouse sobre o
elemento.
Assim, para os navegadores com suporte à pseudo-classe ':hover' do CSS2,
é possível fazer o efeito de estilo de realce de uma linha de tabeka quando o
usuário passa o mouse sobre esta, apenas definindo um background diferente no
seletor tr:hover
.
Porém, no popular navegador Internet Explorer até a última versão testada para este artigo, 6 SP2, a pseudo-classe :hover é reconhecida para todos os elementos, mas só é efetivamente tratada para links. O desenvolvedor holandês Peter Nederlof criou porém um arquivo JavaScript de comportamento (HTC behavior), recurso atualmente proprietário do Internet Explorer, para suprir essa deficiência e fazer o hover funcionar também nesse navegador.
Para usar o behavior para o Internet Explorer, basta fazer o
download do
arquivo csshover3.htc encontrado na página "whatever:hover" de Peter Nederlof,
salvar o HTC em um local acessível pelo estilo que o referenciará, e definir o
estilo behavior: url(csshover3.htc)
, no contexto onde for usado
(neste exemplo, o HTC está na mesma pasta da página que usa este comportamento).
Aqui, definimos este comportamento específico para o Internet Explorer no
escopo da classe de tabela .realceLinha
, e definimos no estilo
tr:hover
um fundo para a linha realçada. O tr:hover funcionará
para os navegadores com suporte a esse recurso CSS2, como o Mozilla, e o
recurso proprietário do behaviour fará com que ele funcione no Internet Explorer.
Os estilos ficam assim:
body { behavior: url(csshover3.htc); } table.realceLinha tr:hover { background: #F0F0F0; }
Coluna 1 | Coluna 2 | Coluna 3 |
---|---|---|
valor 1.1 | valor 1.2 | valor 1.3 |
valor 2.1 | valor 2.2 | valor 2.3 |
valor 3.1 | valor 3.2 | valor 3.3 |
valor 4.1 | valor 4.2 | valor 4.3 |
Por fim, eis um exemplo completo definindo bordas distintas para o contorno
da tabela (table
), células de cabeçalhos (th
) e demais
células (td
), fundos distintos para linhas alternadas e fundo
destacado para a linha sob o mouse.
Para completar, um elemento adicional: se uma célula for usada apenas para
conter um link, formatamos o estilo do link como um bloco (e não texto em-linha)
ocupando 100% da largura da célula, o que deve ser conveniente em tabelas
contendo uma lista de links correspondendo a valores para seleção. Foram
aplicados também estilos text-decoration
para que o link só fique
sublinhado quando apontado (:hover
). Os estilos para o link interno
à célula ficam assim:
table.listaValores td a { display: block; width: 100%; text-decoration: none; } table.listaValores td a:hover { text-decoration: underline; }
Veja o resultado aplicado aos links nas células da coluna 2, no exemplo a seguir. Aponte o mouse para uma célula com link e note que, mesmo fora do texto do link, este é ativado.
Coluna 1 | Coluna 2 | Coluna 3 |
---|---|---|
valor 1.1 | link um 1.2 | valor 1.3 |
valor 2.1 | link dois 2.2 | valor 2.3 |
valor 3.1 | link três 3.2 | valor 3.3 |
valor 4.1 | link quatro 4.2 | valor 4.3 |
Para o caso de uma lista de valores com uma única coluna, ao invés de se
utilizar uma tabela, pode-se recorrer a uma lista SELECT de formulário.
A lista oferece a vantagem que cada elemento OPTION já tem o atributo
value
para conter o seu valor, independente do texto que aparece
rotulando a opção. Em um link, o valor associado precisa ser um parâmetro
fornecido no link ou por JavaScript no seu evento onclick
.
O ato da seleção (clique) da opção escolhida na lista pode ser implementado com
JavaScript para o evento onchange
do SELECT, ou simplesmente no
envio (submit) do FORM.
form.listaValores label { background: #F0FFF0; font-weight: bold; } form.listaValores option { background: #FFFFF0; } form.listaValores option:nth-child(even) { background: #F0FFFF; } form.listaValores option.even { background: #F0FFFF; } form.listaValores option:hover { background: #CCF0F0; }
Nota: Infelizmente, o JavaScript de comportamento hover (pelo menos a versão
aqui utilizada) não faz efeito para as opções do SELECT, no Internet Explorer,
no Chrome nem no Safari. No Mozilla, porém, o option:hover
do CSS
funciona perfeitamente.
© 2003-2020, Márcio d'Ávila, mhavila.com.br, direitos reservados. O texto e código-fonte apresentados podem ser referenciados, distribuídos e utilizados, desde que expressamente citada esta fonte e o crédito do(s) autor(es). A informação aqui apresentada, apesar de todo o esforço para garantir sua precisão e correção, é oferecida "como está", sem quaisquer garantias explícitas ou implícitas decorrentes de sua utilização ou suas conseqüências diretas e indiretas.