Utilizar el css display:table-row y display:table-cell propiedades

Utilizar el css display:table-row y display:table-cell propiedades

Utilizar el css display:table-row y display:table-cell propiedades : Multi-millones de consejos para hacer su vida mas facil.

Tablas de contenido de la web son una forma muy conveniente y eficiente manera de mostrar una gran cantidad de material en una pequeña cantidad de espacio. Las mesas son tambien mas faciles de leer y de las relaciones de cada articulo puede ser visto facilmente. La tabla tambien se utiliza para el nivelado de visualizacion de imagenes y texto, y si usted desea aprender como utilizar las tablas cuando se esta editando un archivo de CSS, entonces este es el articulo para usted. Mientras que otros desarrolladores realmente preferiria tabla-menos implementaciones (ya que es mas rapido para cargar en algunos casos), la facilidad de mantenimiento es una de las ventajas de tener elementos de las tablas.

• Busca en la tabla de-menos codigo CSS. Para saber donde insertar tablas, aqui esta un ejemplo de una pieza de formato CSS que no hace uso de tablas, pero utiliza divs en su lugar.

  id='contenedor'>
  

  Sidebar1 de contenido
  div>
  div id='mainContent'>
  Principal contenido aqui

  
  

  Celda 1
  

  Celda 2
  

  
  

  En el ejemplo anterior se puede ver que hay de asignar valores a los contenidos de una fila. En realidad, hay dos divs anidados – un div dentro de un div en el ejemplo anterior, para convertirlo en una tabla, que significaria tener dos tablas como el resultado final.

• la Conversion de divs a las tablas. Si usted desea convertir los anteriores listados de codigo a ser el uso de tablas en lugar de divs, entonces deberia comenzar a parecerse a esto:

  #sidebar1 {
  display: table-cell
  width: 200px
  antecedentes: #FFFFFF
  padding: 10px 15px 15px 20px
  }
  #mainContent {
  & nbsp & nbsp & nbsp pantalla: table-cell
  & nbsp & nbsp & nbsp padding-left: 10px
  }
  .fila {
  display:table-row
  }
  .celda {
  display:table-cell
  width:400px
  altura:200px
  border:1px solid blue
  }

  Si usted no esta seguro de que colores vas a utilizar para el fondo y otros elementos de contenido, puede ingresar mas adelante ya que los cuadros que hay, basicamente, de forma un diseño y no realmente el diseño de la pagina. Lo que se mostrara cuando usted revise este archivo html es que usted tendra dos tablas muestran algo asi como una cuadricula. Los desarrolladores prefieren tabla muestra en CSS, simplemente porque es mucho mas facil de entender desde el codigo solo donde va a colocar las imagenes y donde se puede cambiar el valor del color de fondo y el como.

• Edicion de la colocacion de la barra lateral. En los dos ultimos ejemplos, la barra lateral es lo primero, lo que significa que aparecera en la parte izquierda de la pantalla. Si desea en la parte derecha de la pantalla, a continuacion, solo tiene que colocar despues el contenido principal, todavia como una barra lateral, y se debe colocar en consecuencia.

Hay muchos otros consejos sobre como manipular muestra en CSS, pero esta es una de las mas basicas. Hay un debate sobre cual es mas eficiente en terminos de visualizacion de la informacion, y hay dos escuelas principales de pensamiento – aquellos que prefieren el uso de divs y aquellos que prefieren el uso de tablas. Solo una ultima nota – tabla muestra no son compatibles con Internet Explorer version 8 asi que si este navegador es muy alta en su lista de prioridades, a continuacion, puede que desee continuar con el div aplicacion en su lugar.