Campo de busca

Categoria Front-End

Table vs. Div – O Bom, o Mal e o Feio

Table vs. Div – O Bom, o Mal e o Feio

Por | 05 de maio, 2009 | 26 comentários

Hoje em dia muito se fala em abandonarmos a estruturação de site baseada em Table e convertê-la para Div. Mas você sabe por que fazer essa conversão de estruturação de site? Certamente não é uma briga de faroeste, mas é um assunto que assombra os desenvolvedores web.

Quem é quem?

Antes de falarmos qualquer coisa, vamos saber o significado e qual o propósito de cada um em um documento HTML.

Table
A tag <table> define uma tabela dentro de um documento HTML. Ela é usada para listar dados tabulares dentro de linhas e colunas. A tag <tr> define a linha e a tag <td> define a coluna da tabela. Há outras tags utilizadas na tabela, como o <thead>, <tfoot>, entre outras, para torná-la mais semântica.
Div
A tag <div> define uma divisão ou uma seção em um documento HTML. É usada geralmente para fazer blocos de elementos, dispondo organizadamente as informações dentro do layout, que são formatadas com CSS. A tag <div> é controlada pela CSS através de um ID, Class ou pela própria tag.

Table, o Feio

Há muito tempo atrás, em uma web muito distante… ou talvez não tão distante assim (pra não dizer atual), as pessoas utilizavam a tag <table> para dispor os elementos dentro da página HTML. O site era feito rapidamente através da parte visual de algum editor HTML, como o FrontPage ou Dreamweaver por exemplo, e não havia necessidade de testar em vários navegadores, pelo fato dos navegadores interpretarem igualmente a tag <table>.

Porém, essa rapidez tem um preço: Código de difícil manutenção. Um site estruturado com a tag <table>, consome mais tráfego e torna-se confuso para manutenção e mecanismos de busca.

Dizem que quando um site é estruturado com a tag <table>, o site é compatível com todos os navegadores e que demora muito menos para ser estruturado do que um site estruturado com a tag <div>… mas será que é isso mesmo?

“Um site que você faz utilizando a tag <div> em 5 horas, eu faço em 1 hora utilizando a tag <table>! É rápido e de fácil manutenção. É só colocar mais uma tabela dentro de outra tabela que está tudo resolvido! E se a tabela estourar, coloco mais uma tabela para consertar a outra.”
 

- Webmaster que utiliza Table após diagramar um site com 10 mil linhas de código (e que só ele entende).

Div, o Bom

Um site estruturado com a tag <div> ganha semântica, fácil manutenção, menor tamanho da página e melhora o indexamento para os mecanismos de busca. Porém o fato de ter que testar em todos navegadores, ainda atrapalha os desenvolvedores.

Com a utilização da tag <div> e das CSS, o termo Tableless a cada dia ganha mais força na web brasileira. Desenvolvendo um site seguindo os padrões estabelecidos pelo W3C, você disponibiliza a todos, independentemente do navegador utilizado ou da necessidade especial que o visitante possui, uma experiência agradável ao visitar o site.

Div, o Mal

A tag <div> não possui só o lado bom, mas também o lado mal. Você hoje, querer fazer a transição de Table para Div, é algo trabalhoso e que, infelizmente, isso se deve a pessoas que não possuem conhecimento nenhum de internet. Mas como asssim?

O navegador da Microsoft, Internet Explorer 6, é conhecido por dificultar esta transição, pois o mesmo não possui uma boa compatibilidade com a dupla Div + CSS. E como vocês sabem, o IE6 é aquele navegador que já vem instalado na máquina daquela pessoa que não possui conhecimento nenhum em informática e que acha que a internet se resume a Orkut e e-mail, sendo assim, você acha que essa pessoa terá o trabalho de atualizar o seu navegador? Infelizmente, não.

Ainda hoje, mesmo com o lançamento do Internet Explorer 8, uma grande parte das pessoas acessam a internet usando o Internet Explorer 6 e 7, sendo assim, não podemos frustrar a experiência desses usuários que utilizam os navegadores antigos, impossibilitando-os de navegarem e de acharem as informaçãos que procuram, mas devemos incentivá-los a atualizarem os seus navegadores para que eles tenham uma experiência mais rica e segura ao navegar pela internet.

“Maldito IE6! Não tem como fazer isso utilzando a tag <div>... acho que vou usar uma tabela aqui. Só uma tabela não faz mal e ninguém vai perceber.”

 

- Webmaster que começou a fazer a transição de Tabela para Div

Links úteis

Veja abaixo uma lista de links úteis para você estudar melhor as tags do HTML. Bom estudo e até o próximo artigo!

 

Deixe um comentário

Queremos saber o que você pensa sobre esse post! Ficaremos felizes se você nos deixar um comentário :-)

Tenha em mente que os comentários são moderados, e os links possuem rel="nofollow". Então por favor, não faça spam de palavras-chave, senão o seu comentário será excluído. Obrigado!

 

[26] Comentários  

Rogerio Gomes Pereira

Concordo com você Rodolfo nesta questão do uso do table. Isto foi largamente utilizado e há sites de difícil manutenção. Um site com muitas tables fica praticamente criptografado (ninguém entende como está montado) e impossível de se fazer qualquer manutenção.

14-05-2009 às 12:59 Responder

Ricardo Lopes

O IE é um grande problema, já faz anos e não resolvem, os sites deveriam tomar a iniciativa de banir o browser.

15-05-2009 às 15:51 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ricardo Lopes

Ricardo, creio eu que o IE6 seja um grande problema e o IE7 um “médio” problema. O IE8 não causa tantos problemas na hora da estruturação de um site em Tableless, mas mesmo assim está um nível abaixo dos navegadores Firefox, Chrome e Opera.
Há sites que aderiram a campanhas que defendem a “morte do IE6?, hehe… e isso é o que todos os desenvolvedores querem!

15-05-2009 às 16:08 Responder

Edno Cretes

Vamos lá, vivo isso no meu dia-a-dia, pois só vendo se o que apresento tem qualidade e conteúdo e sei que vou melhorar demais se contar sempre com o apoio da Princi, vocês são bons, mas BONS mesmo no que fazem.

Valeu e sucesso,
Edno.

16-05-2009 às 17:24 Responder

Cristo

Matar um browser que pessoas de 40 anos usam em suas empresas legadas? É melhor matar essas possoas e destruir suas ao invés do browser, pois elas não vão mudar (e tambem sair matando gente trabalhadora é crime e dar cadeia e vai contra a lei).

Mesmo dizendo a elas que se usarem o Firefox com o plugin FasterFox terão um acesso quase que instantaneo, elas não acreditarão, mesmo sendo verdade, o ideal é fazer uma página para o IE6 e outra para o resto, contudo isso seria trabalho e stress dobrados, ou então utilizar frameworks que dêem uma boa compatibilidade com a maioria dos browsers como JQuery (que as vezes te deixa na mão) ou uma linguagem de servidor para construir sua página de acordo com a necessidade como PHP, Java, Ruby e ou Python (que no caso usando qualquer um deles será bem mais vantajoso que construir página atrás de página) contudo existem muitos clientes que pagaram produtos sem este suporte.

No mais prefiro fazer programas em Java para Desktop ou Celular que fazer designer de página html, já que farei para o celular ou computador de um dado cliente e não uma página para um conjunto enormes de browsers independentes.

Ou então joga tudo no lixo e faz para o IE6 (muito trabalho, stress e páginas ridículamente desorganizadas em matéria de código).

18-08-2009 às 09:51 Responder

Joseph Dionísio Biesek Rocco

Há tempos tomei uma decisão. Fazer sites simples e bonitos para todos os browsers,

e fazer sistemas complexos ultilizando o máximo das frameworks limitando elas somente num browser.
E pra isso geralmente ultilizo o IE8.

O IE6 realmente concordo que estava muito atráz dos concorrentes, mas o IE8 ganha em alguns detalhes, pelo menos nos meus projetos.

Quem usa IE6 não tem noção nenhuma de internet, esse tipo de pessoa não merece uma “boa experiência”. Não é preciso matar ninguém para fazer com que todos usem browsers atuais, é necessário as pessoas entenderem que as coisas evoluem na area da informática e elas necessitam seguir essa linha de evolução.

