CSS para tabelas e listas de seleção HTML

Márcio d'Ávila, 22 de outubro de 2004. Revisão 1, 19 de dezembro de 2010.
Categoria: Internet: Cliente: DHTML

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.


Bordas simples

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;
}
Bordas de tabela e célula
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:

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á os demais navegadores testados obedecem 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.

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

Borda Complexa correta (Mozilla)

Linhas alternadas

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

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>
CSS3 + estilo explícito '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 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;
}
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. Aponte o mouse para uma célula com link e note que, mesmo fora do texto do link, este é ativado.

Lista de valores
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.

Lista de valores

Referências


Firefox - A web de volta
Creative Commons License

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