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

10 comentários:

  1. Tabelas? Só me lembro do Dreamweaver. Para quem tem o programa fica mais fácil criar nele, depois copiar o código e colar onde quiser.

    ResponderExcluir
  2. @Castro, se você acha mais fácil fazer tabela no Dreamweaver sugiro repensar a legitimidade da expressão web designer que consta em seu nome de usuário do Blogger.

    ResponderExcluir
  3. @Helen Fernanda,

    Para qualquer um que trabalha com alguma linguagem de programação web é muito melhor clicar do que ficar digitando linhas e mais linhas de códigos.

    Agora, é de extrema importancia conhecer os códigos porque existem situações que terão que ser digitados manualmente.

    Prefiro digitar quando uso linguagens mais complexas como Php, Java, Action Script, Sql, etc.

    ResponderExcluir
  4. @Castro, então você não é webdesigner, é webdeveloper, seu foco é outro. ;)

    Já quem é webdesigner ou designer de interfaces tem que digitar linhas e mais linhas de código HTML sim. Confiar no Dreamweaver é cilada!

    Volte sempre!

    ResponderExcluir
  5. Oi Helen, peguei uma tabela logo quando tava começando com blogs, nem lembro onde, e não me desfaço dela por nada, hoje, ja consigo mexer nela, só nas tentativas, gostei muito do post, é bom conhecer no que se está mexendo, beijos!

    ResponderExcluir
  6. pow bacana mesmo helen gostei muito do seu site
    gostei mesmo de verdade
    da uma olhada no meu se puder
    http://anunciosedownloads.orgfree.com
    aki é o diego se quiser anunciar seu site entra la e posta la no forum vlw bjão !!!!!

    ResponderExcluir
  7. Ola Helem,
    Gostaria de saber como faço esse segundo código da tabela virar 3 ou 4 colunas...
    Aguardo Resposta!
    Um abraço!

    ResponderExcluir
  8. Mayra,

    Basta acrescentar, onde deseja, <td>alguma coisa</td>, que é o código de coluna.

    ResponderExcluir
  9. Nossa muito legal esse post! www.webbosque.blogspot.com.br

    ResponderExcluir

Posts relacionados