comparte el articulo 

CSS avanzado: la propiedad display (segunda parte)

Actualizado el 05/10/2013 < > 0 Comentarios

Resumen: La propiedad "display" puede utilizarse para mostrar los elementos como si se trataran de tablas o como partes de tablas.

Dentro de los valores que tiene la propiedad display, los que están relacionados con las tablas son aquellos en los que mayores diferencias hay entre los navegadores, y en muchos casos ni siquiera están soportados. Si bien es cierto que la maquetación con tablas es incorrecta, tanto desde el punto de vista semántico como desde el punto de vista práctico, hay que reconocer que las tablas presentan algunas ventajas en lo que refiere a la sencillez con que se pueden posicionar los elementos en algunos casos.

Para aquellos casos en los que el uso de las tablas puede resultar una ventaja, CSS presenta estos valores de la propiedad “display”, que hace que los elementos se comporten como tablas o partes de tablas. Es importante decir que cuando decimos “se comporten como tablas o partes de tablas”, es solo referido al posicionamiento. En el ejemplo siguiente, vemos que mientras las celdas de las tablas (en la parte superior de la imagen), el espacio natural que existe entre las celdas de una tabla, no aparece en el caso de los elementos marcados con el valor “table-cell” de la propiedad “display” (en la parte inferior de la imagen). Para lograr que se vean del mismo modo, hay que utilizar la propiedad “border-spacing”.

Tablas

Nota importante: Todas estas propiedades tienen una reciente aplicación en los navegadores. Mozilla Firefox comenzó a soportarlo recién con la aparición de la versión 3, mientras que en Internet Explorer no se había implementado hasta la aparición de Internet Explorer 8. Esto quiere decir que en el caso de utilizar navegadores como Internet Explorer 6 y 7 o una versión antigua de los demás navegadores, estos elementos se comportarán tal como si no tuvieran la propiedad “display” determinada.

¿Usar tablas o los valores de tablas de “display”?

Los valores de tablas de la propiedad “display” son útiles para que los elementos se comporten como si se tratara de tablas. Sin embargo, en caso de tener que ingresar datos tabulados, lo correcto es utilizar tablas ya que HTML dispone de las mismas para ello.

Table, table-row y table-cell

En la imagen anterior, vemos la utilización de tres de los valores de la propiedad, “table”, “table-row” y “table-cell”. En este caso se encuentran aplicados a capas (div), que cumplen con los mismos propósitos que los elementos correspondientes de las tablas (tabla, fila y celda respectivamente).

Es posible (salvo para Google Chrome) utilizar solo la propiedad “table-cell” cuando disponemos de los elementos en una sola fila. Para el caso de Google Chrome, es necesario que los elementos se encuentren dentro de una capa que tenga la propiedad “display” con el valor “table-row”, ya que de otra forma, los elementos se comportarán como si la propiedad no estuviera determinada.

Inline-table

Se trata de un valor bastante peculiar, ya que produce que el elemento se comporte como tabla, pero a diferencia de éstas, se mantiene en línea, es decir, sin salto de línea anterior ni posterior. Es importante marcar que, mientras en casi todos los navegadores el elemento marcado con “inline-table” se desarrolla desde la línea hacia abajo, en Google Chrome los elementos se desarrollan hacia arriba de la línea. Ejemplo:

Tabla en línea

Table-column

Los elementos contenidos dentro de éste elemento, se comportan como si se tratara de una columna, lo que en el correspondiente HTML sería <column>.
Columnas de tablas

Otros valores

Dentro de la propiedad, hay valores que hacen que los elementos se comporten como si se trataran de grupos de partes de tablas, como grupos de filas y grupos de columnas. En cada uno de los casos, pueden ser grupos de una o más filas o columnas respectivamente.

De similares características son los elementos “table-header-group” (thead en HTML) y “table-footer-group” (tfoot en HTML), que determinan al grupo de filas del encabezado y pie de los elementos dispuestos en forma de tabla. Otro caso especial es el de “table-caption”, que hace que el elemento se comporte como si se tratara de títulos de la tabla.

Código utilizado

Para que puedan llevar adelante las prácticas con los valores de la propiedad “display”, les dejamos el código que hemos empleado que aparecen en las imágenes, de forma que puedan hacer todas las modificaciones que consideren necesarias para comprender el funcionamiento de los elementos que utilizan estos valores.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Ejemplo</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>

<div id="contenedor">

<table>
<tr>
<td>Elemento en línea</td>
<td>Elemento</td>
<td>Elemento</td>
<td>Elemento</td>
</tr>
<tr>
<td>Elemento</td>
<td>Elemento</td>
<td>Elemento</td>
<td>Elemento</td>
</tr>
</table>

<div class="tabla">
<div class="fila">
<div class="celda">Elemento largo</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
</div>
<div class="fila">
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
</div>
</div>

<br />
<br />

<div>Este es un ejemplo de 
<div class="tabla-linea">
<div class="fila">
<div class="celda">Elemento largo</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
</div>
<div class="fila">
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
</div>
</div>
 "inline-table"</div>

<br />
<br />
 
 <div class="tabla">
<div class="col">
<div class="fila">
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
</div>
</div>
<div class="col">
<div class="fila">
<div class="celda">Elemento largo</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
</div>
</div>
</div>
</div>


</body>
</html>
#contenedor {
  width: 700px;
  margin: auto;
  }
  
td, table  {
  border: solid 1px #000;
  }
  
table {
  text-align: center;
  margin-bottom: 20px;
  }

.celda  {
  border: solid 1px #000;
  display: table-cell;
  }
  
.fila {
  display: table-row;
  }

.col  {
  display: column;
  }
  
.tabla  {
  display: table;
  border-spacing: 2px;
  text-align: center;
  border: solid 1px #000;
  }
  
.tabla-linea  {
  display: inline-table;
  border-spacing: 2px;
  text-align: center;
  border: solid 1px #000;
  }

Publicado el 22/11/2010, última actualización 05/10/2013.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras