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 e restrição de navegadores. 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!
Loading ...