Márcio d'Ávila, 22 de outubro de 2004. Revisão 1, 19 de dezembro de 2010.
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 {
table.comBordas td {
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 */
table.comBordaSimples td {
table.comBordaSimples th {
Basta aplicar o estilo (class) comBordaSimples à tabela:
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:
Bordas com estilo ('border-style') 'hidden' são suprimidas (ocultas) e têm precedência sobre todas as outras bordas conflitantes/coincidentes.
Se nenhuma das bordas tem estilo 'hidden', a borda mais larga (maior 'border-width') tem precedência.
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).
Bordas com 'border-style' igual a 'none' (nenhum) têm sempre a menor prioridade.
Veja o seguinte exemplo de estilo complexo.
table.comBordaComplexa {
border: dashed red 1px; /* Precedência tem bug no IE */
table.comBordaComplexa td {
table.comBordaComplexa th {
Borda Complexa
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 {
table.linhasAlternadas tr:nth-child(even) /* CSS3 */ {
CSS3 nth-child(even)
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 */ {
<table class="linhasAlternadas">
<td>valor 1.1</td> ...
<td>valor 3.1</td> ...
CSS3 + estilo explícito 'even'
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:
table.realceLinha tr:hover {
Realce de linha 'tr:hover'
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 {
table.listaValores td a:hover {
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.
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.