Como criar tabelas

Muitas pessoas se enganam e acham que tableless é desenvolver sites sem usar tabela alguma. Traduzindo, tableless significa menos tabelas e não ausência de tabelas.

O problema começou porque antigamente usávamos tabelas exageradamente, principalmente para fazer o leiaute do site. A divulgação do tableless começou e algumas pessoas confundiram, achando que não se pode mais usar tabela alguma. Errado. Para tabular dados tabela é a opção perfeita.

Alguns posts deste blog que usam tabelas:

• Como usar as cores em RGB
• Picasa ou Windows Live Galeria de Fotos
• Tabela de cores

As tags da tabela:

Tag	Função
<table> </table>	Obrigatória. Abre e fecha a tabela.
<tr> </tr>	Obrigatória. Abre e fecha a linha.
<td> </td>	Obrigatória. Abre e fecha uma célula.
<th> </th>	Opcional. Abre e fecha uma célula de cabeçalho.
<thead> </thead>	Opcional. Abre e fecha o cabeçalho.
<tbody> </tbody>	Opcional. Abre e fecha o corpo da tabela.
<tfoot> </tfoot>	Opcional. Abre e fecha o rodapé.
<colgroup> </colgroup>	Opcional. Abre e fecha um grupo de colunas.
<col> </col>	Opcional. Abre e fecha uma coluna.

Tabela simples:

Seguem um exemplo de tabela usando apenas as tags obrigatórias:

<table align='center'>
<tr><td>Unidade Federativa:</td> <td>Capital:</td></tr>
<tr><td>Distrito Federal</td> <td>Brasília</td></tr>
<tr><td>Goiás</td> <td>Goiânia</td></tr>
<tr><td>Mato Grosso</td> <td>Cuiabá</td></tr>
<tr><td>Mato Grosso do Sul</td> <td>Campo Grande</td></tr>
</table>

Unidade Federativa:	Capital:
Distrito Federal	Brasília
Goiás	Goiânia
Mato Grosso	Cuiabá
Mato Grosso do Sul	Campo Grande

Tabela complexa:

Segue um exemplo de tabela que usa todas as tags:

<table align='center'>
<colgroup>
<col style='background:#fffff0'></col>
<col style='background:#fff0ff'></col>
</colgroup>
<thead>
<tr><th colspan='2' style='background:#fff'>Centro-Oeste</th></tr>
<tr><th>Unidade Federativa:</th> <th>Capital:</th>
</thead>
<tbody>
<tr><td>Distrito Federal</td> <td>Brasília</td></tr>
<tr><td>Goiás</td> <td>Goiânia</td></tr>
<tr><td>Mato Grosso</td> <td>Cuiabá</td></tr>
<tr><td>Mato Grosso do Sul</td> <td>Campo Grande</td></tr>
</tbody>
<tfoot>
<tr><td>Total:</td> <td>4</td></tr>
</tfoot>
</table>

Centro-Oeste
Unidade Federativa:	Capital:
Distrito Federal	Brasília
Goiás	Goiânia
Mato Grosso	Cuiabá
Mato Grosso do Sul	Campo Grande
Total:	4

Este é um post introdutório sobre tabelas, é provável que eu volte nesse tema para mais detalhes. Se tiver alguma dúvida, deixe nos comentários, poderá servir como sugestão para o próximo post sobre tabelas.

Até mais!

Fonte: HTML Dog