em
html5

Tabela Semântica no HTML5

Se você não entente muito a semântica de tabelas recomendo este post.

No HTML5 não precisamos fechar as tags: <tbody>, <thead>, <tfoot>, <tr>, <th>, <td>. Pessoalmente eu gostei, o código ficou bem mais limpo e sem atrapalhar a compreensão.

Exemplo

<table>
    <caption>Alguns super-heróis</caption>
    <thead> <tr> <th>Super-herói <th>Criador <th>Ano
    <tfoot> <tr> <th>Super-herói <th>Criador <th>Ano
    <tbody>
        <tr>
            <th>Batman
            <td>
                Bob Kane <small>(conceito)</small><br>
                Bill Finger <small>(desenvolvedor, não-creditado)</small>
            <td>1939

        <tr> <th>Green Arrow <td>Mort Weisinger<br>George Papp <td>1941
        <tr> <th>Superman <td>Jerry Siegel<br>Joe Shuste <td>1938
</table>

Referencia: W3C Tabular data.

Resultado

Alguns super-heróis
Super-herói Criador Ano
Super-herói Criador Ano
Batman

Bob Kane (conceito)
Bill Finger (desenvolvedor, não-creditado)
1939

Green Arrow Mort Weisinger
George Papp
1941

Superman Jerry Siegel
Joe Shuste
1938

