Busca

Carregando...

sexta-feira, 23 de outubro de 2009

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:

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

Posts relacionados