Você sabe usar tabelas?
Tabelas. Um assunto muito pertinente na web e, para muitos, essencial na construção de seus layouts.
Um dos principais propósitos deste artigo é mostrar a verdadeira utilidade das tabelas: exibir e estruturar dados, na forma de linhas e colunas.
Com o tempo, esse conceito foi sendo confundido com a estruturação do layout do site em si, utilizando cores e imagens no fundo de células para compor um site, o que é totalmente errado.
A forma correta de utilizar uma tabela, como foi dito acima, é estruturando e exibindo dados, como uma lista de preços de produtos, etc.
E, para aqueles que ainda não conhecem a estrutura da tabela “por dentro”, abaixo vai um guia com as tags e a utilização semânticamente correta das mesmas.
Neste exemplo, a tabela é o modelo mais simples possível, com duas colunas e tręs linhas.
‹table›
‹tr›
‹td›Coluna 1, Linha 1‹/td›
‹td›Coluna 2, Linha 1‹/td›
‹/tr›
‹tr›
‹td›Coluna 1, Linha 2‹/td›
‹td›Coluna 2, Linha 2‹/td›
‹/tr›
‹tr›
‹td›Coluna 1, Linha 3‹/td›
‹td›Coluna 2, Linha 3‹/td›
‹/tr›
‹/table›
Agora, neste segundo exemplo, estaremos utilizando outras tags como ‹caption›, ‹th›, ‹thead›, ‹tbody› e ‹tfoot›
‹table›
‹caption›Título da Tabela‹/caption›
‹thead›
‹tr›
‹th›Nome da Coluna 1‹/th›
‹th›Nome da Coluna 2‹/th›
‹/tr›
‹/thead›
‹tbody›
‹tr›
‹td›Coluna 1, Linha 1‹/td›
‹td›Coluna 2, Linha 1‹/td›
‹/tr›
‹tr›
‹td›Coluna 1, Linha 2‹/td›
‹td›Coluna 2, Linha 2‹/td›
‹/tr›
‹tr›
‹td›Coluna 1, Linha 3‹/td›
‹td›Coluna 2, Linha 3‹/td›
‹/tr›
‹/tbody›
‹tfoot›
‹tr›
‹th›Rodapé‹/th›
‹/tr›
‹/tfoot›
‹/table›
Neste segundo exemplo, a tag ‹caption› define um título para tabela. As tags ‹thead›, ‹tbody› e ‹tfoot› funcionam como a estrutura básica do HTML ( ‹head› e ‹body›). E, uma coisa interessante disso é que se vocę colocar o ‹tfoot› em qualquer posição dentro da tabela, ele sempre aparecerá no final da mesma.
Outra tag que utilizamos neste segundo exemplo, é a ‹th› que serve como um “índice” para a linha onde ela está contida. Por exemplo, numa tabela de produtos, a célula com a tag ‹th› pode conter o nome dos produtos listados. E, um ponto muito importante da utilização destas tags, é o fato de deixar a sua tabela muito mais flexível na questão de estilização visual, através do CSS. Assim, vocę poderá trabalhar muito melhor com suas tabelas e estilizá-las mais facilmente.
Paulina André | 30/10/08 - 1:06 am
Gostei muito dessa matéria, me ajudou muito no trabalho sobre sites HTML que estou a desenvolver. Agora, sem querer abusar senhor Carlos, será que me podias enviar um código sobre como criar um carrinho de compras para o meu site? Agradeceria muito. Sou Angolana.