Nível: iniciante
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:
<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:
<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
Reprodução não autorizada é fraude e dá multa. Lei 9.610 de 1998.
5 comentando:
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.
@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.
@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.
@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!
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!
Postar um comentário
Atenção!
Se não quiser usar login, use a opção Nome/URL, sendo que a URL é opcional. Comentários anônimos têm mais chances de serem descartados na moderação.
Após enviar você não verá seu comentário publicado na página imediatamente, portanto não precisa comentar duas vezes a mesma coisa.
Seja organizado: use a tecla Enter para separar os parágrafos e use tags para enriquecer o texto: <b> (negrito), <i> (itálico), <a> (link).
Por falar em links, eles só são aceitos no corpo da mensagem se tiverem TOTAL relação com o tema do post. Se quiser apenas deixar o link do seu blog, comente usando a opção Nome/URL.
Para ser notificado via Twitter quando eu responder ao comentário, basta assinar com seu @nomedeusuario.
Não respondo comentários por e-mail, portanto só deixe seu endereço no corpo da mensagem se quiser ser vítima de spam. Para mensagens privadas, use o formulário de contato.
Obrigada!