Joomla! Amazônia - Tutoriais Joomla - O site mais completo de tutoriais para Joomla!

Tabelas auxiliam na visual ização de dados ou na divisão de sua página em setores. Entenda por uma tabela HTML como sendo semelhante a uma tabela que você desenharia numa folha de papel ou num outro programa de computador . O elemento principal de uma tabela é o table e aqui segue um exemplo simples de tabela:

<table border="1">
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>

Em HTML, as tabelas são divididas em linhas e células. Na tabela acima, a primeira linha contém as células Primeira e Segunda, enquanto que a segunda linha contém as células Terceira e Quarta. Dentro de um bloco table, os principais elementos que você utilizará são o tr, ou table row (linha) , e o td, ou table data (célula) . Dessa forma, podemos definir as linhas e as células da tabela. É mandatório que um bloco td esteja definido dentro de um bloco tr, ou seja, que as células estejam dentro de linhas.

No exemplo anterior, criamos uma linha com tr e em seguida, dentro de um bloco td, escrevemos o texto da célula (Primeira). Abrimos outro bloco td nesse mesmo bloco tr, onde colocamos o texto da segunda célula (Segunda) . Depois, fechamos a linha com o </tr> para em seguida abrir uma nova linha, onde criamos as células contendo os textos Terceira e Quarta.

O atributo border no elemento table serve para dar borda à tabela. Sem o ele não ficaria muito distinto onde começa e termina cada uma das células:

<table>
<tr>
<td>Primeira</ td>
<td>Segunda</ td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</ td>
</tr>
</table>

Dentro de um bloco td é possível colocar códigos HTML e inclusive criar até tabelas dentro de células! Veja só:

<table border="1">
<tr>
<td>Primeira</ td>
<td>Segunda</ td>
</tr>
<tr>
<td>Terceira</ td>
<td>
<table border="1">
<tr>
<td>Quarta</ td>
<td>Quinta</ td>
</tr>
</table>
</td>
</tr>
</table>

O código fica complicado o tanto quanto se queira.

Agora que você captou a essência das tabelas, vamos mostrar dois três atributos que podem ser utilizados em tabelas.

14.1 - Espaçamento entre células

Para controlarmos a distância entre duas células, utilizamos o atributo cellspacing, cujo argumento é dado em pixels:

<table cellspacing="20" border="1">
<tr>
<td>Primeira</ td>
<td>Segunda</ td>
</tr>
<tr>
<td>Terceira</ td>
<td>Quarta</ td>
</tr>
</table>

Para controlar o espaçamento vertical, utilizamos o cellpadding:

<table cellspac ing="20" cellpadding="35" border="1">
<tr>
<td>Primeira</ td>
<td>Segunda</ td>
</tr>
<tr>
<td>Terceira</ td>
<td>Quarta</ td>
</tr>
</table>

14.2 - Preenchimento de células

Pode ser que você queira uma tabela onde a primeira linha tenha duas ncélulas, a segunda com apenas uma célula e a terceira com três células.

Faremos o seguinte:

<table border="1">
<tr>
<td>Primei ra</ td>
<td>Segunda</ td>
</tr>
<tr>
<td>Terceira</ td>
</tr>
<tr>
<td>Quarta</ td>
<td>Quinta</ td>
<td>Sexta</ td>
</tr>
</table>

Percebeu como a tabela ficou cheia de buracos?! Para que as células preencham os buracos, utilizaremos o atributo colspan:

<table border="1">
<tr>
<td>Primeira</td>
<td colspan="2">Segunda</td>
</tr>
<tr>
<td colspan="3">Terceira</td>
</tr>
<tr>
<td>Quarta</td>
<td>Quinta</td>
<td>Sexta</td>
</tr>
</table>

Da mesma forma, se quisermos uma coluna com apenas uma célula e outra com duas, poderíamos usar o atributo rowspan. Veja a diferença entre usarmos e não usarmos o rowspan:

<table border="1">
<tr>
<td>Primeira<td>
<td>Segunda</ td>
</tr>
<tr>
<td>Terceira</td>
</tr>
</table>

14.3 - Largura de células e tabelas

Para escolher a largura de tabelas e células, utiliza-se o já conhecido atributo width, cujo argumento é idêntico para o caso de imagens:

<table border="1" width="200">
<tr>
<td width="30%">Primeira</td>
<td width="70%">Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>

Note que quando o width é utilizado com o elemento table, a largura referese à largura da página, enquanto que quando usado dentro de um td a largura é referente ao tamando da tabela. Isso tudo desde que o argumento seja dado em porcentagem e não em pixels.

14.4 - Uso de tabelas

Aqui exploramos poucas possibilidades das tabelas HTML. Você pode utilizálas para construi ruma simples caixa para exibição de informações como fazer uma página inteira utilizando tabelas. Existem muitos outros elementos e atributos para ajudá-lo nessa tarefa. Consulte as referências para mais informações sobre tabelas.

14.5 - Dicas

Os elementos <thead>, <tbody> e <tfoot> ainda são pouco usados devido ao suporte deficiente oferecido pelos navegadores antigos. Os navegadores modernos já suportam bem estes elementos.

14.6 – Elementos relativos a tabela