Se os desenvolvedores sempre forem amistosos com browser`s antigos nunca teremos uma evolução real da internet. Nós que somos a base da internet, se desenvolvermos ao ponto de exigir mais dos browser`s os browser`s deixarão de ser meras ferramentas que mostram textos na tela com alguns plug-ins precários do inicio do século XXI anexados ao conteudo.

03-09-2009 às 09:22 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Joseph Dionísio Biesek Rocco

Joseph, antes de mais nada, obrigado pelo comentário!

A estratégia de fazer um site simples e bonito para não ter grandes dores de cabeça na hora de verificar o site em navegadores antigos, é uma boa dependendo do caso, pois você pode acabar limitando muito a experiência de quem utiliza navegadores mais atuais, pois você poderia oferecer uma experiência melhor a eles, utilizando recursos mais avançados, porém, fazendo isso, talvez a experiência para quem utilize navegadores antigos, não seja muito boa. Isso é algo que deve ser estudado com cuidado antes de fazermos um site, para que você não ofereça uma experiência desagradável aos que utilizam navegadores antigos e ao mesmo tempo, não limite a experiência de quem utiliza navegadores atuais.

Em sistemas, nós da Princi Agência Web, quando damos o treinamento para o cliente, já atualizamos o navegador do mesmo e colocamos uma verificação, para saber se o usuário está entrando no sistema com um navegador antigo ou não. Se ele estiver usando um navegador antigo, um aviso é dado, para que ele possa atualizar o seu navegador facilmente e aproveitar todos os recursos dos nossos sistemas.

Essa prática de dar esse aviso ao usuário, quando ele navega em determinada página com um navegador antigo, será utilizada futuramente em nosso sites, para “forçar” (e não “matar”, hehe) o usuário a atualizar o navegador, pois o usuário que visita o site pode até ter vontade de atualizar seu navegador, mas talvez ele não saiba que há uma versão mais nova do mesmo.

03-09-2009 às 10:08 Responder

Wellington V. Santos

Parabens pelo Post, bastante explicativo, estou justamente nessa transição entre e e apesar da dificuldade em fazer entender as divs e fazê-las funcionar em diferentes navegadores, ja me pergunto onde estava com a cabeça que não fiz isso antes. Enfim, antes tarde que mais tarde. valeu, abraço.

07-10-2009 às 14:59 Responder

Alessandro

Ótimo post, obrigado!
Gostei do texto.

05-02-2010 às 10:36 Responder

Luiz Ricardo

Seu artigo vem levantar uma dúvida com o que estou a desenvolver, só que no meu caso não são páginas web complexas e sim formularios, no caso é um aplicativo de banco de dados web.

Estou tendo uma certa dificuldade de lidar com as , no meu caso só quero alinhar grade de dados e outros controle, o que você aconselha?
a é fácil de usar, e as quando tenho que posicionar elementos como grade de dados uma ao lado da outra surge uma certa dificuldade, o float em certas situações não funciona ou funciona em um browser e em outro não.

Não sou desenvolvedor web, sim de desktop.

Se puder me passar alguma informação de fontes de pesquisa, e mais especificamente com relação a desenvolvimento de formularios web, ficarei muito grato.

02-10-2010 às 10:59 Responder

Elias F. Rodrigues

Desenvolvo para web já algum tempo e concordo em parte. Sobre a criação de layouts com div é bem mais maleável.

Sobre a empressão “table feio e de difícil manutenção não concordo” Pois um site usando tabelas é de mais fácil manutenção pois temos controle de onde começa e temina uma parte do site e sua posição. Acredito que um mix do div e table sem a melhor opção.

20-03-2012 às 10:53 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Elias F. Rodrigues

Elias, obrigado pelo seu comentário!

Sobre usar tabelas para a estruturação de site, eu acredito que seja de uma manutenibilidade menor, pois você irá escrever mais linhas de código do que se estruturasse o site através das divs. Para exibir dados tabulares, nada melhor que a tabela mesmo.

Abraço!

20-03-2012 às 12:24 Responder

Flávio Cavalcante

Só uso sites feitos com tableless. As tabelas acho que podem ser usadas dentro de artigos, num eventual quadro, pra algo isolado, fora isso, não vejo mais a necessidade, pois tudo é possível fazer usando divs e css.

Abraço.

16-08-2012 às 19:23 Responder

Renato Junio

Deixo minha experiência em desenvolvedor a 20 anos, desde da idade pré rrsrsr! Sempre resolvi meu pros com tabelas, olha que os sites que vendo são complexos, rápidos e semanticos, agora com as regras w3c faço vários em div + css sem pro também, só é mais demorado demais, mais fica ótimo! Em relação aos códigos quem mexe com isso os lê brincando seja tabela ou div, no final o que cabe é o projeto redondo. Abraços.

17-07-2013 às 11:40 Responder

rafael de souza dutra

eu kero saber como eu devo fazer pra colocar um menu que esta como div,numa tabela simples,se eu tenho que modificar toda minha estrutura da tabela,ou nao ,se puder ajudar eu agradeço,um abraço.....

30-10-2013 às 10:23 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a rafael de souza dutra

Você tem algum código para nos mostrar?

02-12-2013 às 14:32 Responder

Mariana

Adorei post virei fãn do blog...mas ainda bem que o Brasil adorou rapido tableless...sempre estamos em busca de uma internet mais bonita e usavél.

18-12-2013 às 11:39 Responder

Cin

Oi Rodolfo, tudo bem?

Li seu artigo sobre div e table no blog da Princiweb, e fiquei confusa em um ponto. Você diz que os navegadores interpretam igualmente a tag table, mas logo abaixo você diz que "essa rapidez tem um preço: Código de difícil manutenção e restrição de navegadores".

Se todos os navegadores interpretam essa tag, como pode haver restrição de navegadores?

Você poderia me explicar melhor esse ponto?

10-03-2014 às 20:17 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Cin

Oi Cin, tudo certo e com você?

Bom, na verdade não há restrições nos navegadores, já que, como você mesma disse, todos os navegadores interpretam essa tag.

Atualizei o post com base no seu comentário, valeu! :D

12-03-2014 às 11:20 Responder

Rafael

Em resposta a Rodolfo Pereira

Olá Rodolfo tudo bom?
Eu tenho que montar um formulário, pensei em usar divs pois tenho que deixar igual a imagem abaixo, mas está osso para definir suas orientações na página, mas usar tables tbm não sei se é o melhor caminho, onde eu aumentaria o tamanho das colunas e linhas... vc poderia olhar este modelo e dar sua opinião por favor?
http://i58.tinypic.com/2lkblad.jpg
Caso não consiga ver a imagem, use o link:
http://www.guj.com.br/java/308793-layout-de-tela

28-07-2014 às 14:22 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rafael

Bom, pelo visto você já resolveu, certo?

Malz a demora hehe. Abs!

20-08-2014 às 18:08 Responder

Eduardo

E sobre usar uma mistura com frames e divs? É melhor ou é mais desorganizado? Estou no começo do meu curso de TI, e por enquanto só desenvolvi sites com frame, gostei do resultado, de como as coisas fluem, e da compatibilidade, além de ser muito maleável e ser difícil apresentar falhas. Eu geralmente uso um frame para o cabeçalho, um para menu e um para o corpo do site, que é onde as paginas serão exibidas. Se é um site que possui postagens no estilo de blog eu uso uma div que será a área da postagem.

16-12-2014 às 15:02 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Eduardo

Hm, neste caso que você descreveu não é recomendável utilizar frames.

O que eu recomendo é você dar uma olhada no código fonte deste site http://www.medicamenta.com.br/ para dar uma estudada.

Abs!

07-01-2015 às 11:51 Responder

Nilson

O que acontece se eu montar o layout do site dentro de tabelas com o DREAMWEAVER CS6, e depois converter as tabelas em DIVs AP ?

Para app de celular, posso usar este metodo também?

É que sou DiNOSSAURO da INTERNET e ainda tenho dificuldades para css, etc... e não são sites ou app complexos, são bem simples

Obrigado

15-06-2015 às 11:15 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Nilson

Fala Nielson,

Então, não conheço nenhuma forma de converter tabelas para div. Sinceramente, acho melhor você investir um tempinho para aprender a não utilizar tabelas para estruturar uma página... você consegue :D

Abs!

26-06-2015 às 11:00 Responder

Nilson

Em resposta a Rodolfo Pereira

O Dreamweaver faz isso... tabelas para DiV Ap...

26-06-2015 às 11:41 Responder