Tabela melhorada com imagens para barra de navegação

Uma tabela de links HTML a qual intercalamos imagens para transformá-la um pouco e torná-la mais vistosa. Utilizável em uma barra de navegação.

Tabela melhorada com imagens para barra de navegação ( Uma tabela de links HTML a qual intercalamos imagens para transformá-la um pouco e torná-la mais vistosa. Utilizável em uma barra de navegação.)

Portal

Introdução

Todos os assuntos

O que desejar

Mais epígrafes

Acabando os links

Entrar em contato

Neste artigo veremos como uma pequena imagem pode ser muito vistosa para construir uma barra de navegação para nosso website.

Vamos construir uma tabela como a que pode ser vista à direita, onde poderemos observar a utilização de imagens para camuflar o fato de que as células são sempre retangulares. As imagens aplicam um leve corte e eliminam uma esquina, com o qual melhora sensivelmente a aparência das tabelas.

Nota: Um efeito como este ou parecido pode-se conseguir de muitas maneiras, portanto temos que tomar este artigo somente como uma idéia das possibilidades e o modo de construir as tabelas.

As imagens

Acredito que vendo as imagens que colocamos na tabela se compreenderá um pouco a idéia a qual trabalhamos. As imagens estão ampliadas para que se possa observar melhor suas linhas. Podem criar-se com qualquer editor gráfico do qual dispomos.

Esta é a imagem que colocamos entre duas células de texto.

Esta é a imagem que colocamos na parte de cima da célula superior. Não podemos colocar a mesma que a do meio porque não fica bem.

Considerações para criar a tabela

Vamos colocar cada elemento na tabela em uma célula independente. Na primeira célula colocaremos a imagem destinada para a parte de cima, na segunda o texto do primeiro link, logo a imagem que colocamos no meio de cada célula de texto, seguida por outra célula com o texto do seguinte link, logo outra vez a imagem, logo texto, etc.

A tabela tem que ser criada de forma que não fique a separação entre as células, nem margens, pois caso fique não pareceria que as células da imagem e as do texto formam um mesmo bloco e apareceria desengonçada. Os atributos cellspacing e cellpadding ficariam a zero.

Ademais, as etiquetas <TD> e as das imagens, <IMG>, têm que estar no código sem espaços entre o meio, pois se não for assim tampouco conseguiríamos que as células ficassem coladas umas as outras.

No mais, nos resta dizer que aplicamos estilo às células de texto utilizando CSS (Folhas de estilo em cascata), que são muito mais cômodas e nos permitem definir uma única vez o estilo para todas as células no lugar de repetir as etiquetas e atributos HTML para cada uma.

Código da tabela

Colocamos o código de toda a página no lugar de somente a tabela para que possam ser vistas as etiquetas para colocar os estilos CSS, que aparecem no cabeçalho.

<html>
<head>
    <title>Tabela links legal</title>
    <style>
    .celula {background-color:#848ED3; font-size:8pt; font-family:verdana,arial; color:#ffffff; font-weight:bold; padding-left:3px; padding-bottom:2px;}
    </style>
</head>

<body>

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td><img src="acima.gif" width="155" height="6" alt="" border="0"></td>
</tr>
<tr>
    <td class="celula">Portal</td>
</tr>
<tr>
    <td><img src="meio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
    <td class="celula">Introdução</td>
</tr>
<tr>
    <td><img src="meio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
    <td class="celula">Todos os assuntos</td>
</tr>
<tr>
    <td><img src="meio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
    <td class="celula">O que desejar</td>
</tr>
<tr>
    <td><img src="meio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
    <td class="celula">Mais epígrafes</td>
</tr>
<tr>
    <td><img src="meio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
    <td class="celula">Acabando os links</td>
</tr>
<tr>
    <td><img src="meio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
    <td class="celula">Entrar em contato</td>
</tr>
</table>

</body>
</html>

Pode-se ver o exercício em funcionamento em uma página a parte.