Neste artigo de HTML vamos desenvolver uma barra de navegação de uma maneira muito simples, na qual utilizaremos uma imagem para dar um pequeno efeito para fazer uma das bordas da tabela oblíqua. O efeito que buscamos 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.

A imagem

Utiliza-se uma imagem para apresentar uma parte da célula onde se colocam os links com um lado oblíquo. A imagem tem uma parte transparente e outra parte com o fundo branco, que tem que ser o mesmo fundo da página. Colocaremos a imagem sobre uma célula da mesma cor da barra. Então, a parte branca criará o setor oblíquo e a parte transparente deixará ver a parte da célula com a cor que tenha a barra criada. Cor que se pode variar facilmente com estilos ou com o atributo bgcolor das células.

A tabela

O truque para fazer a barra se baseia em intercalar as células com os links e as células com a imagem. Será criada uma tabela com uma só fila e com tantas colunas como forem necessárias para localizar as opções. Na verdade, como se pode supor, serão criadas o dobro de células que de opções. Para cada opção, colocaremos primeiro uma célula com a imagem e logo outra com o link.

O código será algo como isto:

<table border=0 cellpadding="0" cellspacing="0">
<tr>
       <td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
       <td class=op> Opcao   </td>
       <td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
       <td class=op> Opcao 2   </td>
       <td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
       <td class=op> Mais opcoes   </td>
       <td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
       <td class=op> O que seja   </td>
       <td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
       <td class=op> Mais coisas   </td>
       <td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
       <td class=op> Secao enésima   </td>
</tr>
</table>

Detalhes para estar atento:

Foi utilizado uma classe de estilos CSS para definir o formato das células. Na classe se define um estilo, que inclui a cor de fundo, tamanho de letra, tipografia, etc.

Nota: 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.

Também cabe destacar que para que o exemplo funcione corretamente é necessário colocar os atributos da tabela para que não tenha bordas nem margens, com border=0, cellspacing=0 e cellpadding=0. Por isso, para criar uma pequena margem antes do link, utilizam-se caracteres especiais  , que servem para colocar espaços em branco.

O exemplo em funcionamento pode ser visto em uma página a parte.