Tabelas vrs CSS
Aug 23, 2008 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 HTML introduziu <table> as coisas mudaram, pois foi possível designers começarem a criar layouts.
A <table> ajudou muito para a evolução dos websites, por fim existia uma maneira de designers puderem porem 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
CSS veio ajudar o coitadinho do HTML, e com grandes 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 nos pormenores, mas sim ajudar a mudança e deixar de uma vez por todas <table> tag.
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 ate e 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 aonde esta o troque?
Pois bem como disse no inicio CSS da vantagem de separar o código do layout e por isso existe umas linhas extras.
Existe três maneiras 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 varias vantagens:
- O código esta 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 o tamanho 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 cada vez mais a puxar os browsers para a mesma maneira de mostrar os resultados, CSS parece ter um futuro garantido.
Mostra mais
Então e que tal mostrar um pouco mais as 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 alguma 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 sitio certo 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.
Deixe o seu comentário