Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Tableless oque é isso?
Curso: Tableless IniciandoProfessor: Erick Viana Leão (Perfect Lion)msn: erick_leao@hotmail.com <- adicionar com moderaçãosite: http://www.paodemugen.com.br
Release:
Não se assuste, isso não é um bixo de 7 cabeça como muitos pensam. Não é complicado trabalhar com ela, mais da trabalho ;)
Conteúdo
Bem vamos lá. Antes de mais nada o tableless é um conceito de estruturação de montagem de layout sem usar a tables (tabelas). Muitos programadores ainda utilizam a tabela para criar layout que não é o correto a tabelas como o proprio nome já diz é para se criar uma tabulação de algum resultado.
Vamos analizar o codigo abaixo que seria uma construção de um layout de 3 colunas utilizando tabela:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title></head><body><table width="750" border="0" cellspacing="0" cellpadding="0"><tr><td width="200">Coluna 1</td><td width="350">Coluna 2</td><td width="200">Coluna 3</td></tr></table></body></html>
Basicamente seria isso um layout de 3 colunas usando a estrutura de tabelas, mais como eu disse logo acima isso não é o correto mais agiliza e muito a criação para muitos que não se importa com sematica na construção, mais já com tableless você tem varias vantagens que é a manipulação de determinados blocos do site facilmente sem estragar a estrutura do site, você consegue criar layout usando poucas imagens, e claro para mudar o estilo do seu site seria muito mais rapido.
Agora vamos transferir esse layout para tableless, você verá como seu codigo fica limpo e visivel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Tableless Nivel 1</title></head><body><!-- canto esquerdo --><div id="esquerdo">Coluna 1</div><!-- fim canto esquerdo --><!-- canto direito --><div id="direito">Coluna 3</div><!-- fim canto direito --><!-- centro --><div id="meio">Coluna 2</div><!-- fim centro --></body></html>
Veja que diferença só temos 3 linhas de codigo com blocos de camadas e coloquei comentarios de cada coluna para saber o que é oque ;)
Bem se você executar ele no seu navegador nos teremos um resultado abaixo do outro Coluna 1, Coluna3 e Coluna 2 correto? E você se pergunta - "que palhaçada é essa? você não disse que teriamos um layout com 3 colunas igual fizemos com a da tabela?" - sim eu disse e não estou mentindo. Agora vai entrar o chamado Folha de Estilo o grande CSS você já deve ter ouvido falar nele certo? Se não então se prepare pois se você está entrando no mundo do tableless ele será sua arma principal daqui para frente. sem ele seu layout não tem vida fica uma coisa vazia, então procure estudar varias materias sobre ela porque ela vai ser o seu braço direito daqui para frente.
Então vamos ao CSS? Nesse artigo não vou explicar os conceitos e propriedades do CSS porque além do mais estamos aqui para aprender o tableless a como criar um layout mais robusto do que ficar usando tabelas que podem prejudicar a peforma-se de seu site.
Vamos para nosso CSS então abaixo segue o css que iremos aplicar sobre nosso layout.
estilo.css
{margin: 0;padding: 0;text-decoration: none;list-style: none;}/ vamos estabelecer a largura da coluna esquerda e direita como 200px como fizemos em nossa tabela /#esquerdo, #direito{ width: 200px; background: #00CCFF;} / aqui definimos o lado para que lado eles vão flotuar /#esquerdo{ float: left; } #direito{ float: right; }/ aqui colocamos as margins do meio para serem depois dos 200px que fizemos ali para a coluna esquerda e direita */#meio{ margin: 0 205px; background: #809241; color: #FFF; }
Agora salvamos o nosso estilo e aplicamos ela em nosso HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><!-- link do css --><link href="estilo.css" rel="stylesheet" type="text/css" /><!-- fim link do css --><title>Tableless Nivel 1</title></head><body><!-- canto esquerdo --><div id="esquerdo">Coluna 1</div><!-- fim canto esquerdo --><!-- canto direito --><div id="direito">Coluna 3</div><!-- fim canto direito --><!-- centro --><div id="meio">Coluna 2</div><!-- fim centro --></body></html>
Bem agora execute e veja o resultado.. ^^ show né. Bem esse é o nosso inicio entrando em no mundo tableless. Ate a proxima ;)
Eu sei kra.. isso ai é apenas para quem está iniciando logo mais crio outros legalzinho mais avançado.. c você ver meu site eu uso div global ;)
;)
Temos que começar do basico para ele ver o que está acontecendo saca ? ai depois vamos liberando mais coisa para cima da mente ^^
Boa Perfect Lion..vou dizer uma coisas, até agora pelo q eu vi em sites gringos, não tem tutoriais mais completos, detalhados e explicativos do que os tutorias em português..inclui-se nesta lista, claro, o pa_bruno....e continue assim Perfect Lion...que ajudará mais gente...Parabéns
Eu sei kra.. isso ai é apenas para quem está iniciando logo mais crio outros legalzinho mais avançado.. c você ver meu site eu uso div global ;)http://www.paodemugen.com.br ;)Temos que começar do basico para ele ver o que está acontecendo saca ? ai depois vamos liberando mais coisa para cima da mente ^^
to ligado lion, mas eh sempre bom jah mostrar o caminho certo... o div geral naum eh nada demais... eh bem facil de explicar... pq mostrando assim, sem ele, o cara q vem aki jah começa a fazer assim, ae depois ele quer modificar, ae posta a duvida aki no forum, etc...sei q está colocando o básico, mas o geral eh básico e d fácil entendimento sim... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
É que eu estava pensando em criar um tudo para isso.. pois eu iria criar um tuto de como centralizar o layout, largura do layout essas coisa ai eu iria entrar nesse detalhe saka ^^ por isso que num postei ;)Mais no proximo tudo pode deixar que vou falar sobre isso ;)
na minha opinião, acho q deveria fazer tutoriais sobre outras coisas... tutos de layouts, 2 ou 3 colunas, posicionamento do layout eh o q mais existe por ae... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Então posta ae que tuto eu poderia criar ;)
parabens pela iniciativa!!!Show de bola.....
eh soh ver o fórum... tem várias coisas q pessoal bate cabeça... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Isso ae kranem sabia o q era tabless+ aprendi com você ^^espero q você continue postando mais coisas pra gente ae...vlw lion!!!t+ brother
Acho que postar tutos básicos aqui é importante sim. Saber que a gente pode encontrar tuto básico na Net, a gente sabe, o duro é caçar e achar. Se ficarem todos por aqui mesmo facilita muito pra quem está começando. E eu concordo com o Lion quando ele diz que basta ler o fórum pra ver que o pessoal bate cabeça com o basicão mesmo.é isso.
Já tô 'inscrito' aqui, vou aprender 'tim-tim' por 'tim-tim'. :P
Já tô 'inscrito' aqui, vou aprender 'tim-tim' por 'tim-tim'. :P
/Bom Dia cara, se quizer também pode estar sempre conferindo o topico que abri, alguns amigos estão me acompanhando e dando dicas de estudo sobre o assunto, e claro tirando minhas dúvidas...Iniciando Estudos sobre Tableless e CSSaté mais... /
tah esquecendo da dica q sempre falo... o div geral englobando todo o conteúdo... isso eh uma mão na roda para centralizar o layout...
tente centralizar esse site sem mexer no html... vai ser beeeeem mais chato... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
mas valew a iniciativa http://forum.imasters.com.br/public/style_emoticons/default/clap.gif