Cómo usar las propiedades CSS display:table-row y display:table-cell

Escrito por ehow contributor | Traducido por beatriz sánchez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo usar las propiedades CSS display:table-row y display:table-cell
(notebook image by Daniela Starace from Fotolia.com)

Cómo usar las propiedades CSS display:table-row y display:table-cell. La propiedad display:table-row de CSS te permite conseguir que el contenido se muestre en el navegador como si fuera la fila de una tabla. Puedes colocar el contenido en un DIV para que se muestre como si fuera la celda de una tabla usando la propiedad display:table-cell de CSS. Sin embargo, no hay marcado HTML para mostrar el contenido de una tabla real con información tabular. El contenido puede ser accedido, mientras te da el poder de mostrarlo como si fuera una tabla o rejilla. Aquí tienes cómo se hace.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Necesitarás

  • Una página HTML y CSS usando los ejemplos mostrados

Lista completaMinimizar

Instrucciones

    Planifica tu diseño

  1. 1

    Para demostrarlo, aquí hay un diseño sencillo CSS con dos columnas centradas en un contenedor DIV. Ten en cuenta que el HTML no es para la tabla. Es un contenedor que tiene dos DIV anidados: una barra lateral y una zona de contenido. Verás un DIV anidado en la zona de contenido que tiene dos DIV anidados. Estos DIV están asociados a la clase "row" (fila) y "cell" (celda) respectivamente, así que se puede aplicar estilo sobre ellos con CSS.

  2. 2

    Asigna el siguiente CSS a la página. Ten en cuenta que los DIV sidebar1 y mainContent reciben la propiedad display:table-cell. No es necesario encerrar estos DIV de presentación display:table-cell en un DIV display:table o display:table-row. Esto es debido a que la tabla y la fila de la tabla están implícitas. Esto significa que el navegador actuará como si se proporcionaran realmente una tabla y una fila de tabla. Para las filas anidadas con dos celdas que aparecerán en la zona de contenido principal, usa el CSS mostrado para la clase "row" (fila) y la clase "cell" (celda) en la CSS mostrada. Los colores y bordes se proporcionan por claridad. No son necesarios para conseguir los resultados de diseño.

  3. 3

    Los resultados se muestran en forma de rejilla con un contenedor que tiene dos grandes celdas o cajas que se muestran como columnas. Dentro de la zona mainContent ves las dos filas de dos celdas o cajas que deben contener el texto o imágenes como sea necesario. Este efecto de rejilla se ha conseguido con las propiedades de visualización CSS.

  4. 4

    En el HTML, la barra lateral venía antes en el orden del fuente. Puedes revertir ese orden o colocar la barra lateral en la derecha colocando antes el DIV mainContent en el orden del fuente HTML.

Consejos y advertencias

  • Puedes omitir el DIV asignado a la clase "row" (fila) y la regla para .row en la CSS y conseguir los mismos resultados. Esto es debido a que el navegador asume que el table-row está implícito cuando se usa el table-cell.
  • Las versiones de Internet Explorer anteriores a la 8 no soportan las propiedades de CSS display:table-row y display:table-cell.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles