Categorias
Tech

O que é Tableless?

Apesar de muito utilizada atualmente no meio da informática, principalmente em anúncios de empresas que desejam profissionais de webdesign, muitas pessoas não estão familiarizadas com a expressão Tableless.

Então vamos começar por onde o problema começou.

WYSIWYG (ou What You See Is What You Get) é uma expressão utilizada para definir programas que demonstram na tela exatamente o que você verá no resultado final. Essa expressão começou a ser utilizada para programas editores de texto, porém muitos foram (e são) os programas geradores de HTML que atuam da mesma forma, escondendo o código fonte da página de internet por trás da visão final. Um exemplo? O Adobe Dreamweaver.

No começo da popularização da internet, muitos iniciantes utilizaram esse tipo de programa para publicar sua primeira home page na grande rede. O Microsoft FrontPage foi um dos primeiros que eu conheci.

Acontece que esses programas (como o FrontPage, por exemplo) baseavam a estruturação de seu código em tabelas (ou tables). Ou seja, o que você fazia na tela gerava tabelas no código fonte para ficar do jeitinho que você via. Se você queria colocar uma imagem do lado da outra, gerava-se uma tabela com duas colunas e uma linha. Até aí, tudo certo.

O problema é que existe algo chamado semântica no html. Ou seja, cada tag do código fonte tem seu objetivo, ela existe e atua por um motivo.

No caso da tag <table> (referente à construção de tabelas) ela serve para tabelar as informações, ou seja, fazer uma tabela. Simples assim, como no Excel, por exemplo, sabe? Ou aquelas que você faz pra marcar quem está ganhando no jogo de cartas… Ela não serve para você estruturar o lay-out da página, dividir o menu, ou colocar aqueles gifs animados de personagens de anime ou games.

E é daí que vem a expressão Tableless ou, em português, Sem Tabela.

Falando de forma bem básica, um lay-out tableless é semântico e se utiliza dos blocos (ou divs) para estruturação da página.

Mas você pode perguntar o porquê disso. Eu lhe respondo, para que a página possa ser acessada por tudo e todos.

Como assim? Simples, se um browser é feito para pessoas com deficiência visual, ele usará a semântica para ler as tags html e passar a informação correta ao usuário.

Outra vantagem está em dispositivos móveis, um website tableless tem uma chance muito maior de encaixar corretamente na sua pequena tela.

Ainda existem muitas outras dicas para quem quer usar tableless, como por exemplo, não formatar NADA no código fonte. Para isto serve o CSS, ou Cascading Style Sheets. Mas isso fica para outro post.

Por Marcus Beck

Quadrinista, desenvolvedor de software e criador da Fliptru.

4 respostas em “O que é Tableless?”

hehehe tem toda a razão. Eu achei um livrinho de HTML (xerocado e com umas 10 páginas) do meu irmão e comecei a mexer no bloco de notas… mas nem chamava ele de programa. uAHuAHAUhuA Conheci o FrontPage na casa de um amigo, mas só fui usá-lo tempos depois.

“Falando de forma bem básica, um lay-out tableless é semântico e se utiliza dos blocos (ou divs) para estruturação da página.”

Acho que você se equivocou amigo! Tableless e semanticas são coisa distintas (porém andam juntas)

Resumindo, nem todo site tableless é semantico e nem todo site semantico é tableless.

Tableless, como o nome diz se resume em: Página estruturada em html que não possuí tabelas!

(lembrando que tabelas é algo correto de se usar quando se faz um relatório… é algo semantico usar para isso!)

Bom, aconselho você ler mais sobre o assunto! Mas é comum fazer essa confusão! Afinal Tableless foi mal difundido/interpretado por essas bandas!

Até!

Valeu o toque, Rafael.

Sempre levei o tableless e a semântica como uma coisa só, talvez por ter entrado nos dois universos ao mesmo tempo. A maioria dos defensores do Tableless o defendem pela fato de que ele é naturalmente mais semântico.

Infelizmente não estou mais nessa área, portanto agora não vou me aprofundar muito mais no assunto.

Obrigado pelo comentário! _o/

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *