CSS - Layouts

Espero que você se sinta confortável com tabelas HTML e seja eficiente no design de layouts de página usando tabelas HTML. Mas você sabe que CSS também fornece muitos controles para posicionar elementos em um documento. Já que CSS é a onda do futuro, por que não aprender e usar CSS em vez de tabelas para fins de layout de página?

A lista a seguir reúne alguns prós e contras de ambas as tecnologias -

A maioria dos navegadores oferece suporte a tabelas, enquanto o suporte a CSS está sendo lentamente adotado.
As tabelas são mais tolerantes quando o tamanho da janela do navegador muda - transformando seu conteúdo e agrupando para acomodar as alterações de acordo. O posicionamento CSS tende a ser exato e bastante inflexível.
As tabelas são muito mais fáceis de aprender e manipular do que as regras CSS.

Mas cada um desses argumentos pode ser revertido -

CSS é fundamental para o futuro dos documentos da Web e será suportado pela maioria dos navegadores.
CSS é mais exato do que tabelas, permitindo que seu documento seja visualizado como você deseja, independentemente da janela do navegador.
Manter o controle de tabelas aninhadas pode ser uma verdadeira dor. As regras CSS tendem a ser bem organizadas, facilmente lidas e alteradas.

Finalmente, sugerimos que você use qualquer tecnologia que faça sentido para você e use o que você sabe ou o que apresenta seus documentos da melhor maneira.

CSS também fornece propriedade de layout de tabela para fazer suas tabelas carregarem muito mais rápido. A seguir está um exemplo -

<table style = "table-layout:fixed;width:600px;">
   <tr height = "30">
      <td width = "150">CSS table layout cell 1</td>
      <td width = "200">CSS table layout cell 2</td>
      <td width = "250">CSS table layout cell 3</td>
   </tr>
</table>

Você notará mais os benefícios em mesas grandes. Com o HTML tradicional, o navegador teve que calcular cada célula antes de finalmente renderizar a tabela. Quando você define o algoritmo de layout de tabela como fixo , entretanto, ele só precisa examinar a primeira linha antes de renderizar a tabela inteira. Isso significa que sua tabela precisará ter larguras de coluna e alturas de linha fixas.

Layout de coluna de amostra

Aqui estão as etapas para criar um layout de coluna simples usando CSS -

Defina a margem e o preenchimento do documento completo da seguinte forma -

<style style = "text/css">
   <!--
      body {
         margin:9px 9px 0 9px;
         padding:0;
         background:#FFF;
      }
   -->
</style>

Agora, vamos definir uma coluna com a cor amarela e depois, vamos anexar esta regra a um <div> -

<style style = "text/css">
   <!--
      #level0 {
         background:#FC0;
      }
   -->
</style>

Até este ponto, teremos um documento com corpo amarelo, então vamos agora definir outra divisão dentro do nível 0 -

<style style = "text/css">
   <!--
      #level1 {
         margin-left:143px;
         padding-left:9px;
         background:#FFF;
      }
   -->
</style>

Agora, vamos aninhar mais uma divisão dentro do nível 1, e vamos mudar apenas a cor de fundo -

<style style = "text/css">
   <!--
      #level2 {
         background:#FFF3AC;
      }
   -->
</style>

Finalmente, usaremos a mesma técnica, aninhar uma divisão de nível 3 dentro de nível 2 para obter o layout visual para a coluna certa -

<style style = "text/css">
   <!--
      #level3 {
         margin-right:143px;
         padding-right:9px;
         background:#FFF;
      }
      #main {
         background:#CCC;
      }
   -->
</style>

Preencha o código-fonte da seguinte forma -

<style style = "text/css">
   body {
      margin:9px 9px 0 9px;
      padding:0;
      background:#FFF;
   }
	
   #level0 {background:#FC0;}
	
   #level1 {
      margin-left:143px;
      padding-left:9px;
      background:#FFF;
   }
	
   #level2 {background:#FFF3AC;}
	
   #level3 {
      margin-right:143px;
      padding-right:9px;
      background:#FFF;
   }
	
   #main {background:#CCC;}
</style>
<body>
   <div id = "level0">
      <div id = "level1">
         <div id = "level2">
            <div id = "level3">
               <div id = "main">
                  Final Content goes here...
               </div>
            </div>
         </div>
      </div>
   </div>
</body>

Da mesma forma, você pode adicionar uma barra de navegação superior ou uma barra de anúncios no topo da página.

Isso produzirá o seguinte resultado -

↰ Previous page Next page ↱