Estilizar célula que contém um link

Neste tutorial mostrarei como obter, com uso de CSS, um efeito de mudança da cor do fundo de uma célula de tabela que contém um link.

Ao final da leitura desse tutorial você estará capacitado a projetar a mudança da cor de fundo de uma célula de tabela quando o visitante passar o ponteiro do mouse sobre o link nela contido.

A dúvida?

Tenho recebido vários e-mails com a seguinte pergunta:

Como faço para obter o efeito de mudança da cor de TODO o fundo de uma célula de tabela que contém um link?

Menu e link dentro de tabela?

O Maujor pirou?

Em um projeto CSS esta dúvida não existiria, pelo simples fato de que tabelas foram introduzidas no HTML com a finalidade única de apresentar dados tabulares. E, só pode mesmo ser piração colocar um link dentro de uma célula de tabela em um site CSS

Mas, se este tutorial está aqui deve ter uma razão e eu explico para provar que ainda tenho o controle de minhas faculdades mentais!

Considero a dúvida de meus leitores iniciantes em CSS, relevante e procedente, já que é natural que o crescente número de desenvolvedores web que estão "descobrindo" as possibilidades das CSS ensaiam seus primeiros passos nesta técnica usando regras de estilo aqui e ali, incorporadas ou inline para obter um efeito de cor, de sublinhado e rollover, antes de cairem de cabeça nas CSS.

O domínio das técnicas de geração de layouts CSS não é complexo, mas também não é simples! Exige algum estudo e dedicação e assim, considero o emprego das CSS misturado com tabelas uma fase de transição necessária ao iniciciante já "viciado" em técnicas ultrapassadas, uma espécie de "ponta-pé" inicial perfeitamente válido para aqueles que se iniciam e pretendem usar CSS em sua plenitude máxima num futuro próximo quando com certeza afirmarão:
Puxa, eu usava tabelas para construir menus!

O porquê da dúvida

Se você já tentou mudar a cor do fundo de um link projetado dentro de uma célula de tabela, usando as técnicas CSS deve ter esbarrado na dificuldade de fazer a mudança da cor de toda a célula. A cor do fundo do texto do link muda, mas a da célula não!

Veja aqui o que acontece

Melhorando o código HTML

Antes de prosseguirmos com as regras de estilização vamos aproveitar a chance para melhorar um pouquinho o código de marcação estrutural do documento ou seja, o HTML

Vamos retirar os atributos cellspacing, border e bgcolor do elemento table bem como o atributo width do elemento td e declarar estes atributos em uma folha de estilos incorporada na página.
Assim estaremos cumprindo uma das diretrizes fundamentais de um projeto Web Standard:
"Separar a apresentação da marcação."

Veja como faremos:

