Criar tabelas em HTML

Uma tabela é um conjunto de células organizadas dentro das quais podemos alojar distintos conteúdos.

À princípio, poderia parecer que as tabelas são raramente úteis e que podem ser utilizadas simplesmente para listar dados como agendas, resultados e outros dados de uma forma organizada. Nada mais distante da realidade.

Hoje, grande parte dos desenhadores de páginas baseia seu planejamento neste tipo de engenhoca. De fato, uma tabela nos permite organizar e distribuir os espaços da melhor forma. Pode nos ajudar a gerar textos em colunas como os jornais, prefixar os tamanhos ocupados por distintas seções da página ou colocar de uma maneira simples uma legenda a uma imagem.

Pode ser que a princípio seja um pouco complicado trabalhar com estas estruturas mas, se desejamos criar uma página de qualidade, mais cedo ou mais tarde teremos que nos ver com elas e nos dar conta das possibilidades que nos oferecem.

Para começar, nada mais simples do que pelo princípio: as tabelas são definidas pelas etiquetas <table> e </table>

Dentro dessas duas etiquetas colocaremos todas as outras etiquetas, textos e imagens que darão forma e conteúdo à tabela.

As tabelas são descritas por linhas da esquerda para direita. Cada uma destas linhas é definida por outra etiqueta e seu fechamento: <tr> e </tr>

Ainda assim, dentro de cada linha, haverá diferentes células. Cad uma dessas células será definida por outro par de etiquetas:<td> e </td>. Dentro desta etiqueta será onde colocaremos nosso conteúdo.

Aqui temos um exemplo de estrutura de tabela:

<table>
<tr>
<td>Célula 1, linha 1</td>
<td>Célula 2, linha 1</td>
</tr>
<tr>
<td>Célula 1, linha 2</td>
<td>Célula 2, linha 2</td>
</tr>
</table>

O resultado:
Célula 1, linha 1 Célula 2, linha1
Célula 1, linha 2 Célula 2, linha 2

NOTA: Até aqui vimos todas as etiquetas que necessitamos conhecer para criar as tabelas. Existem outras etiquetas, mas o que podemos conseguir com elas se pode conseguir também usando as que já vimos.

Por exemplo, assinalamos a etiqueta <th>, que serve para criar uma célula cujo conteúdo esteja formatado como um título ou cabeçalho da tabela. Na prática, o que faz é colocar em negrito e centralizado o conteúdo dessa célula, o que se pode conseguir aplicando as correspondentes etiquetas dentro da célula. Assim:

<td align="center"><b>Conteúdo da célula</b></td>

A partir desta idéia simples, as tabelas adquirem outra magnitude quando lhes incorporamos toda uma bateria de atributos aplicados sobre cada tipo de etiquetas que as compõem. Ao longo dos próximos capítulos nos aprofundaremos no estudo desses atributos de forma a proporcionar-lhe tudo que é útil e indispensável para um bom arranque em páginas.