Olá pessoal… hoje eu vou explicar um pouco sobre Tabela Semântica, esse post vai ajudar muito o meu amigo Alex que trabalha comigo lá na Mundo Click e também espero ajudar muitas pessoas que tem a mesma dúvida que a dele, então chega de papo e vamos começar o que interessa.
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.
