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.
<table> ajudou muito para a evolução dos websites, por fim existia uma maneira de designers puderem porem os elementos 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 e possível atribuir um ID ou uma class a qualquer HTML tag 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 cellpadding="0" cellspacing="0" width="100%" border="1"> <tr> <td width="20%">Layout lado esquerdo</td> <td width="60%">Layout centro</td> <td width="20%">Layout lado direito</td> </tr> </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
<style type="text/css">
"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;}
</style>
Votacao
: 2
: 0
Opinoes
Nome:
Joao Parreira
Areas:
ASP, CSS, ASP.NET, T-SQL, VB.NET
