Legenda
Tabelas vrs CSS
HTML, Hyper Text Markup Language
No inicio só existia HTML e com o simples objectivo de partilhar informação na Internet. Nunca houve a intenção de HTML servir para layout de web sites. Apesar de tudo, no dia em que no HTML surge <table> as coisas mudaram, pois foi possível designers começarem a criar layouts, senso assim o HTML usado para mais do que a simples partilha de informação.
A <table> ajudou muito para a evolução dos websites, por fim existia uma maneira de designers puderem colocar os elementos e imagens no sítio que desejavam.
Mesmo assim criar layouts usando <table> pode ser um processo doloroso, <table> dentro de <table> cria um código pesado e deselegante.
CSS, Cascading Style Sheets
O CSS veio ajudar o "coitadinho" do HTML, e com inúmeras vantagens.
Não só o factor <table> mas, simplesmente o processo todo de dividir código com layout. Com CSS é possível atribuir um ID ou uma classe a qualquer tag em HTML e simplesmente criar o layout ou estilo para essa mesma tag usando CSS.
Este artigo não tem como objectivo entrar em pormenores, mas sim ajudar a mudança e deixar de uma vez por todas <table>.
Exemplo <table> layout
Vamos começar com um simples exemplo de um design de três colunas usando tabelas.
<table border="1" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td width="20%">Layout lado esquerdo</td> <td width="60%">Layout centro</td> <td width="20%">Layout lado direito</td> </tr> </tbody></table>
Simples não é? Pois bem, sem duvida que até é simples, mas será CSS ainda mais simples?
A maneira CSS
Então e como será em CSS? Mantendo o mesmo layout.
<div id="ladoesquerdo">Lado Esquerdo Layout</div> <div id="ladocentro">Centro Layout</div> <div id="ladodireito">Lado Direito Layout</div>
Hmm só três linhas? Parece simples, mas onde esta o truque?
Pois bem como disse no inicio CSS da vantagem de separar o código do layout e por isso existe umas linhas extras.
Existem três formas de inserir código CSS.
- Entre as tags <head>
- Directamente na tag que queremos modificar usando <style>
- Ou criar um link para um ficheiro css
Neste exemplo inserimos entre as tags <head>.
#ladoesquerdo {width:19%; float:left; border:1px solid "666;}
#ladocentro {width:60%; float:left; border:1px solid "666;}
#ladodireito {width:19%; float:left; border:1px solid "666;}
Então e as vantagens?
Pois bem, existe várias vantagens:
- O código está separado, qualquer mudança no layout pode ser feito só no CSS e não existe necessidade de mexer no HTML.
- Search Engines adoram CSS, pois normalmente a dimensão do ficheiro fica mais pequeno, e também porque a percentagem de conteúdo tem mais hipóteses de ser superior ao código.
Mas claro também existe as suas desvantagens:
- CSS ainda não tem o suporte total de todos os browsers no mercado.
- Por vezes o que se vê num browser (IE) e diferente noutros (Firefox / Opera).
Mas com os web standards estão cada vez mais a puxar os browsers para a mesma forma de mostrar os resultados, CSS parece ter um futuro garantido.
Mostra mais
Então e que tal mostrar um pouco mais das vantagens do CSS.
Ok, vamos então dar um espaço entre as caixas, mudar a cor de cada caixa, as cores das fontes, isto tudo sem tocar no código HTML.
#ladoesquerdo {width:15%; float:left; border:1px solid #666; background-color:#000099; margin-right:4%; color:#FFFFFF;}
#ladocentro {width:60%; float:left; border:1px solid #666; background-color:#3366FF;margin-right:4%;}
#ladodireito {width:15%; float:left; border:1px solid #666; background-color:#000099; color:#FFFFFF;}
Hmmm ok, mas ainda não me convenceram. Mudar cores, mudar os tamanhos, bastava apenas acrescentar mais uns elementos na tabela.
Então e mudar o layout sem mexer no código? Por exemplo, ter só um layout de duas colunas?
#ladoesquerdo {width:20%; height:100px; float:left; border:1px solid #666;
background-color:#000099; margin-right:4%; color:#FFFFFF;}
#ladocentro {width:75%; height:50px; float:right; border:1px solid #666; background-color:#3366FF; }
#ladodireito {width:75%; height:50px; float:right; border:1px solid #666; background-color:#000099; color:#FFFFFF;clear:right;}
Ok ok, ainda não tocamos no código, ok ok já estou a ver as vantagens.
Conclusão
Espero que este artigo tenha ajudado para perceber algumas das vantagens de CSS, e claro não quero passar a ideia errada, tabelas são um aspecto importante e deve ser usado, mas no sítio correcto como longos formulários, para mostrar extensos resultados de base de dados, mas como uma maneira de criar o layout geral para um web site espero ter demonstrado as vantagens de CSS.
Sobre o autor
