1

O Wikipedia define tableless como:

Tableless é uma forma de desenvolvimento de sites que não utiliza tabelas para disposição de conteúdo na página sugerido pela W3C , pois defende que os códigos HTML deveriam ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados tabulares. Para a disposição da página o recomendado seria usar CSS.

Uma coisa que sempre me causa dor de cabeça é fazer alinhamento vertical de elementos. Quanto mais elementos diferentes na mesma linha, mais complicação.

Já pesquisei várias soluções e muita são 'meia-boca'. Porém tem uma que achei bastante satisfatória, é a seguinte:

    .t{display:table;border:1px solid red;}
    .td1,.td2{display:table-cell;vertical-align:middle;padding:10px;}
    
    <div class="t">
     <div class="tr">
       <div class="td1"><img src="https://www.cdn.renault.com/content/dam/Renault/BR/personal-cars/duster-oroch/packshot/duster-oroch-lateral-passageiro.jpg.ximg.l_4_m.smart.jpg"></div>
       <div class="td2"><p>ESSE É O MEU CARRO</p></div>
     </div>
    </div>
    

Porém o código acima apenas faz com que as divs se comportem como se fosse uma tabela... O código acima está em desacordo com o conceito de tableless?

Devo evitar esse tipo de implementação???

2 Respostas 2

1
+50

Porém o código acima apenas faz com que as divs se comportem como se fosse uma tabela... O código acima está em desacordo com o conceito de tableless?

Não foge do conceito de tableless, esse conceito visa muito mais exterminar o antigo modo de desenvolvimento de páginas através da tag que tinha uma série colspan, pouquíssimo css e o pouco que tinha era espalhado no meio da página. Além disso a tag table não foi criada para fazer layout.

O exemplo mais famoso que posso mencionar é o Bootstrap. Ele usa em diversos pontos do arquivo de estilo (CSS) o display table e table-cell em algumas classes como por exemplo:

  • input-group
  • input-group-btn
  • media-body
  • media-left
  • media-right

Enfim, não se preocupe com isso. O Tableless, como já disse, vem com o intuito de dizer que a tag deve ser usada para a finalidade dela e não para criar layout.

Devo evitar esse tipo de implementação?

Você pode continuar usando, mas sabendo que esse tipo de display não é compatível com todos os browsers e normalmente é utilizado como fix no layout. Se você encontrar outra forma de deixar seu layout do jeito que você quer, faça, caso não encontre, mesmo depois de pesquisar na net, utilize sem problemas. Afinal, como já mencionei o Bootstrap usa e ele é uma referência no que se refere a CSS dentro do padrão atual, inclusive quando se trata de responsividade (que não é assunto desta pergunta, mas vale ressaltar).

Deixei também um artigo bem interessante abaixo sobre o anti-herói do layout em CSS "display: table".

Espero ter te ajudado.


Somente uma observação:

Caso esteja com dificuldades na criação do layout, implementa o Bootstrap no teu projeto, ele é uma mão na roda e eu gosto bastante de utilizá-lo. Ele tem vários fix para diversos browsers e retira alguns padrões chatinhos do navegador.

Links que podem ajudar

Recomendo alguns artigos sobre display e o display do tipo table abaixo:

0

Adriano,

Mesmo não usando tabela você ainda está pensando "como tabelas" e não deveria ser assim, você precisa pensar na construção de layouts tableless como "blocos". Imagine a construção de um muro, cada bloco terá seu posicionamento relativo aos blocos ao seu redor, mas diferentemente de um muro na web você também pode usar o posicionamento absoluto que permite posicionar um bloco onde você quiser utilizando como referência um elemento pai.

O alinhamento vertical não será problema utilizando atributos css "margin" ou "padding" mas normalmente o alinhamento vertical se dará com a construção do seu site, isto é uma imagem poderá estar abaixo de uma serie de outros elementos como parágrafos, títulos ou até mesmo outras imagens e dessa forma se dará seu alinhamento vertical.

Mas se mesmo assim você quiser ter o controle da distância de um elemento em bloco para outro considere usar "margin" ou "padding", mas eles tem diferença

margin: define a margem de um objeto em relação ao dom (grosseiramente a janela) vale a pena ressaltar que as coordenadas na web iniciam no canto superior esquerdo. O atributo margin afeta a coordenada do elemento em relação ao dom ou ao elemento que ele é filho ou elementos ao redor, por isso você tem o controle das margens (esquerda, direita, superior e inferior).

padding: este é um pouco diferente de margin, pois este não afeta o posicionamento do elemento e sim do conteúdo dentro do elemento, parece confuso mas é muito simples imagine uma div com um paragrafo dentro, alterando o padding (preenchimento) da div eu consigo alterar o posicionamento do conteúdo dentro desse elemento, no caso o parágrafo.

para nunca se confundir entre margin e padding sempre pense "Margin é a margem do elemento e padding o preenchimento desse elemento"

Bom Adriano, essa é uma explicação um pouco longa, mas procurei ser o mais simplista e didático possível, claro que há muitas coisas e detalhes não mencionados bem como uma série de particularidades, mas dada a vastidão da pergunta eu procurei diminuir ao máximo o abismo entre uma pergunta tão abrangente e uma resposta sucinta.

abraço

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .