Tableless - Desenvolvimento inteligente com Padrões Web

05/09/2005
Geral

Uso correto das tabelas

O Henrique Pereira fez um artigo interessante que fala sobre como usar as tabelas e suas tags corretamente. Semântica de tabelas

Por

O Henrique Pereira fez um artigo interessante que fala sobre como usar as tabelas e suas tags corretamente.

Semântica de tabelas

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • Lucas TS

    Cara, acho que quem fez o artigo foi o Henrique C Pereira

  • Thiago Melo

    É verdade Lucas TS. O artigo "Uso correto de tabelas" realmente não é de minha autoria. Este artigo foi produzido por Henrique Costa Pereira, do blog Revolução e Etc. Acredito que ao indicar este artigo, o Diego se confundiu.

  • Márcia O. Carmo

    Ué.. deixa eu ver se entendi… usar TD não é semanticamente correto? Devemos usar TH?

  • http://www.cirofeitosa.com.br/ Ciro Feitosa

    Oi Márcia. O TD é usado também. O fato é que, o TH é usado para uma linha que sirva de cabeçalho em uma tabela. Ex.: Uma tabela com produto e preço, a primeira linha (produto e preço) seria o TH.

  • http://www.cirofeitosa.com.br/ Ciro Feitosa

    Publiquei algo parecido em Fevereiro deste ano. Segue link: http://www.cirofeitosa.com.br/post.php/formularios-acessiveis

  • Marcos Antonio Pellegrini Junior

    Utilizar tabelas, mesmo que de maneira semantica e com as tags respeitando suas designações não é algo que foge do conceito "TABLELESS"?

    Sendo que os dados tabulares podem ser exibidos da mesma forma sem usar as tabelas?

    Vejam, não estou criticando, é que realmente fiquei na duvida.

  • Alex Saueressig

    Dados tabulares DEVEM ser exibidos em tabelas

  • Diogo Chaves

    Parabéns ao Henrique pelo ótimo artigo, e ao Diego por divulgar o http://www.revolucao.etc.br para os visitantes do tableless :)

  • Marcos Antonio Pellegrini Junior

    Então seguindo o tipo de pensamento apresentado, um formulário, por exemplo, deveria ser feito sem tabelas?

    As tabelas deveriam ser usadas unica e esclusivamente para a apresentação de listas?
    Conceitualmente falando??

    Agora falando praticamente, o detalhe de tabelas não poderem ser carregadas enquando são criadas em alguns tipos de browsers não valida a criação de listas, dados tabulares sem tabelas?

  • http://www.revolucao.etc.br Henrique Costa Pereira

    Marcos Pellegrine, tabelas devem ser usadas sempre que você precisar literalmente, de exibir informações em dados tabulares. Há diversas técnicas de simular dados tabulares com DIVs e que podem ser utilizados quando, criteriozamente, não for uma "tabela" mesmo que possua o mesmo formato. Se você quer exibir um conjunto de quadros, com imagens que sejam links por exemplo, que não estão em ordem e não possuam relação entre si, como em uma galeria de fotos, na minha opinião você pode usar DIVs.

    O que deve nos guiar para escrever um código semântico, é definir aquilo que queremos exibir. Só após definir isso, poderemos escolher qual tag (ou conjunto de tags) devem ser usadas para obter aquilo que queremos. Mas tabelas serão sempre bem vindas quando você precisar de uma. Sem tabus.

    Abraço á todos e muito obrigado pelos comentários e críticas.

  • Diogo Chaves

    Olá Marcos,

    eu concordo com o Alex Saueressig, tabelas devem ser utilizadas para o que elas foram criadas: TABULAR DADOS (uma tabela com os resultados dos jogos da primeira rodada do brasileirão, uma grade de programação de algum canal etc.).

    Os formulários não deveriam ser feitos com tabelas, mas devido a complexidade de alguns formulários (para a disposição dos itens) a tabela ainda continua sendo utilizada em alguns casos (você fica com um código semânticamente "incorreto" mas com a apresentação desejada). Sobre formulários você vai encontrar N tópicos aqui no fórum do tableless discutindo a melhor aplicação.

    Sobre sua última questão das tabelas não poderem ser carregadas enquanto são criadas, eu não entendi o que você quer saber :p, espero que alguêm possa ajudar você com essa questão.

  • Marcos Antonio Pellegrini Junior

    Então seguindo o tipo de pensamento apresentado, um formulário, por exemplo, deveria ser feito sem tabelas?

    As tabelas deveriam ser usadas unica e esclusivamente para a apresentação de listas?
    Conceitualmente falando??

    Agora falando praticamente, o detalhe de tabelas não poderem ser carregadas enquando são criadas em alguns tipos de browsers não valida a criação de listas, dados tabulares sem tabelas?

  • Marcos Antonio Pellegrini Junior

    Desculpem a repetição da ultima mensagem, acabei me enrolando com as mensagens aqui.

    Mas legal, acabei esclarecendo algumas duvidas que tinha.

    Mas uma outra que surgiu foi: Ja que a utilização das tabelas em códigos semanticos é permitido, perde-se um pouco do conceito de tableless e ganhasse no conceito de código semantico, né?

    Pois essa idéia torna viavel a utilização de tabelas, desde que bem utilizadas, em qualquer código.

    Sendo assim o código deixa de ser tableless, não é?

  • http://www.revolucao.etc.br Henrique Costa Pereira

    "Tableless" na minha opinião, deveria ser iagual a "webstandards" ou "padrões web". Tableless é um nome (segundo o Diego) marketeiro, (e eficiente por sinal) que significa "não ESTRUTURAR sites em tabelas" o que é completamente difererente de "NUNCA usar tabelas". Como você pode ver em vários artigos do Diego como este (http://tableless.com.br/artigos/tableless.asp)
    ele explica muito bem isso.

    Ou seja, tables sempre serão bem vindas quando você precisar exibir dados tabulares!

  • Alex Saueressig

    Tenho um exemplo pro Marcos Antônio entender melhor a importância de exibir DADOS TABULARES em TABLE:
    vá no excel (ou algum melhor) e dirija-se à dados/obter_dados_externos/nova_consulta_à_web.
    No local da URL insira http://www.arvoresdeirati.com/listas/index.php?lista=irati (por exemplo)…
    Note que, após feita a consulta, ele puxou somente os dados dentro da table (julga-se isso o ideal).
    Imagina agora tentar obter dados externos, deste mesmo modo, em sites onde o layout é todo em table,tr,td… (melhor nem tentar..)
    Flw

  • http://dudufigueiredo.com/ Dudu Figueiredo

    Tableless não é apenas o ato de não usar tabelas para construção de layouts, mas é usar as outras tags respeitando sua verdadeira função, ou seja semanticamente.
    Ao meu ver, um título de um site estruturado em um <div> ao invés de uma heading tag, <h1>,

    exemplo:
    <div class="titulo">Meu Site</div>

    … é tão incorreto e incoerente quanto estruturar um layout em uma tabela.

    Mas se for apresentar dados que necessitam ser tabelados, como a classificação dos times de um campeonato de futebol, dai o uso da tabela, alem de aceitavel, é recomendavel.

  • http://www.arvoresdeirati.com/contato Alex Saueressig

    Olá Dudu Figueiredo…
    Eu também pensava que Tableless era muito mais que não usar tabelas para layout. Pensava que envolvia semântica e outras recomendações da W3C, mas o Diego falou que não (no podcast), então o que eu posso fazer, afinal, o "marketeiro" é ele. Mas eu acho que o Bruno Torres tem uma visão mais ampla (e aceitável) do termo Tableless…

  • http://www.san.pro.br/daniel Daniel Santana

    Bem, acho que um mínimo de noção de inglês acabaria com o assunto!

    Ou wireless tem que ser sem fio com semântica?

  • Alex Saueressig

    Não, não quero começar esta discussão.
    Obs.: sei inglês!

  • http://dudufigueiredo.com Dudu Figueiredo

    Alex,
    Ainda não ouvi o podcast, mas acho desanimador saber que o Diego não associa Tableless com Semantica, ouvirei o podcast e volto a comentar.

    Daniel, assim vc esta desviando o foco da questão, eu me refiro ao conceito Tableless , e não a seu significado ao "pé-da-letra".
    Você acredita que se eu almoçar sentado no sofá com o prato no colo, ao invés de comer sentado à mesa, eu estarei praticando "tableless" ??
    Vamos falar não da palavra, mas do conceito que ela passa…

  • http://chuck chuck

    :) ]

  • Eval()

    Alguem poderia ir direto ao assunto sem ficar enrolando?

    Seja direto sobre o que são Tableless, pois pelo o que eu entendi tableless nada mais é que uma técnica de criação de paginas sem a uso de tabelas mas sim div´s onde os dados ficam mais organizados e facil de trabalhar.

    Isso foi o que eu entendi, so falta não ser isso. Então eu sou burro mesmo e acabou a história.

  • Pingback: Tecnocracia : Estado Tecnológico

  • http://www.fabrica5.com.br Miguel Rosa

    Muito bom, é o primeiro saite que fala sobre table less e é table less(olhei seu fonte, parabéns!!!

  • Thalita_poly

    Eu queria saber quais os cuidados das tabela. pode me responder ?