Neste artigo vamos estudar o modo de criação de uma página web medianamente avançada, na qual temos uma estrutura de colunas para mostrar os conteúdos. Para criar a estrutura de colunas utilizaremos tabelas HTML e explicaremos alguns dos truques típicos utilizados para a construção com tabelas.

A motivação deste artigo é que recebi muitas vezes consultas sobre o procedimento para criar páginas web com diferentes colunas. No manual de HTML se explicam todos os detalhes sobre a criação de tabelas, porém realmente não se conta como utilizá-las para construir uma página web. De modo que me parecia necessário apresentar um artigo prático para cobrir este assunto.

Também é importante dizer que a corrente atual de design de páginas web utiliza CSS e camadas, ao invés de tabelas, para o posicionamento dos conteúdos. Se você já conhece CSS possivelmente não se interessará ler este artigo. Nesse caso lhe recomendaria ler os conteúdos sobre a construção CSS. Porém, na prática, muita gente visita CriarWeb.com para aprender a fazer páginas web desde zero, e em um primeiro momento ou se só tiver conhecimentos de HTML, é mais simples começar a construir páginas usando tabelas.

Construção por tabelas passo a passo

As tabelas na verdade estão pensadas para apresentar informação tabulada, ou seja, usando filas e colunas. Entretanto, este uso pode ser estendido a toda à página web e podemos criar uma macro-tabela que englobe todos os conteúdos que serão mostrados na página inteira. Como as tabelas têm filas e colunas, nos servirão para criar várias áreas onde se mostrarão os conteúdos construídos como se fosse uma revista ou um portal.

Neste artigo vamos criar um exemplo medianamente simples de construção usando tabelas. Podemos vê-lo a seguir para termos uma idéia do objetivo buscado.

Como vimos, esta página está composta por um cabeçalho e um corpo de página. Para criar o cabeçalho e o corpo utilizaremos tabelas independentes. Fazemos isto porque com duas tabelas separadas se simplifica o exemplo, ou seja, por comodidade e porque se torna mais fácil de desenhar. Não obstante, como a distribuição de colunas e filas no cabeçalho e corpo neste exemplo é diferente, necessitamos utilizar tabelas independentes. Porém, a razão mais importante de colocar cabeçalho e corpo nas tabelas diferentes é que em alguns navegadores, quando há desenhos com tabelas, até que não se carregue o código da tabela inteira não se mostra nada. Se tivéssemos toda a página colocada na mesma tabela, o usuário não veria nada até que não se terminasse de carregar toda a página em seu navegador. Se separarmos as tabelas de cabeçalho e corpo conseguiremos que o cabeçalho da página se carregue e se mostre mais rapidamente e logo, embora demore bastante em carregar o resto da página com todo o corpo, pelo menos o usuário vê o cabeçalho e pode saber que a página está sendo toda carregada.

Neste caso, o cabeçalho é bastante típico, com o logotipo, um banner e uma barra de navegação horizontal. O código pode ser como o seguinte.

<table width="778" cellspacing="1" cellpadding="3" border="0" bgcolor="#000000" align="center">
<tr>
    <td width=180 align=center bgcolor="#ffffff"><img src="logo.gif" width="154" height="72" alt="Todo Clássico" border="0"></td>
    <td bgcolor="#ffffff" align=center><img src="banner.gif" width="468" height="60" border="0"></td>
</tr>
<tr>
    <td colspan=2 bgcolor="#ffffff" background="fundohorizontal.gif">
     
    <font face="Garamond">Portada | Noticias | Agenda | Artistas | Buscador | Comunidad | Tienda</font>
    </td>
</tr>
</table>

Se observarmos, o cabeçalho tinha um contorno negro. Isto o conseguimos de maneira similar a como explicamos em um artigo anterior de HTML: Caixa elegante e simples com HTML. Simplesmente colocamos uma cor de fundo preta à tabela, logo fazemos com que os campos estejam separados (cellspacing) de um píxel e definimos em branco a cor de todos os campos. Assim, a separação entre campos aparecerá em preto e os campos em branco. Neste caso definimos uma margem entre a borda do campo e o conteúdo (cellpadding) de três pixels, para que o conteúdo dos campos não se grude na borda.

A barra de navegação horizontal ocupa toda a largura do cabeçalho, por isso tem um colspan=2. Colocamos um fundo degradê para melhorar um pouco o desenho.

Outra coisa destacável é a largura da tabela, que fizemos de 778 pixels. Poderíamos ter feito um desenho que ocupasse toda a largura da página, porém criei um desenho não fluido com largura fixa. Este tipo de design em minha opinião é mais simples do que ficar bem. O tamanho de 778 pixels é porque é o máximo que se pode colocar que caiba em definições de tela de 800 x 600. Podemos conhecer mais sobre designs fluidos no artigo Páginas fluidas. Também temos outro artigo onde podemos saber mais sobre definições de tela.

Por sua vez, o corpo tem uma distribuição de três colunas. O código da tabela que englobaria todo o corpo é o seguinte:

<table width="778" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
    <td width=150 valign="top">
    <!--NAVEGADOR LATERAL ESQUERDO-->
    </td>
    <td width=10></td>
    <td width=484 valign="top">
    <!--CORPO PRINCIPAL-->
    </td>
    <td width=10></td>
    <td width=124 align=center valign="top">
    <!--LATERAL DIREITO-->
    </td>
</tr>
</table>

A técnica para fazer esta tabela é diferente que a tabela do cabeçalho. Esta tabela não tem a borda preta, para não recarregar demais o desenho da página. Porém, o mais importante é que as margens e o espaço entre as células (cellspacing e cellpadding) foram eliminados ou visto a zero. Então, os espaços que tem que haver entre as células foram colocados com células vazias de 10 pixel. Faço isto assim porque deste modo me resulta mais simples de calcular os espaços da tabela e porque assim podemos definir margens que não afetam a todas as células da tabela, e sim só as que necessitam.

A tabela tem três células onde se colocarão conteúdos e duas células com espaço ou margens para separar os três campos onde estão os conteúdos. Dentro de cada célula colocamos os conteúdos necessários. Na primeira irá a barra de navegação da esquerda, na célula do centro o corpo principal e no terceiro campo irá a lateral direita que utilizamos para colocar publicidade.

As larguras de cada célula, definidas pelo atributo width, são bastante típicas neste tipo de estruturas de três colunas. Ademais, podemos ver que todas as células têm o atributo valign="top" para que os conteúdos se situem na parte de cima da tabela.

O conteúdo de cada uma das células do corpo inclui mais código HTML, inclusive outras tabelas aninhadas. Em geral, podemos colocar em cada coluna o código HTML que necessitarmos com qualquer etiqueta, tendo em conta que a largura disponível está limitada à largura da célula.

Podemos ver o exemplo em uma página a parte. E também olhar o código fonte para ver o exemplo com a sua codificação completa.