CSS para tabelas e listas de seleção HTML

Leituras: 14366 -

CSS para tabelas e listas de seleção HTML

Márcio d'Ávila

---

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:

Borda Simples

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

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.

Borda Complexa

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:

Linhas alternadas

CSS3 nth-child(even)

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

Adicionando estilo 'even'

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

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;
}

Realce de linha 'tr:hover'

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

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.

Lista de valores

Coluna 1	Coluna 2	Coluna 3
valor 1.1	link 1.2	valor 1.3
valor 2.1	link 2.2	valor 2.3
valor 3.1	link 3.2	valor 3.3
valor 4.1	link 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 Mozilla, porém, o option:hover do CSS funciona sem problemas.

Lista de valores

Título:
Opção 1 Opção 2 Opção 3 Opção 4 Opção N

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-2005, Márcio d'Ávila, mhavila.com.br, todos os direitos reservados. O texto e código-fonte apresentados podem ser referenciados 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.