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.

Visualizar Exemplo

Download do Arquivo

César Ribeiro
Written by

Hi, my name’s Cesar H. Ribeiro, I’m Brazilian and I live in São Paulo country town. I’ve been working with Web Development since 2006, I’m Web Developer Freelancer, my main specialty is deploying custom Web Sites using the WordPress platform with base, transforming PSD/Layouts for Custom Themes. In feel years with Developer Freelancer, I worked with many agencies around the world like: Brazil, Australia, USA, Germany and Austria.

Related Posts

  • Fala Césão…

    Muito bom… aposto q vai ajudar bastante o Alex. Tomara q ele leia!! 🙂

  • Nice post. I like your blog.

  • Hey very nice blog!! Man .. Beautiful .. Amazing .. I will bookmark your blog and take the feeds also…

  • hi, excellent web blog, and a very good understand! one for my bookmarks.

  • Thank you for another great article. Where else could anyone get that kind of information in such a perfect way of writing? I have a presentation next week, and I am on the look for such information.

  • È isso ai “gente boa” que Deus ilumine o caminho de todos vcs que estão sempre ensinando o que sabe aos pequenos querreiros; ajudando-os a se tornarem também bons profissionais da arte!
    Que todos nós que hoje estamos aprendendo, possamos seguir esse grande exemplo dos grandes mestre da nossa querida web.

    PARABÈNS.

  • Jarod Bloodsaw

    I’ve been browsing online more than 3 hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. Personally, if all site owners and bloggers made good content as you did, the net will be a lot more useful than ever before.