• sai border="0" entra table tr td {border:1px solid #ccc;}
• sai bgcolor="#FFFFEE" entra table tr td {background-color: #ffe;}
• sai cellspacing="0" entra table {border-collapse: collapse;}
• sai width="1oo" entra table tr td {width: 100px;}

Veja como ficou

A resposta e solução para a questão inicial

O elemento html a, destinado a marcar hyperlinks e âncoras é um elemento inline. Sem maiores considerações teóricas vamos simplificar as coisas e pensar em elemento inline como sendo aquele que permanece confinado nos seus próprios limites sem expandir-se automaticamente para os lados dentro do bloco em que está contido e sem causar uma quebra de linha no fluxo do documento.

Em oposição temos os elementos nível de bloco que são aqueles que formam uma "caixa" e se expandem para os lados, ocupando toda a largura da caixa na qual estão contidos e causam uma quebra de linha para o elemento que lhes segue no fluxo do documento.

Elementos para cabeçalhos h nos seus seis níveis, elementos parágrafo p, elementos div são exemplos de elementos nível de bloco e elementos a, elementos span, elementos strong são exemplos de elementos inline

Veja um exemplo prático aqui

Notou que quando definimos uma cor para o fundo do parágrafo, a cor 'iluminou' toda a caixa do elemento, de um lado ao outro da tela, independente do tamanho ocupado pelo texto.
E, que quando definimos uma cor para o fundo do link ela a cor, 'iluminou' apenas os limites do texto. Pois é! é assim que funciona!

Mas, felizmente podemos transformar um elemento inline em elemento nível de bloco com uma regra CSS. A declaração que faz a mágica é:

seletor {display: block;} 

No nosso caso o seletor é o elemento a que sendo transformado em elemento nível de bloco irá expandir-se ocupando todo o seu bloco de conteúdo ( a célula td ) e comportando-se conforme nós havíamos imaginado desde o início.

Veja o resultado final

Bug no Internet Explorer

É! a solução mostrada acima seria final se todos os navegadores fossem complacentes com as Web Standards, mas temos o nosso 'amigo' IE para contrariar e nos exigir um trabalhinho extra para resolver um 'bug'.
Se você usa ou tem um IE 5.0 ou maior (na época que este tutorial foi escrito a versão atualizada é o IE 6.0) já deve ter notado que o efeito desejado somente acontece no Link um. Cruel! Muito cruel!.

Carregue no IE a página da solução final mostrada acima e deslise o mouse para cima e para baixo, sobre os três links pelo lado direito da célula fora do texto do link. Observe que agora a célula do Link um muda toda de cor, mas as outras duas não.

Em navegadores complacentes com as Web Standards, tais como o Firefox, o Ópera, o Netscape e o Mozilla (nos quais eu testei este código), o comportamento das células já está OK.
Somente o IE exigirá um trabalho extra para corrigir este 'bug'.

O Internet Explorer encontra dificuldades (coitadinho) para interpretar regras CSS para a e para a:hover quando as declarações de propriedades de estilo (não dos valores) para ambos os estados do link são as mesmas. Para resolver este 'bug' basta acresentar em uma das declarações, uma regra extra que não tenha efeito algum.
A propriedade a usar na regra extra não é qualquer uma, existem algumas que funcionam e outras não. Colocar a regra extra no seletor a ou a:hover depende de cada caso. Mas, este assunto fica por sua conta pesquisar para conhecer mais a fundo.

Para o nosso caso iremos usar a declaração extra position:relative para o seletor a.linque

Ufa! agora sim a solução definitiva com o 'hack' para o Internet Explorer.
E, vamos torcer para que este 'bug' também esteja resolvido no nascente IE 7.0.

A propósito

Há uma grande expectativa em torno do lançamento do IE 7.0 provavelmente no início de 2006.
Alguns bons artigos têm sido escritos em relação aos 'hacks' introduzidos em folhas de estilo existentes, para servir o IE. Com as possíveis e tão aguardadas soluções para muitas das inconsistências e falta de suporte para CSS pelo IE 6.0 e anteriores e que agora serão solucionadas (assim esperamos) pelo menos em parte, algumas precauções e algumas providências deverão ser tomadas no sentido de adaptar as CSS existentes de modo a não 'quebrarem' a página no IE 7.0.

Parece-me haver um consenso em torno de que raciocinando de maneira geral a solução consiste em retirar todos os 'hacks' para IE das folhas de estilo gerais e serví-los em uma folha de estilos separada via comentários condicionais.
Foi esta a solução que eu adotei para o CSS para Web Design e você pode fazer o download das folhas de estilo geral e com 'hacks' usadas no site, nos links existentes na coluna de navegação.
E também ver como servir uma folha de estilos via comentários condicionais olhando o código fonte desta página e inspecionando o que esta dentro da seção head.
Mas atenção, você deve estar usando IE para ver o código, pois para um navegador Standard o código XHTML 1.1 das páginas do site é servido com uma seção head diferenciada e como aplicação XML, assim o comentário condicional não estará ali.

Mais sobre este assunto em: Comentários Condicionais