CSS - Diseños

Espero que se sienta muy cómodo con las tablas HTML y que sea eficiente en el diseño de diseños de página utilizando tablas HTML. Pero sabes que CSS también proporciona muchos controles para colocar elementos en un documento. Dado que CSS es la ola del futuro, ¿por qué no aprender y usar CSS en lugar de tablas para propósitos de diseño de página?

La siguiente lista recopila algunos pros y contras de ambas tecnologías:

  • La mayoría de los navegadores admiten tablas, mientras que la compatibilidad con CSS se está adoptando lentamente.

  • Las tablas son más indulgentes cuando cambia el tamaño de la ventana del navegador, modificando su contenido y ajustando para adaptarse a los cambios en consecuencia. El posicionamiento CSS tiende a ser exacto y bastante inflexible.

  • Las tablas son mucho más fáciles de aprender y manipular que las reglas CSS.

Pero cada uno de estos argumentos se puede revertir:

  • CSS es fundamental para el futuro de los documentos web y será compatible con la mayoría de los navegadores.

  • CSS es más exacto que las tablas, lo que permite que su documento se vea como lo desea, independientemente de la ventana del navegador.

  • Hacer un seguimiento de las tablas anidadas puede ser un verdadero dolor de cabeza. Las reglas CSS tienden a estar bien organizadas, leerse y cambiarse fácilmente.

Finalmente, le sugerimos que utilice cualquier tecnología que tenga sentido para usted y utilice lo que sabe o lo que presenta sus documentos de la mejor manera.

CSS también proporciona la propiedad de diseño de tabla para que sus tablas se carguen mucho más rápido. A continuación se muestra un ejemplo:

<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>

Notarás los beneficios más en tablas grandes. Con HTML tradicional, el navegador tenía que calcular cada celda antes de representar finalmente la tabla. Sin embargo, cuando establece el algoritmo de diseño de tabla en fijo , solo necesita mirar la primera fila antes de representar la tabla completa. Significa que su tabla deberá tener anchos de columna y alturas de fila fijas.

Diseño de columna de muestra

Estos son los pasos para crear un diseño de columna simple usando CSS:

Establezca el margen y el relleno del documento completo de la siguiente manera:

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

Ahora, definiremos una columna con color amarillo y luego adjuntaremos esta regla a un <div> -

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

Hasta este punto, tendremos un documento con cuerpo amarillo, así que definamos ahora otra división dentro de level0 -

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

Ahora, anidaremos una división más dentro del nivel1, y cambiaremos solo el color de fondo:

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

Finalmente, usaremos la misma técnica, anidaremos una división de nivel3 dentro de nivel2 para obtener el diseño visual de la columna de la derecha:

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

Complete el código fuente de la siguiente manera:

<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>

Del mismo modo, puede agregar una barra de navegación superior o una barra de anuncios en la parte superior de la página.

Producirá el siguiente resultado: