Comece a criar tabelas simples em HTML

Tabelas HTML são de longe uma das melhores instruções HTML já criadas. A capacidade de formatar uma página da Web com instruções de tabela é incrível! Aprenda-os, use-os e ame-os!

Tabelas básicas:

Vamos pegar nossa lista de compras que usamos no tutorial da lista e transformá-la em uma tabela desta vez. Colocaremos os itens na primeira coluna e os preços na segunda coluna.

Este é o código que fez isso acontecer. O código real está à esquerda e a descrição em inglês está à direita. A descrição é recuada para mostrar a “estrutura” da instrução da tabela.

Confuso? Ok, vamos dar uma olhada na tabela acima. Esta tabela é realmente muito simples. Você constrói tabelas da mesma forma que lê um livro; da esquerda para a direita e de cima para baixo. A tabela começa com uma tag <table> e termina com uma tag </table> . Cada linha começa com uma tag <tr> e termina com uma tag </tr> . Cada parte dos dados da tabela começa com uma tag <td> e termina com uma tag </td> .

Mas, isso não é uma mesa, você diz! Não tem fronteira! Na verdade, é uma mesa. É uma tabela sem borda ou BORDER=”0″ . Este conceito é muito importante quando você deseja usar instruções TABLE para formatar suas páginas da web. Você nem sempre quer uma borda grossa. Ok, então vamos fazer uma tabela com BORDER desta vez.

A única diferença entre esta tabela e a anterior é a instrução <table> que se parece com a seguinte.

<table border="7″>

Bem fácil, hein? O tamanho da borda é representado em pixels. Ok, agora vamos obter um pouco mais CELLSPACING . Esse é o espaçamento entre as células da nossa tabela. Você também pode pensar nisso como a espessura da parede entre as células da tabela.

Isso parece muito melhor. Você pode ver a diferença? Novamente, a única mudança está na instrução <table> que se parece com a seguinte.

<table border=”7″ cellpacing=”7″>

O CELLSPACING , como o BORDER , também é medido em pixels. Mas, o texto parece muito perto das paredes da mesa, você diz! Ok, ok, podemos consertar isso também. Chama-se CELLPADDING . É o espaço entre o conteúdo da célula e as bordas das paredes celulares.

Ah, agora é assim que você queria? Não? Bem, eu tive que exagerar um pouco os números, mas isso foi apenas para tentar fazer um ponto. Espero que você consiga ver as diferenças. A tabela anterior foi criada com a instrução <table> mostrada abaixo.

<table border=”7″ cellpacing=”7″ cellpadding=”7″>

Imagens de enquadramento:

Agora queremos entrar nas coisas mais divertidas. Enquadrar imagens é uma ótima maneira de melhorar suas fotos. Faz com que pareçam saltar para fora da página. Aqui está a minha obra-prima de 5 segundos.

Arte muito legal, até faz minha imagem desagradável parecer boa. Aqui está o código que fez isso.

<table border=”7″ alt=””>
<tr>
<td><img src=”image.gif”></td>
</tr>
</table>

A tag <tr> e as tags </tr> podem ser omitidas se você desejar. Ele ainda vai funcionar muito bem. Os puristas do HTML provavelmente argumentarão que essas tags precisam estar lá. Se você se sente assim, como eu costumo fazer, então use-os.

Ou você também pode enquadrar suas fotos com texto como mostrado abaixo.

Neto, ah! O código é mostrado abaixo.

<table border=”7″ cellpadding=”10″>
<tr>
<td><img src=”image.gif” alt=””></td>
<td>Que<br>obra-prima!</td>
</tr>
</table>

Eu tenho mais uma nota sobre imagens de enquadramento. Se você estiver tendo problemas para centralizar sua imagem, tente o seguinte.

<td align=”center”><img src=”image.gif”></td>

Links de enquadramento:

Você também pode colocar links dentro de uma tabela. Na verdade, você pode colocar sua página inteira dentro de um monte de comandos de tabela se quiser e usando BORDER=”0″ ninguém poderia realmente dizer. Por que você quer fazer isso, você pergunta? Para formatar imagens e texto juntos em sua página; pense nisso. Ok, de volta ao enquadramento do link.

Aqui está o código que fez isso.

<table border=”7″ cellpadding=”10″>
<tr>
<td><a href="http://www.google.com/">Google.com</a></td>
<td><a href=”http://www.yahoo.com/”>Yahoo!</a></td>
</tr>
<tr>
<td><a href="http://www.jjwdesign.com/">Projeto JJW</a></td>
<td><a href="http://www.iproundup.com/">Resumo de IP</a></td>
</tr>
</table>

Bem, espero que você tenha gostado desta pequena seção sobre a declaração <table> . Há muito mais que você pode fazer com a instrução <table> do que é possível neste tutorial. Ainda assim, espero que isso tenha ajudado.

Link para este tutorial!

Você achou este tutorial útil? Em caso afirmativo, por favor, ajude-me a compartilhá-lo com outras pessoas, criando um link para ele. Basta colocar o código HTML abaixo em sua própria página da Web para criar um link para este tutorial.