Comentários

  1. Anderson,

    Não concordo que não fechar as tags seja uma boa.. Mesmo o W3C dizendo que pode, não é por isso que vamos perder a boa organização (que sem dúvida, faz o navegador renderizar melhor [ou mais rápido] a página) do XHTML.

    O W3C tb diz que podemos usar pontos (e qualquer outro caractere) no ID…

    <div id=”ola” class=”mundo”></div>
    <div id=”ola.mundo”></div]

    E aí, no CSS o seletor “#ola.mundo” vai pegar qual das duas DIVs?

    No mais, a “tabela semântica” é muito boa mesmo… mas tirar o fechamento das tags me deixa extremamente desconfortável. ;)

    por Thiago Belem Responder
    1. Achei legal e estranho ao mesmo tempo. xD

      Sobre o ID, acho que nesse caso o efeito seria igual class=”ola mundo”

      A vantagem seria de no lugar de fazer: <div class="post" id="post_1"></div>. Poderia fazer: <div id="post.1"></div>.

      Se fazer #post pegaria em todos post. e fazendo #post.1 pegaria somente o post.1.

      Não tenho muita certeza, acho que é isso.

      por Anderson Custódio de Oliveira — Responder
    2. Não é bem como imaginei, a única coisa que muda mesmo é a liberdade para usar mais carácteres no nome da class ou id, mas da para fazer acontecer o exemplo acima fazendo o seguinte: div[id^='post'] { }

      Poderia fazer id=”post-1″, seria a mesma coisa na prática.

      por Anderson Custódio de Oliveira — Responder
    3. Também concordo com o Thiago, tem muita coisa ainda pra vir por mais que já possamos adicionar tais tags particularmente acho que não é exatamente o momento, sem falar em alguns navegadores(IE) que poderiam se perder aliás que sempre se perde rsrsrs, brincadeiras a parte, mas vamos com menos sede ao pote.

      por Gilberto — Responder
  2. Até hoje não entendo o porque do html5 ter abandonado
    os conceitos do xhtml. Por que não lançar logo XHTML5?

    Fico imaginando uma tabela dessa com várias linhas. Como faço pra saber se estou no tbody, thead ou tfoot?

    Como um editor, tipo notepad++, vai exibir o highlight corretamente se as tags não tem fechamento e atributos que são declarados sem valores?

    Mesmo não sendo obrigatório, vou continuar declarando atributos com valores e tags com seus fechamentos. Acho difícil gerar um código mais fácil de ser editado do que dessa forma.

    Porém, vai ser aquela velha história cada um faz do seu jeito até que um dia se sinta a necessidade de padronizar. Ai quem sabe vem à tona o XHTML5?

    por Ramon Victor Responder
    1. Depois que postei fiquei até meio preocupado em parecer que eu estava querendo dizer que era uma “regra” do html5, parece que não. (:

      Isso que você disse é complicado mesmo, tipo indentação, eu queria usar tab em tudo, quando comecei no python acabei aceitando em usar 4 espaços, tinha gente que usava 2, mas 4 era uma grande maioria.

      Talvez eu usuária em projetos pessoais, pelos motivos que você citou não usaria tão cedo em projetos de clientes. (:

      por Anderson Custódio de Oliveira — Responder
    2. Só corrigindo. Se fosse uma versão nova de XHTML, seria o XHML3 já que a versão atual é a 2.

      por Ramon Victor Responder
    3. To imaginando quando pegar um projeto assim feito em tabala a cada linha vou ter que colocar linhas de comentário para saber a onde terminei uma tag..
      Mas que venha o HTML5..

      por Marcos Teotônio Responder
  3. Compartilho da mesma opinião do Thiago e do Ramon… não faz sentido não fechar a tag, isso pra mim não é semântico.

    por Fabiano Fonseca Responder
  4. Achei estranho tb, preferia que seguisse xhtml, mas tudo é uma questao de prática com o tempo estaremos habituados a desenvolver assim.

    por Deivid Marques — Responder
  5. Ola’s
    Semantica é algo bem complicado de discutir, acho muito estranho não fechar as tag’s da tabela, imagino isso em uma tabela dinamica, gerada por qqr linguagem de back-end, ficaria meio “estranho”, como não é regra prefiro continuar fechando as tag’s, acho q uma boa tabulação resolve o “problema” das tabelas.

    []’s

    por Mah Ortense Responder
    1. Fechar ou não a tag não causa diferença na semântica, a tag é a mesma, só não é fechada.

      O fechamento das tags de uma tabela é sempre previsível, com essa linha de raciocínio, creio eu, pensaram em fazer isso.

      Se você tem a linha de uma tabela.

      <tr> <th>São Paulo<td>SP<td>Brasil

      Você sabe que o término de um <tr> é na próxima abertura de outro, é a mesma lógica pra todas as tags, fechando estas tags você sempre vai ter o seguinte: </tr><tr>, </td><td>, </thead><tbody> e etc…

      :)

      por Anderson Custódio de Oliveira — Responder
  6. Eu acho isso inteligente, o código ficará mais limpo, porem isso é opcional não é?
    por que seria assim,
    vamos supor que o conteúdo de uma célula, seja em uma linha só, dai seria como um fechamento automático, e claro invisível
    outra que quando abrimos uma th não tem como abrir uma th dentro, então quando o browser encontra outra th, ou td é como se ouve uma dupla funcionalidade, ela fecha e abre,
    a mesma coisa para o thead, tbody, tfoot
    Só que se o conteúdo de um td for mais de uma linha seria legal nós fecharmos até mesmo para nós se encontrar direito no código.

    Sou contrário da opinião do Thiago Belém acho que seria até mais rápido a compilação deste tipo de código.

    Eu estava pensando, qual é o doctype correto para esse tipo de código?
    do HTML5 ?

    Uma coisa que eu gostaria que a w3c mudasse é a tag nav
    acho que a tag nav teria que ser uma opção de lista assim como ol e ul ela deixa legal o código né? é como se ela dissesse “olha aqui tem um menu” e dentro dela um ul, mas seria melhor ainda se ela dissesse “EU SOU UM MENU” e dentro dela as li, li, etc… Não concorda? rsrs eu sou a favor do código mais curto o possível.

    Belo post Anderson

    por Ofelquis Responder
  7. Show de bola o artigo, meus parabéns e também pelos comentários… só mais uma coisa, a especificação diz que a tag não é mais suportada pelo HTML5 apenas para frisar ;)

    por Marcos André — Responder
    1. Falto o nome da tag rsrsrs, estou falando da tag “caption”…

      por Marcos André — Responder

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>