CSS para tabelas e listas de seleção HTML

Bordas simples

table.comBordaSimples {
	border-collapse: collapse; /* CSS2 */
	background: #FFFFF0;
}

table.comBordaSimples td {
	border: 1px solid black;
}

table.comBordaSimples th {
	border: 1px solid black;
	border-bottom: 2px solid black;
	background: #F0FFF0;
}

Basta aplicar o estilo (class) comBordaSimples à tabela:

Bordas sobrepostas

Bordas coincidentes: Ordem de precedência na resolução de conflito

No IE, a borda da tabela tem sempre precedência sobre a borda das células que estão nos limites da tabela. Já o Mozilla obedece corretamente as regras de precedência definidas na especificação CSS2 (revisão 1: 2.1) do W3C:

1. Bordas com estilo ('border-style') 'hidden' são suprimidas (ocultas) e têm precedência sobre todas as outras bordas conflitantes/coincidentes.
2. Se nenhuma das bordas tem estilo 'hidden', a borda mais larga (maior 'border-width') tem precedência.
3. Se várias bordas tiverem o mesmo 'border-width', o estilo tem precedência, nesta ordem: (maior) 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', 'inset' (menor).
4. Bordas com 'border-style' igual a 'none' (nenhum) têm sempre a menor prioridade.

Eis uma imagem (extraída do Mozilla) de como a tabela com bordas sobrepostas deve ser exibida corretamente:

Linhas alternadas

Realce de Linha

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 csshover.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(csshover.htc), no contexto onde for usado (neste exemplo, o HTC está na mesma pasta da página que define o estilo).

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(csshover.htc);
}

table.realceLinha tr:hover {
	background: #F0F0F0;
}

Uma lista de valores bem formatada

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.

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 Mozilla, porém, o option:hover do CSS funciona sem problemas.

Todos os exemplos deste artigo foram testados no Internet Explorer 6.0 SP2 e no Mozilla 1.7.3.

Referências

• Especificação CSS2 revisão 1 (2.1) do W3C.
• Recomendação Candidata CSS3 do W3C: Seletores.
• W3C: CSS Even and odd rules.
• Zebra Tables, artigo por David F. Miller, A List Apart (inglês).
• Whatever hover, Internet Explorer Behavior (HTC) por Peter Nederlof, Peterned - Code & GFX.

© 2003-2007, 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.