Vamos tratar de explicar o processo de criação uma barra de navegação simples, mas muito versátil que poderíamos incluir em uma página web. O trabalho é simples, se se dominam as tabelas do HTML, que como muitos saberão, são os principais elementos que temos a nossa disposição para planejar uma web, a parte das camadas.

O resultado que pretendemos conseguir pode ser visto em uma página a parte.

Referências: Em nosso manual de HTML temos toda a teoria e um pouco da prática necessária para dominar as tabelas.

As imagens

Vamos utilizar três imagens muito simples. Uma é a lateral esquerda dos campos dos links, outra a lateral direita, e um píxel transparente.

Com as imagens laterais vamos fazer o efeito de campo com a borda com esquinas suavizadas. Uma se utilizará na parte da direita e outra na esquerda. Com o píxel transparente utilizaremos algum truque de planejamento muito habitual em HTML, que consiste em colocar a imagem para criar um espaço de um tamanho definido por nós.

As imagens utilizam a transparência do GIF para poder criar barras de navegação as quais podemos aplicar distintas cores, facilmente editáveis se utilizamos uma folha de estilos.

A tabela com o link

Vamos dividir o problema em várias partes para que seja mais fácil de entender cada uma delas e o efeito global. Agora vamos ver como fazer uma aba. Ao reunir várias abas criaremos a barra de navegação.

As abas se criam com este código HTML:

<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="imagens/esq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="imagens/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="imagens/der.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="imagens/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>Opção</td>
</tr>
</table>

O que dá como resultado este efeito:

		Opção

Como detalhes do código anterior podemos assinalar que se utiliza uma classe para definir o estilo da aba. As classes são uma possibilidade das folhas de estilos. Uma classe não é mais que um estilo definido, que podemos aplicar a diversos elementos do HTML. Definem-se com um código como este no cabeçalho do documento HTML:

<style type="text/css">
.op{ font-size:10pt;font-family:verdana,arial;background-color:#ff8800;}
</style>

Assim estamos definindo que os elementos dessa classe tenham tamanho de letra 10, fonte verdana, ou em seu padrão, arial, e fundo de cor alaranjado.

Outra coisa sobre a que queremos chamar a atenção é o uso do píxel transparente. O que se utiliza em primeiro lugar está para criar a linha da borda de cima da aba, apesar de que a cor negra é dada pelo atributo bgcolor="000000" que tem a célula. O outro píxel se coloca para fazer com que esta espaço onde se colocam as letras seja suficientemente alto.

Por último, dizer que a tabela não tem borda e os atributos cellspacing e cellpadding estão a zero, para que não tenha margens nem espaços entre as células. Uma proba que podemos fazer para entender a forma desta tabela é colocar a borda=1, com o que veremos a forma da tabela mais facilmente. Logo, voltaremos a colocar a borda=0 porque as bordas ficam muito feias.

Colocar várias abas juntas

Logo, para criar o efeito de barra de navegação, vamos criar uma tabela onde colocaremos os distintos códigos HTML das abas. Esta tabela é muito mais simples. Simplesmente tem um espaço para cada aba e uma célula na parte debaixo com a linha sobre a que aparecem as abas.

<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td COLSPAN=3 bgcolor=000000><img src="imagens/pontonegro.gif" width="1" height="1" border="0"></td>
</tr>
</table>

Esta tabela nos daria espaço para colocar três abas... dependendo do número de opções vamos colocar mais ou menos células na primeira fila. Posteriormente, deveremos colocar o código de cada aba dentro de cada célula. Com isso, estará realizada nossa barra.

Um exemplo de código completo pode ser visto a seguir:

<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>       </td>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/esq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="images/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="images/dir.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="images/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>Opção xxx</td>
</tr>
</table>
</td>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/esq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="images/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="images/dir.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="images/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>Outra Opção</td>
</tr>
</table>
</td>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/esq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="images/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="images/dir.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="images/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>O que deseje</td>
</tr>
</table>
</td>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/esq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="images/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="images/dir.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="images/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>Última opção</td>
</tr>
</table>
</td>
<td>    </td>
</tr>
<tr>
<td COLSPAN=6 bgcolor=000000><img src="images/pontonegro.gif" width="1" height="1" border="0"></td>
</tr>
</table>

O exemplo conseguido pode ser visto na barra de cima que aparece nesta página de exemplo.