Bom primeiro eu vou mostrar como era uma tabela antiga sem semântica:

TITULO 1
TITULO 3
TITULO 3


TEXTO 1
TEXTO 2
TEXTO 3


RODAPÉ 1
RODAPÉ 2
RODAPÉ 3

Como vocês podem ver eu fiz uma tabela muito simples de 3 colunas , só para quem ainda não conhece eu vou explicar para que serve cada TAG.

<table> – A tag TABLE é o corpo da tabela dentro dela que vocês colocam todos os dados, ainda nele tem varias propriedades que podem ser integradas como cellpadding e cellspacing essas duas propriedades servem para tirar o espaçamento padrão que vem na TAG table e ainda tem várias propriedades que podem ser utilizadas.

<tr> – A tag TR ela sempre vem depois da TABLE porque ela é responsável de criar as colulas da tabela.

<td> – A tag TD ela é a celula da tabela é o lugar onde você o conteudos.

Agora é montar uma tabela seguindo as regras de semântica:

TITULO 1
TITULO 3
TITULO 3




RODAPÉ 1
RODAPÉ 2
RODAPÉ 3




TEXTO 1
TEXTO 2
TEXTO 3

Dá para ver como muda bastante mas estruturamente é a mesma mesma tabela somente o “ROPAPÉ” que mudou de lugar para ficar mais simples de entender eu vou explicar cada uma. As tags TABLE, TR, TD continuam mas agora adicionamos mais 4 tags e uma propriedade na tag TABLE.

SUMMARY – Essa propriedade serve para colocar “nome/titulo” da sua tabela.

<THEAD> -  essa tag é muito importânte porque nela que vai o cabeçalho da sua tabela.

<TFOOT> -  essa tag também é importate mesmo colocando ela abaixo da THEAD ela sempre vai ficar no rodapé da sua tabela.

<TH> -  essa th só funciona dentro da THEAD e TFOOT e o padrão dessa tag é negrito e centralizado.

<TBODY> – como o nome dela já diz ela é o corpo da sua tabela dentro dela podem ser colocadas as tags TR e TD.

Espero ter ajudado mas se vocês tiverem muitas dúvidas é só deixar um comentário ou mandar um email “chrdesigner@chrdesigner.com” que eu respondo até a proxima.

- Visualizar Exemplo

- Download do Arquivo