CSS-2.1: Posiciones

POSICIÓN {position : x}

CSS21
Para declarar como un elemento puede posicionarse con las propiedades de desplazamiento {top}, {right}, {bottom} y {left}. Los valores de x pueden ser
  • static. (VALOR INICIAL). La caja es situada de acuerdo al flujo normal y las propiedades de posicionamiento top, right, bottom, left no se aplican aunque se declaren.
  • relative. La posición se calcula de acuerdo al flujo normal, pero luego la caja se sitúa con top, right, bottom, left de forma relativa a esta posición. La siguiente caja en el flujo se calcula como si la anterior relativa no se hubiera desplazado.
  • absolute. La posición queda establecida con las propiedades de posicionamiento top, right, bottom, left, especificando donde estarán situadas con respecto a su bloque de contención. El elemento entonces es quitado del flujo normal, como si no existiera para la composición de los elementos de su entorno. Los márgenes de las cajas posicionadas absolutamente no se cierran, de tal forma que sus márgenes se superponen conservando el margen más grueso.
  • fixed. La posición se calcula igual que para absolute, pero la caja en pantalla (medios continuos) queda fijada con respecto a la ventana del navegador y no se mueve cuando se usa la barra de desplazamiento. En salida impresa (medios paginados) se fija con respecto a la hoja impresa.
  • inherit. (NO SE HEREDA)

Se aplica a todos los elementos. En elementos posicionados puede encontrar información importante relacionada con esta propiedad así como su relación con {display} y {float}.

Los elementos son presentados por el navegador fluyendo en el orden en que se codifican, lo que se denomina flujo normal o estático, que es la opción por defecto (static). Podemos eliminar el elemento del flujo y especificar la posición absoluta con respecto al elemento padre (absolute), o bien fijada con respecto a la ventana del navegador (fixed). También podemos mover el elemento de forma relativa a su posición por defecto en el flujo (relative). En los ejemplos siguiente veremos como se usan.

Ejemplo {position}: Posiciones relativas

En este caso lo de relativo se entiende en relación a la posición que ocuparía el elemento si estuviera en flujo estático. En este ejemplo mostramos como a pesar que dos párrafos división consecutivos se muestran en el flujo estático uno detrás de otro, conseguimos que el segundo párrafo se fuerce a ocupar una posición de -1.3em más arriba, es decir, retrocede en el flujo vertical -1.3 veces el tamaño de la altura de su fuente. De esta forma los situamos los dos en la misma línea (aproximadamente).
<div>
    Un párrafo.
</div>
<div style="color:red; text-align:right; position:relative; top:-1.3em;" >
    (párrafo a la derecha)
</div>
Resultado:
Un párrafo.
(párrafo a la derecha)

Ejemplo {position}: Posiciones absolutas

En el ejemplo siguiente mostramos como configurar un texto con imagen a su izquierda. El texto se incluye en una división, de la cual también forma parte una imagen de 272x204 px. La división tiene un relleno izquierdo suficiente para dar cabida a la foto. Esta foto se posiciona de forma absoluta con respecto a la división donde está contenida. El resto se explica en el propio texto de ejemplo.
<div style="position:relative; padding-left:280px; overflow:hidden; ">
    <img src="ejemplos/css-propiedades/img_3.jpg" width="272" height="204" 
    style="position:absolute; left:1px; top:5px;" alt="" />
    En este ejemplo partimos de un párrafo configurado como división para 
    englobar también una foto a la izquierda del texto que incluye. La división 
    se configura...
</div>
Resultado:
posición absoluta
En este ejemplo partimos de un párrafo configurado como división para englobar también una foto a la izquierda del texto que incluye. La división se configura como relativa para que su contenido (la imagen en este caso) se posicione de forma absoluta respecto a ella y no a la ventana del navegador (es decir, al cuerpo <body>Ver nota). La foto se posiciona de forma absoluta con respecto a la división en la posición 1px a la izquierda y 5 px arriba. Con overflow:hidden controlamos el momento en que la imagen sea más alta que la altura del texto, en cuyo caso se ocultará la parte de la imagen que sobrepase la altura del texto (ampliar y reducir tamaño de la ventana para verlo).

Nota sobre posicionamiento absoluto

Un elemento se posiciona absolutamente con respecto al primer padre con posición distinta de static, es decir que tenga posicionamiento relativo, absoluto o fijo, pero no estático. Si todos los padres hasta llegar a <body> inclusive éste son estáticos, el posicionamiento se hace relativo al bloque de contención inicial, que podemos asimilar con con el concepto de ventana del navegador (o viewport). Sin embargo a efectos prácticos sobre posicionamientos no habrá diferencia entre ventana del navegador, <html> y <body> siempre que no hayamos modificado su estilo, por ejemplo, fijando posicionamientos distintos de estáticos, que es su valor inicial, para <html> o <body>.

Ejemplo {position}: Posiciones fijadas

En el ejemplo siguiente se muestra una página donde queremos poner un texto largo y dejar un espacio a la izquierda con vínculos en forma de menú. Para contener el texto largo creamos una división con el nombre de clase "contenido". El menú lo ponemos en una división que llamamos "menu-lateral". Ambas divisiones las dotamos de bordes para observar mejor su ocupación. Se trata de que el menú lateral se quede fijado en la ventana del navegador cuando desplazemos la barra vertical para seguir leyendo el texto hacia abajo.

Para ello incluimos en la página un estilo interno indicando la posición fixed al menú lateral, con lo que se queda anclada respecto a la ventana del navegador en las posiciones top, left que le hemos dado. Le dotamos de un ancho suficiente para contener las entradas del menú. Luego para que no se solape con la división "contenido", dotamos ésta con un margen izquierdo suficiente para separarlo del menú lateral.

...
<style>
    .menu-lateral {position:fixed; top:15px; left:5px; width:150px; 
            border-style:double; padding:5px;}
    .contenido {margin-left:170px; border-style:dotted; border-width:1px; 
            padding:5px; }
</style>
</head>
<body>
<div class="menu-lateral">
    <p><a href="#n1">Protocolo sesgado</a></p>
    <p><a href="#n2">Acceso a directorios</a></p>
</div>
<div class="contenido">
    <h3 id="n1">PROTOCOLO SESGADO</h3>
    <p> .... </p>
    <h3 id="n2">PROTOCOLOS DE ACCESO A DIRECTORIOS</h3>
    <p> .... </p>
</div>
</body>
</html>
Resultado:
Ver el resultado en Fixed.html.

Ejemplo {position}: Marcos de página

Una generalización del ejemplo anterior sobre el posicionamiento fijado con fixed es para la creación de marcos de página con CSS. Se usa un modelo donde cada marco es una "caja" que se posiciona de forma absoluta en la ventana del navegador. Normalmente se usan nombres para los marcos como "cabecera, menú lateral izquierdo, contenido y pie". En la página del resultado se incluye comentado el contenido del estilo.
Resultado:
Ver el resultado en Marcos.html.
También es posible insertar marcos de página con objetos. Ver el ejemplo marcos de página con objetos.

Ejemplo {position}: Bordes personalizados con imágenes

Otro ejemplo de aplicación de la propiedad position usada conjuntamente con top, right, bottom, left puede ser para crear bordes personalizados con imágenes. Se trata de crear una división que llamamos "con-borde" para incluir unos bordes personalizados con imágenes de fondo haciendo un mosaico. Esta división la posicionamos de forma relativa para que contenga unas divisiones con los bordes personalizadas y posicionadas de forma absoluta y así situarlas en los bordes. Tenemos entonces las divisiones "borde-sup, border-der, border-inf, borde-izq" con estilos para la imagen de fondo y el posicionamiento. Vamos cambiando el ancho y alto según el borde del que se trate. La imagen se repite en mosáico de forma predeterminada. También creamos una imagen para cada esquina con objeto de finalizar la terminación de las mismas. La mayor o menor calidad en la terminación dependerá en todo caso de una buena elección de las imágenes. El código para estilo es el siguiente:
div.con-borde {position:relative; padding:30px; color:navy; }
div.borde-sup {background-image:url(img-sup.gif); position:absolute; 
top:0; left:15px; right:15px; height:15px; }
div.borde-der {background-image:url(img-der.gif); position:absolute; 
top:15px; right:0; bottom:15px; width:15px; }
div.borde-inf {background-image:url(img-inf.gif); position:absolute; 
left:15px; right:15px; bottom:0; height:15px; }
div.borde-izq {background-image:url(img-izq.gif); position:absolute; 
top:15px; left:0; bottom:15px; width:15px; }
div.esq-sup-izq {background-image:url(img-esq-sup-izq.gif); position:absolute; 
top:0; left:0; width:15px; height:15px;}
div.esq-sup-der {background-image:url(img-esq-sup-der.gif); position:absolute; 
top:0; right:0; width:15px; height:15px;}
div.esq-inf-izq {background-image:url(img-esq-inf-izq.gif); position:absolute; 
bottom:0; left:0; width:15px; height:15px;}
div.esq-inf-der {background-image:url(img-esq-inf-der.gif); position:absolute; 
bottom:0; right:0; width:15px; height:15px;}
En la página hemos de incluir el siguiente código:
...
<div class="con-borde" >
<div class="borde-sup"></div>
<div class="borde-der"></div>
<div class="borde-inf"></div>
<div class="borde-izq"></div>
<div class="esq-sup-izq"></div>
<div class="esq-sup-der"></div>
<div class="esq-inf-izq"></div>
<div class="esq-inf-der"></div>
...aquí se situa el contenido....
</div>
Resultado:
El resultado se encuentra en Border-imagen.html, donde también se detallan las imágenes componentes para cada borde y esquinas. Además hemos realizado otra versión que funciona exactamente igual pero cambiando el tipo de imagen por un borde rayado doble y con esquinas redondeadas que se muestra en Border-doble.html
Puede ver un ejemplo que usa posicionamiento en E:hover{},E:active{},E:focus{}.

DESPLAZAMIENTO SUPERIOR {top : x}

CSS21
Para especificar la separación de un elemento desde el lado superior de su elemento padre. {position}. El valor de x puede ser:
  • Una medida. Con porcentajes estos son referidos a la altura del bloque de contención. Si esta altura no estuviera especificada entonces tomará el valor auto.
  • auto. (VALOR INICIAL). Su efecto depende del tipo de elemento.
  • inherit. (NO SE HEREDA).
Se aplica sólo a elementos posicionados.

Ejemplo {top}

En el siguiente ejemplo creamos una división con un borde y le damos una altura de 50 píxeles. La dotamos de posicionamiento relativo para luego posicionar de forma absoluta (con respecto a la división) un bloque de tipo "span" en su interior, situándolo arriba una longitud que se separa 2 px desde el margen superior de la división.
<div style="position:relative; color:purple; border:solid 1px; height:50px; ">
    <span style="top:2px; position:absolute; color:red; 
    border:dotted 1px; ">Span posicionado 2px superior</span>
</div>
Resultado:
Span posicionado 2px superior
Ver también posicionamiento en {position} y otros desplazamientos en {left}, {right}, {bottom}.
CSS21
Para especificar la separación de un elemento desde el lado derecho de su elemento padre. El valor x puede ser:
  • Una medida. Con porcentajes estos son referidos al ancho del bloque de contención.
  • auto. (VALOR INICIAL). Su efecto depende del tipo de elemento.
  • inherit. (NO SE HEREDA).
Se aplica sólo a elementos posicionados.

Ejemplo {right}

En el siguiente ejemplo creamos una división con un borde y le damos una altura de 50 píxeles. La dotamos de posicionamiento relativo para luego posicionar de forma absoluta (con respecto a la división) un bloque de tipo "span" en su interior, situándolo a la derecha una longitud que se separa un 10% del ancho de la división desde su margen derecho.
<div style="position:relative; color:purple; border:solid 1px; height:50px; ">
<span style="right:10%; position:absolute; color:red; 
    border:dotted 1px; ">Span posicionado un 10% derecha</span>
</div>
Resultado:
Span posicionado un 10% derecha
Ver también posicionamiento en {position} y otros desplazamientos en {top}, {bottom}, {left}.

DESPLAZAMIENTO INFERIOR {bottom : x}

CSS21
Para especificar la separación de un elemento desde el lado inferior de su elemento padre. El valor x puede ser:
  • Una medida. Con porcentajes estos son referidos a la altura del bloque de contención. Si esta altura no estuviera especificada entonces tomará el valor auto
  • auto. (VALOR INICIAL). Su efecto depende del tipo de elemento.
  • inherit. (NO SE HEREDA).
Se aplica sólo a elementos posicionados.

Ejemplo {bottom}

En el siguiente ejemplo creamos una división con un borde y le damos una altura de 50 píxeles. La dotamos de posicionamiento relativo para luego posicionar de forma absoluta (con respecto a la división) un bloque de tipo "span" en su interior, situándolo en el pie a una longitud que se separa 2 px del margen inferior de la división
<div style="position:relative; color:purple; border:solid 1px; height:50px; ">
<span style="bottom:2px; position:absolute; color:red; 
border:dotted 1px; ">Span posicionado 2px inferior</span>
</div>
Resultado:
Span posicionado 2px inferior
Ver también posicionamiento en {position} y otros desplazamientos en {top}, {right}, {left}.

DESPLAZAMIENTO IZQUIERDA {left : x}

CSS21
Para especificar la separación de un elemento desde el lado izquierdo de su elemento padre. El valor x puede ser:
  • Una medida. Con porcentajes estos son referidos al ancho del bloque de contención.
  • auto. (VALOR INICIAL). Su efecto depende del tipo de elemento.
  • inherit. (NO SE HEREDA).
Se aplica sólo a elementos posicionados.

Ejemplo {left}

En el siguiente ejemplo creamos una división con un borde y le damos una altura de 50 píxeles. La dotamos de posicionamiento relativo para luego posicionar de forma absoluta (con respecto a la división) un bloque de tipo "span" en su interior, situándolo a la izquierda una longitud que se separa un 10% del ancho de la división desde su margen izquierdo.
<div style="position:relative; color:purple; border:solid 1px; height:50px; ">
<span style="left:10%; position:absolute; color:red; 
border:dotted 1px; ">Span posicionado un 10% izquierda</span>
</div>
Resultado:
Span posicionado un 10% izquierda
Ver también posicionamiento en {position} y otros desplazamientos en {top}, {right}, {bottom}.

FLOTACIÓN {float : x}

CSS21
Especifica si un caja debe flotar a la izquierda, derecha o no flotar. Los valores de x pueden ser:
  • left: el elemento flota a la izquierda y otros elementos flotan a su derecha comenzando desde la parte superior.
  • right, lo mismo pero el elemento flota a la derecha.
  • none, no flotar (VALOR INICIAL)
  • inherit (NO SE HEREDA)

Se aplica a todos los elementos que generen cajas que no estén posicionadas absolutamente, es decir, cuando la propiedad {position} toma los valores static o relative para un elemento que genere una caja.

Ejemplo {float}

En el siguiente ejemplo queremos establecer un texto con una imagen lateral a la izquierda de tal forma que el texto fluya a la derecha de la imagen. Entonces lo que debemos hacer es presentar primero la imagen, luego el texto y forzar a que la imagen flote a la izquierda. Para ello establecemos dos divisiones, una que llamamos imagen-lateral y otra para albergar el texto que llamamos texto. En el estilo interno especificamos que la imagen lateral flote a la izquierda, dándole un ancho un poco mayor que el ancho de la imagen así como un relleno pequeño (para que no se toque con el texto). A continuación le damos a la división del texto un relleno para separarlo un poco también en todos los contornos. Veáse que el elemento imagen no está posicionado absolutamente, pues su propiedad no especificada {position} queda establecida a static como valor por defecto.
...
<style>
    .imagen-lateral {float:left; width:185px; padding:5px; }
    .texto {padding:10px; }
</style>
</head>
<body>
<div class="imagen-lateral">
    <img src="img.jpg" width="179" height="255" />
</div>
<div class="texto">
    <h4>EJEMPLO DE FLOTACIÓN</h4>
    <p>Un caso especial ...... </p>
    <p>Para permitir ..... </p>
</div>
</body>
</html>
Resultado:
Ver resultado en Float.html, donde se observa que el texto se distribuye a la derecha de la imagen, rodeándolo. Puede cambiar tamaño de la ventana del navegador para observar como siempre el texto rodea a la imagen.
Borrado de flotación en {clear}. Otra forma de realizar la flotación de elementos pero con XHTML transicional es usando <br clear>.

FLOTACIÓN BORRADA {clear : x}

CSS21
Para finalizar la flotación de elementos. El valor x puede ser
  • none (VALOR INICIAL)
  • left: Para la caja del elemento a nivel de bloque que borra las flotaciones anteriores, se le aumente el margen superior para que cubra cualquier distancia hasta un elemento anterior flotado a la izquierda.
  • right: Igual que lo anterior pero para elemento flotantes a la derecha.
  • both: Igual pero para elementos flotantes a cualquier lado.
  • inherit (NO SE HEREDA)
Se aplica sólo a elemento a nivel de bloque.

Ejemplo: Borrado de flotaciones

En el siguiente ejemplo queremos insertar imágenes, texto y un pie de página. En primer lugar insertamos una imagen flotada a la izquierda con la declaración de estilo interno .imagen-izquierda {float:left; width:185px; padding:5px;}. Esto quiere decir que el primer párrafo de texto que viene a continuación flotará a la derecha. En medio queremos insertar otra imagen a la derecha que hacemos flotar declarando el estilo .imagen-derecha {float:right; width:145x; padding:5px;}. Luego el texto que viene a continuación flotará a su izquierda. Sin embargo no queremos que el último párrafo de texto siga flotando, sino que aparezca al final (que podría ser por ejemplo como un pie de página). Para ello insertamos una división horizontal con la que borramos cualquier flotación anterior: .borra-flotacion {clear:both; border:solid 1px;}. Podíamos borrar sólo la flotación derecha que es la que está afectando, pero no pasa nada si las borramos ambas y así nos aseguramos por si más adelante agregaramos alguna otra flotación izquierda más cercana al pie de borrado. En el resultado puede verse la página sin usar este borrado y usándolo. Cuando no se borra la flotación, el último párrafo sigue flotando. Cuando se borra el último párrafo ya no flota.
...
<style>
    .imagen-izquierda {float:left; width:185px; padding:5px;}
    .imagen-derecha {float:right; width:145x; padding:5px;}
    .borra-flotacion {clear:both; border:solid 1px; 
            text-align:center; background:url(img3.gif);}
    .texto {padding:10px; }
</style>
</head>
<body>
<div class="imagen-izquierda">
    <img src="img1.jpg" width="179" height="255" />
</div>
<div class="texto">
    <h4>EJEMPLO DE FLOTACIÓN BORRADA</h4>
    Un caso especial...
</div>
<div class="imagen-derecha">
    <img src="img2.jpg" width="135" height="175" />
</div>
<div class="texto">
    Para permitir que...
<div>
<div class="borra-flotacion">
    ESTA DIVISIÓN BORRA TODAS LAS FLOTACIONES ANTERIORES
</div>
<div class="texto">
    Pie que ya ha dejado de flotar.
</div>
</body>
</html>
Resultado:
Ver resultados en Clear.html.
Flotación en {float}. Otra forma de realizar el borrado de flotación de elementos pero con XHTML transicional es usando <br clear>.

MOSTRAR ELEMENTO {display : x}

CSS21
Para especificar si se debe mostrar y cómo un elemento. Los valores de x pueden ser
  • inline. (VALOR INICIAL). Genera una o más cajas de línea.
  • block. Genera una caja de bloque.
  • inline-block. Genera una caja de bloque que permanece en el flujo como una caja de línea de la misma forma que un elemento reemplazado. Sin embargo el contenido es formateado como una caja de bloque aunque al elemento se le trata como uno de línea.
  • list-item. Genera una caja de bloque con cajas de línea para el mismo efecto que los elementos de lista.
  • run-in. Genera una caja de bloque o de línea dependiendo del contexto. Si una caja de bloque no posicionada absolutamente y no flotada sigue en el flujo a una caja con este valor, áquella se convierte en la primera caja de línea que le sigue.
  • none. No se genera ninguna caja. Con este valor podemos ocultar un elemento del flujo y, de hecho se extrae completamente de ese flujo. En cambio con la propiedad {visibility} dándole el valor hidden se puede conseguir el mismo efecto no mostrándose el elemento, aunque el navegador lo mantiene en el flujo y le reserva su espacio
  • inherit (NO SE HEREDA)
  • Los siguientes valores generan elementos de tabla:
    • table. Tabla a nivel de bloque.
    • inline-table. Tabla a nivel de línea.
    • table-cell. Celda.
    • table-row. Fila.
    • table-column. Columna.
    • table-row-group. Grupos de filas.
    • table-column-group. Grupos de columnas.
    • table-header-group. Grupos de encabezados.
    • table-footer-group. Grupos de pies.
    • table-caption. Título de tabla.
    (ver el ejemplo expuesto).
Se aplica a todos los elementos.

Ejemplo {display}, valores none, inline, block, list-item

En el siguiente ejemplo probamos los valores: none para ocultar un elemento del flujo. inline para forzar a línea un elemento de bloque. block para forzar a bloque un elemento de línea. list-item para convertir en una entrada o item de lista cualquier elemento.
<span style="display:none; color:purple;">
Elemento oculto</span>

<span style="visibility:hidden; 
color:purple;">Elemento oculto</span>
 
<div style="display:inline; color:navy;">div 
mostrada como un span en la misma línea</div>

<span style="display:block; color:navy; ">span 
mostrado como una división, saltándose de línea</span>
 
<span style="display:list-item; color:navy;">
[span como item de lista, produciendo también un salto de línea]</span>
Resultado:
En este ejemplo los resultados están entre corchetes y letra en azul.
Aquí hay un bloque en línea oculto con display:none que no guarda el espacio: [Elemento oculto].
Aquí hay un bloque en línea oculto con visibility:hidden que si reserva el espacio: [Elemento oculto ].
A continuación tenemos una división en línea con display:inline : [
div mostrada como un span en la misma línea
].
Luego un bloque en línea mostrado como una división con display:block: [span mostrado como una división, saltándose de línea].
Por último un span como un item de lista con display:list-item : [[span como item de lista, produciendo también un salto de línea]].

Ejemplo {display}, valor run-in

El valor run-in es útil cuando queremos cambiar el comportamiento bloque-línea de una caja generada. Por ejemplo, los encabezados <h1..h6> son elementos a nivel de bloque. Normalmente suelen incluirse elementos también de bloque como <p>, de tal forma que se saltarán una línea para que el encabezado quede separado del inicio del párrafo. Si queremos que esto no suceda así y el inico del párrafo siga en la misma línea al encabezado, entonces tenemos que dar al encabezado el valor run-in, para que el elemento de bloque que le sigue se convierta en un elemento de línea.
<div style="border: green solid 1px; "> 
    <h2>Encabezado "h2" sin "run-in". </h2>
    <p style="color: red; ">Sigue un párrafo "p" a continuación...</p>
</div>
<div style="border: green solid 1px; "> 
    <h2 style="display: run-in;">Encabezado "h2" con "run-in". </h2>
    <p style="color: red; ">Sigue un párrafo "p" a continuación...</p>
</div>
Resultado:

Encabezado "h2" sin "run-in".

Sigue un párrafo "p" a continuación...

Encabezado "h2" con "run-in".

Sigue un párrafo "p" a continuación...

Sólo en Firefox hemos visto que no se ejecuta.

Ejemplo {display}, valor inline-block

El uso del valor inline-block se muestra en este ejemplo, dode usamos texto y elementos en línea de tipo <span>. Con borde rojo se muestra uno de estos elementos sin modificar su condición de elemento en línea. Los que tienen borde azul le hemos dotado del valor inline-block a su propiedad {display}. Con este valor el elemento se muestra en línea exteriormente, pero a su contenido se le aplica un tratamiento de bloque si la situación lo requiere. Así el primero con borde azul tiene un contenido de texto corto, que cabe en la línea donde está situado. Por ello no queda afectado. Sin embargo el siguiente tiene un texto largo y, como no cabe en la línea, se salta a la siguiente como si se tratara de un elemento de bloque. Además se le aplica justificado del texto con {text-align}, cosa que sólo puede aplicarse a contenidos de texto en elementos de bloque. Vemos entonces que el elemento adapta su contenido a bloque si fuera necesario. Por último con borde naranja hemos dispuesto este elemento con un texto largo pero sin darle valor de inline-block para ver que no se adapta a la circunstancias y el borde es cortado en los extremos.
Este
<span style="border: red solid 1px; ">
    elemento 
</span>
se sitúa en la misma línea. Le sigue otro con
<span style="display: inline-block; border: blue solid 1px; ">
    inline-block 
</span>
que también le sigue en línea. Su contenido es de bloque, pero como cabe 
en la línea no queda afectado.
<span style="display: inline-block; border: blue solid 1px; text-align: 
justify; ">
    Sin embargo este también es un "span"...
</span>
Una razón para ...    
<span style="border: orange solid 1px; text-align: justify;  ">
    el navegador no podrá...
</span>            
Por lo tanto...
Resultado:
Este elemento se sitúa en la misma línea. Le sigue otro con inline-block que también le sigue en línea. Su contenido es de bloque, pero como cabe en la línea no queda afectado. Sin embargo este también es un "span" con "inline-block", tratándose exteriormente como un elemento en línea, pero como su contenido es mayor que el ancho disponible entonces se trata como un elemento de bloque (el contenido) y por tanto se presenta en otra línea. Además le justificamos el texto, cosa que sólo podemos hacer con elementos de bloque. Una razón para utilizar este valor "inline-block" con elementos en línea es su capacidad para actuar como línea o bloque dependiendo del contenido y el contexto. Si un contenido de texto largo como el que ocupa el elemento anterior lo ponemos en un "span" sin usar "inline-block" pasa que el navegador no podrá rematar adecuadamente los bordes, pues la longitud del texto supera a la pantalla y al satarse de línea sigue bordeando el elemento, no cubriendo adecuadamente los bordes laterales que quedan sin terminar en algunos navegadores. Por lo tanto "inline-block" adapta un elemento en línea a cada situación.

Ejemplo: Uso de {display} para mostrar tablas con CSS

CSS nos permite crear elementos de tabla con los valores para <display> siguientes:
  • table. Tabla a nivel de bloque.
  • inline-table. Tabla a nivel de línea.
  • table-cell. Celda.
  • table-row. Fila.
  • table-column. Columna.
  • table-row-group. Grupos de filas.
  • table-column-group. Grupos de columnas.
  • table-header-group. Grupos de encabezados.
  • table-footer-group. Grupos de pies.
  • table-caption. Título de tabla.

Además hay dos propiedades directamente relacionadas con las tablas CSS, que son:

En este ejemplo mostraremos 2 tablas, una del modelo de bordes abiertos y otro del modelo bordes cerrados (ver modelos de bordes), presentándose tanto con los elementos de tabla de XHTML como con los de CSS según los valores anteriores de <display>. En una página externa de ejemplo configuramos el siguiente estilo interno:

<style type="text/css">
    /*TABLA DE XHTML DEL MODELO BORDES CERRADOS*/
    table.tabla-base {border-collapse: collapse; border: black solid 1px; margin: 5px;}
    table.tabla-base th {border: black solid 1px; }
    table.tabla-base td {border: black solid 1px; }       

    /*TABLA DE CSS*/
    div.table {display: table; } 
    div.caption {display: table-caption; text-align: center; }
    div.tr {display: table-row; }
    div.th {display: table-cell; font-weight: bolder; text-align: center; border: inset 1px; }
    div.td {display: table-cell; border: inset 1px; }
</style>

La "tabla-base" se dota de un estilo de bordes cerrados para configurar elementos <table> de XHTML. El segundo grupo de estilo es para las tablas CSS, usando elementos de bloque como <div> para configurar los diversos elementos de una tabla (el propio tabla, título, filas y celdas). El código del cuerpo de la página que muestra las cuatro tablas, 2 en XHTML y 2 en CSS, es el siguiente:

<table border="10">
    <caption>Tabla XHTML (bordes abiertos)</caption>
    <tr><th>columna-1</th><th>columna-2</th></tr>
    <tr><td>1,1</td><td>1,2</td></tr>
    <tr><td>2,1</td><td>2,2</td></tr>        
</table>
<div class="table" style="border: outset 10px; border-spacing: 2px; ">
    <div class="caption">Tabla CSS (bordes abiertos)</div>
    <div class="tr"><div class="th">columna-1</div>
        <div class="th">columna-2</div></div>
    <div class="tr"><div class="td">1,1</div>
        <div class="td">1,2</div></div>
    <div class="tr"><div class="td">2,1</div>
        <div class="td">2,2</div></div>        
</div>   
<table class="tabla-base">
    <caption>Tabla XHTML (bordes cerrados)</caption>
    ...igual que la primera tabla
<div class="table" style="border: solid 1px; border-collapse: collapse; ">
    <div class="caption">Tabla CSS (bordes cerrados)</div>
    ...igual que la segunda tabla
Resultado:
Ver la página de resultado en display-table.html.
Puede ver un ejemplo que muestra y oculta elementos en E:hover{},E:active{},E:focus{} que usa los valores none y inline para esta propiedad.

RECORTAR ELEMENTO {clip : x}

CSS21
Para recortar franjas horizontales y/o verticales en los lados superior, derecho, inferior y/o izquierdo. El recorte se produce desde el punto exterior de cada borde, por lo que estos se incluyen en el recortado. Los valores de x son:
  • rect(top, right, bottom, left) donde los valores deben ir separados por comas y corresponden a medidas o bien valores auto para indicar que se debe hacer lo siguiente, donde W y H son el ancho y alto del elemento incluyendo el ancho de los bordes:
    • Recortar desde el borde superior hacia abajo una franja con un alto de top píxeles.
    • Recortar desde el borde derecho hacia la izquierda una franja con un ancho de W-right píxeles.
    • Recortar desde el borde inferior hacia arriba una franja con un alto de H-bottom píxeles.
    • Recortar desde el borde izquierdo hacia la derecha una franja con un ancho de left píxeles.
  • auto, (VALOR INICIAL). El elemento no será recortado.
IMPORTANTE: Cuando se dan valores como rect(a, b, c, d) es importante que entre "rect" y "(" no haya ningún espacio. Los espacios entre las comas son opcionales, pero las comas son obligatorias, aunque Explorer 7 sólo funciona con estos valores separados por espacios como por ejemplo clip: rect(5px 104px 29px 0), aunque con la versión 8 este tema ya se ha arreglado. Se aplica a elementos absolutamente posicionados.

Ejemplo {clip}

En el siguiente ejemplo podemos ver como actúa este atributo, explicándose los detalles en cada caso. Se expone sólo el código para el último caso, pues los demás se configuran en clip tal como se detalla en el texto. Veáse como el elemento está posicionado de forma absoluta con respecto al elemento de bloque exterior, cuyo posicionamiento es relativo para que las posiciones absolutas interiores se hagan con respecto a él.
...
<div style="position:relative;  padding-left:110px; ">
    <span style="clip:rect(5px, 99px, 24px, 5px); 
    position:absolute; top:0; left:0; width:100px; height:25px;
    border:red solid 2px; background-color:aqua;  "></span>
    <b>Recorte en los cuatro lados</b>:
    Ahora aplicamos ...
</div>
...
Resultado:
Sin recorte: En este primer ejemplo tenemos un elemento sin recorte alguno. El elemento tiene un área de contenido de ancho 100px por alto 25px con bordes de 2px en los cuatro lados. Para el recorte se añaden estos 2px+2px de bordes, por lo que el ancho efectivo será de W=104px y el alto efectivo de H=29px para el cálculo del recorte derecho e inferior.
Recorte vacío: Ahora aplicamos clip:rect(0, 104px, 29px, 0) al elemento span de forma que se recorta 0px por arriba, ancho 104-104=0px por la derecha, alto 29-29=0px por abajo, 0px por la izquierda, en definitiva no se recorta nada.
Recorte superior: Ahora aplicamos clip:rect(5px, 104px, 29px, 0) al elemento tal que se recorta 5px por arriba, ancho 104-104=0px por la derecha, alto 29-29=0px por abajo, 0px por la izquierda.
Recorte derecha: Ahora aplicamos clip:rect(0, 99px, 29px, 0) tal que se recorta 0px por arriba, ancho 104-99=5px por la derecha, alto 29-29=0px por abajo, 0px por laizquierda.
Recorte inferior: Ahora aplicamos clip:rect(0, 104px, 24px, 0) donde se recorta 0px por la izquierda, ancho 104-104=0px por la derecha, alto 29-24=5px por abajo, 0px por la izquierda.
Recorte izquierda: Ahora aplicamos clip:rect(0, 104px, 29px, 5px) tal que se recorta 0px por arriba, ancho 104-104=0px por la derecha, alto 29-29=0px por abajo, 5px por la izquierda.
Recorte en los cuatro lados: Ahora aplicamos clip:rect(5px, 99px, 24px, 5px) tal que recortamos 5px por arriba, ancho 104-99=5px por la derecha, alto 29-24=5px por abajo, 5px por la izquierda, es decir, recortamos 5px por los cuatro lados.

Ejemplo {clip}: Efecto "lupa" sobre imágenes grandes

Con el objeto de buscar un uso a esta propiedad, se expone el ejemplo Clip.html. Se trata de tener acceso a una imagen de gran tamaño, pero que inicialmente se carga una copia de menor tamaño y el usuario puede ampliar zonas de la imagen reducida como si se tratara de una "lupa". En esa página se documenta como se ha configurado.
Ver también: Visibilidad en {visibility}. Mostrar un elemento en {display}.

DESBORDAMIENTO {overflow : x}

CSS21
Para declarar que se hace con lo que no cabe en el área de contenido de un elemento. Valores de x pueden ser:
  • visible (VALOR INICIAL), el contenido no es recortado.
  • hidden, el contenido es recortado aunque no se tendrá acceso a lo que sobresalga
  • scroll, el contenido es recortado pero se presentan barras de desplazamiento para acceder a lo que sobresale.
  • auto, el contenido es recortado y se presentan barras de desplazamiento sólo cuando sea necesario.
  • inherit (NO SE HEREDA).
Se aplica a elementos no reemplazados, elementos a nivel de bloque, celdas de tablas y elementos a nivel de línea dispuestos como bloque.

Ejemplo {overflow}

En el siguiente ejemplo mostramos como un texto puede salirse del alto de un elemento si se especifica la altura y como puede arreglarse con esta propiedad. (Para ver el efecto con claridad es necesario que el navegador tenga la fuente configurada en tamaño de texto mediano). El código de ejemplo es el siguiente, donde hemos suprimido y señalado con puntos suspensivos el texto no necesario para entenderlo. Veáse que se incluye una división sin contenido con una altura de 4em con el único efecto de dejar espacio a las líneas que se sobresalen y no se solapen con la exposición que sigue.
En primer lugar...
<div style="border:dotted 1px; font-size:1.2em; color:olive; ">
Un caso especial...</div>
Luego presentamos...
<div style="border:dotted 1px; font-size:1.2em; color:olive; 
height:2.2em;">Un caso especial...</div>
<div style="height: 4em; "></div> 
La primera forma...
<div style="overflow:hidden; border:dotted 1px; font-size:1.2em; 
color:olive; height:2.2em; ">Un caso especial...</div>
O bien con...
<div style="overflow:scroll; border:dotted 1px; font-size:1.2em; 
color:olive; height:3em; ">Un caso especial...</div>	
O bien con...
<div style="overflow:auto; border:dotted 1px; font-size:1.2em; 
color:olive; height:2.2em; ">Un caso especial...</div>
Resultado:
En primer lugar presentamos un texto largo incluido en una división. Si no se especifica una altura con height, se ajustará la altura del elemento a lo que ocupe el texto:
Un caso especial de conseso de quórum es cuando se emplea el protocolo sesgado asignando peso unitarios a todos los sitios, definiendo el quorum de lectura como 1 y definiendo el quórum de escritura como n (todos los sitios), no haciendo falta usar números de versión. Este sería el protocolo de leer uno, escribir todos.
Luego presentamos la misma división pero limitando su altura (2.2em) para que el contenido se salga a propósito por debajo del borde inferior de la división. En este caso queda establecido por defecto overflow:visible aunque no se declare explicitamente:
Un caso especial de conseso de quórum es cuando se emplea el protocolo sesgado asignando peso unitarios a todos los sitios, definiendo el quorum de lectura como 1 y definiendo el quórum de escritura como n (todos los sitios), no haciendo falta usar números de versión. Este sería el protocolo de leer uno, escribir todos.
La primera forma para evitarlo es con overflow:hidden que ocultará lo que sobresale:
Un caso especial de conseso de quórum es cuando se emplea el protocolo sesgado asignando peso unitarios a todos los sitios, definiendo el quorum de lectura como 1 y definiendo el quórum de escritura como n (todos los sitios), no haciendo falta usar números de versión. Este sería el protocolo de leer uno, escribir todos.
O bien con overflow:scroll que dotará de las barras de desplazamiento tanto horizontal como vertical:
Un caso especial de conseso de quórum es cuando se emplea el protocolo sesgado asignando peso unitarios a todos los sitios, definiendo el quorum de lectura como 1 y definiendo el quórum de escritura como n (todos los sitios), no haciendo falta usar números de versión. Este sería el protocolo de leer uno, escribir todos.
O bien con overflow:auto que dotará de las barras de desplazamiento pero sólo cuando sea necesario (en este caso sólo la vertical):
Un caso especial de conseso de quórum es cuando se emplea el protocolo sesgado asignando peso unitarios a todos los sitios, definiendo el quorum de lectura como 1 y definiendo el quórum de escritura como n (todos los sitios), no haciendo falta usar números de versión. Este sería el protocolo de leer uno, escribir todos.

SOLAPAMIENTO {z-index : x}

CSS21
Para especificar la profundidad de un elemento respecto a los que se solapan. Valores de x pueden ser:
  • auto. (VALOR INICIAL). El nivel de profundidad es el mismo que el del elemento padre donde está contenido.
  • Un número entero que supone una profundidad (o nivel de pila) de la caja generada. Los valores son 0,1,2,... tal que a mayor nivel tendrá una profundidad más alta.
  • inherit. (NO SE HEREDA).
Se aplica sólo a elementos posicionados.

En el siguiente ejemplo componemos un sitio web muy simple para una empresa para ver un uso de esta propiedad. Se trata de crear una página Inicio con vínculos a otras páginas (Empresa, Productos, Contacto). Para ello establecemos una "botonera" en la parte superior de la página para acceder a esos vínculos, tal como muestra esta porción de imagen:

z-index

En el código del CSS establecemos una clase "boton" (con fondo amarillo) dotándola de z-index:0 por defecto, tal que estarían al fondo. Por encima de los botones estaría la clase "contenido" (con fondo azul) dotada z-index:1, que incluso la subimos un poco con top:-0.25em para que tape parte de los botones. Creamos una clase "botonera" con el único objeto de englobar los botones que presentaremos en elementos <span> dentro de un elemento <div>. Por último le quitamos la decoración de subrayado a los vínculos <a> para que no se muestren. Con esto y otras configuraciones de color y bordes, el archivo "base.css" en estilo externo queda como sigue:

.boton {
	position: relative; 
	z-index: 0; 
	border: solid 1px;  
	font: 20px 'Arial Narrow'; 
	background-color: yellow; 
	padding-left: 8px; 
	padding-right: 8px; 
	padding-bottom: 5px; 
	}
.botonera {
	margin-left: 5px; 
	}
.contenido {
	z-index: 1; 
	position: relative; 
	top: -0.25em; 
	border: solid 1px; 
	background-color: aqua; 
	border-color: navy; 
	padding: 10px; 
	height: 300px; 
	font: 16px 'Palatino Linotype'; 
	}
a.pes {
	color: green; 
	text-decoration: none;
	}
a.pes:visited {
	color: green;
	}

Recuérdese que hemos dado posicionamiento (relativo en este caso) para que pueda funcionar la propiedad de solapamiento en los elementos que lo lleven. El código de la página "index.html" (la porción suficiente para ver la vinculación externa con el archivo "base.css" y el cuerpo) es la que se muestra a continuación. En ella podemos ver que modificamos z-index:2 al primer span de la clase "boton" que se corresponde con la página de Inicio (index.html), de tal forma que este elemento pasa a situarse por encima de todos, resaltándose. Esto es así pues el estilo local del elemento anula al estilo externo. Al mismo tiempo no ponemos vínculo en esta página, pues es en la que estamos. Mientras al resto de páginas le cambiamos el color a verde para que resalten menos, llevando cada uno su vínculo.

...
    <link rel="stylesheet" type="text/css" href="base.css" />
</head>
<body>
    <div class="botonera">
        <span class="boton" style="z-index:2; ">Inicio</span>
        <span class="boton" style="color:green;">
        	<a class="pes" href="empresa.html">Empresa</a></span>
        <span class="boton" style="color:green;">
        	<a class="pes" href="productos.html">Productos</a></span>
        <span class="boton" style="color:green;">
        	<a class="pes" href="contacto.html">Contacto</a></span>
    </div>
    <div class="contenido">
...

Ahora sólo hay que copiar la página "index.html" para crear "empresa.html", "productos.html" y "contacto.html", pero cambiando la línea afectada. Por ejemplo, en la página "empresa.html" modificaríamos los <span class="boton"...> siguientes con respecto a los anteriores, lo que hace que se resalte a un z-index:2 el botón de "Empresa" mientras que el de "Inicio" pasa a color no resaltado verde:

...
<title>Empresa.html</title>
...
<span class="boton" style="color:green;"><a href="index.html">Inicio</a></span>
<span class="boton" style="z-index:2; ">Empresa</span>
...
Resultado:
Ver resultado en Index.html

VISIBILIDAD {visibility : x}

CSS21
Para ocultar elementos sin sacarlos del flujo. Los valores de x pueden ser
  • visible. (VALOR INICIAL).
  • hidden. Para ocultar un elemento sin extraerlo del flujo, tal que el navegador le reserva su espacio. Veáse al respecto {display} con el valor none que también oculta un elemento pero extrayéndolo completamente del flujo, de tal forma que el navegador no le reserva espacio pues lo considera como que no existe.
  • collapse. Para filas, columnas, grupos de filas y grupos de columnas, este valor las oculta quedando el hueco disponible para otro contenido, aunque estos huecos no afectan a la composición de la tabla. Si se aplica a otros elementos de tabla entonces tomará el valor hidden.
  • inherit. (SE HEREDA).
Se aplica a todos los elementos.

Ejemplo {visibility}, valores visible, hidden

En este ejemplo mostramos los valores visible, hidden:
Un bloque en línea visible con <span class="codigo">visibility:visible</span>: 
[<span style="visibility:visible;">VISIBLE</span>]. 
Un bloque en línea invisible con <span class="codigo">visibility:hidden</span>: 
[<span  style="visibility:hidden">INVISIBLE</span>]. 
Un bloque en línea oculto con <span class="codigo">display:none</span>: 
[<span style="display:none;">OCULTO</span>].
Resultado:
Un bloque en línea visible con visibility:visible: [VISIBLE]. Un bloque en línea invisible con visibility:hidden: [INVISIBLE]. Un bloque en línea oculto con display:none: [OCULTO].

Ejemplo {visibility}, valor collapse

En este ejemplo usamos el valor collapse para ocultar la segunda fila de una tabla, es decir, para ponerla como "no visible", de tal forma que se preserve el espacio que ocupaba.
<table border="1" style="background-color: aqua; " >
    <tr style="background-color: yellow; ">
        <td>(1,1)</td><td>(1,2)</td><td>(1,3)</td>
    </tr>
    <tr style="visibility: collapse; background-color: yellow; ">
        <td>(2,1)</td><td>(2,2)</td><td>(2,3)</td>
    </tr>
    <tr style="background-color: yellow; ">
        <td>(3,1)</td><td>(3,2)</td><td>(3,3)</td>
    </tr>                    
</table>
Resultado:
(1,1)(1,2)(1,3)
(2,1)(2,2)(2,3)
(3,1)(3,2)(3,3)

En principio la fila que es quitada debería dejar el espacio que ocupaba, tal como lo muestra Safari:
tabla
Los otros navegadores Explorer, Firefox y Opera la ocultan (lo tratan como si fuera el valor hidden).

ALINEACIÓN VERTICAL {vertical-align : x}

CSS21
Para alinear verticalmente elementos. Los valores de x pueden ser:
  • baseline para alinear la línea base con la del padre (VALOR INICIAL)
  • sub para situarlo como subíndice del padre
  • super para situarlo como superíndice del padre
  • top para alinear la parte superior con la superior del elemento más alto en la línea
  • middle para alinear la mitad con la mitad del elemento padre
  • bottom para alinear la parte inferior con la inferior del elemento más bajo en la línea
  • text-top para alinear la parte superior con la superior del padre
  • text-bottom para alinear la parte inferior con la inferior del padre
  • Una medida que también puede adoptar valores negativos.
  • Un porcentaje que vendrá referido al valor de al altura de línea {line-height} del propio elemento.
  • inherit (NO SE HEREDA)
Se aplica sólo a elementos en línea y a celdas de tabla.

Ejemplo {vertical-align}

En este ejemplo aplicamos los valores posibles a elementos <span>.
<div style="border:solid 1px;">Valores:
<span style="vertical-align:baseline; color:red; border:dotted 1px; ">baseline</span>
<span style="vertical-align:sub; color:red; border:dotted 1px;">sub</span>
<span style="vertical-align:super; color:red; border:dotted 1px;">super</span>
<span style="vertical-align:top; color:red; border:dotted 1px;">top</span>	
<span style="vertical-align:middle; color:red; border:dotted 1px;">middle</span>
<span style="vertical-align:bottom; color:red; border:dotted 1px;">bottom</span>
<span style="vertical-align:text-top; color:red; border:dotted 1px;">text-top</span>
<span style="vertical-align:text-bottom;  color:red; border:dotted 1px;">text-bottom</span>	
<span style="vertical-align:20px; color:red; border:dotted 1px;">30px</span>
<span style="vertical-align:50%; color:red; border:dotted 1px;">50%</span>
</div>
Resultado:
Valores: baseline sub super top middle bottom text-top text-bottom 30px 50%

SITUAR TÍTULO DE UNA TABLA {caption-side : x}

CSS21
El valor de "x" para situar el título (elemento <caption>) de una tabla puede ser:
  • top, para situar el título en la parte superior de la tabla.
  • bottom, para situar el título en la parte inferior de la tabla.
  • inherit (SE HEREDA).
En XHTML Transicional puede además situar el título en la parte izquierda de la tabla con left y en la parte derecha con right. El título siempre es externo a la tabla. Se aplica sólo a elementos <caption> y aquellos que tengan la propiedad {display} con el valor caption para configurar el título de una tabla.

Ejemplo {caption-side}

En este ejemplo configuramos la posición del título de una tabla en varios lugares. La última tabla se realiza con los valores de {display} para configurar un elemento tabla. Para ello incorporamos el siguiente código de estilo interno en esta misma página para uso exclusivo de este ejemplo:
<style type="text/css">
    /*TABLA DE CSS para el ejemplo de id="caption-side"*/
    div.tabla {display: table; } 
    div.titulo {display: table-caption; text-align: center; }
    div.fila {display: table-row; }
    div.celda {display: table-cell; border: inset 1px; }
</style>
El resultado es óptimo en Netscape y Firefox. Opera no interpreta las posiciones derecha e izquierda. Explorer no posiciona el título, además de que no genera tablas con estilo de forma adecuada. El código de las tablas es el siguiente donde los puntos suspensivos repite lo anterior:
XHTML con el título en la parte superior:
<table border="1">
    <caption style="caption-side: top; color: red;">Título</caption>
    <tr><td>celda</td><td>celda</td></tr>
</table>
Tabla XHTML con el título en la parte inferior:
<table border="1">
    <caption style="caption-side: bottom; color: red;">Título</caption>
    ...
Tabla XHTML con el título en la parte derecha:
<table border="1">
    <caption style="caption-side: right; color: red;">Título</caption>
    ...
Tabla XHTML con el título en la parte izquierda:
<table border="1">
    <caption style="caption-side: left; color: red;">Título</caption>
    ...
Tabla CSS con el título en la parte inferior:
<div class="tabla" style="border: outset 1px; border-spacing: 2px; ">
    <div class="titulo" style="caption-side: bottom; color: red;">Título</div>
    <div class="fila"><div class="celda">celda</div>
        <div class="celda">celda</div></div>
</div>
Resultado:

Sólo Firefox sitúa adecuadamente los títulos en los laterales.

Tabla XHTML con el título en la parte superior:
Título
celdacelda
Tabla XHTML con el título en la parte inferior:
Título
celdacelda
Tabla XHTML con el título en la parte derecha:
Título
celdacelda
Tabla XHTML con el título en la parte izquierda:
Título
celdacelda
Tabla CSS con el título en la parte inferior:
Título
celda
celda

MOSTRAR U OCULTAR CELDAS VACÍAS {empty-cells : x}

CSS21
El valor de "x" nos permite mostrar u ocultar celdas vacías de una tabla con los valores:
  • show, se dibujan los bordes alrededor de las celdas vacías.
  • hide, no se dibujan bordes alrededor de celdas vacías..
  • inherit (SE HEREDA).
Se aplica sólo a elementos <th>, <td> y aquellos que tengan la propiedad {display} con el valor table-cell que en ambos casos son elementos de celdas de una tabla, aunque se incluye dentro del estilo del elemento <table> para lograr que afecte a todas las celdas de la tabla. Sólo tendrá efecto en el modelo de bordes abiertos, donde puede apreciarse el borde todas de las celdas.

Se consideran celdas vacías las que no tienen contenido, como por ejemplo <td></td> y a efectos de presentación las que tengan la propiedad {visibility} con el valor hidden para ocultarlas. Sin embargo puede ponerse una celda sin que visualmente aparezca nada pero a efectos de esta propiedad se considera con contenido incluyendo la entidad de carácter de espacio indivisible <td>&nbsp;</td>. Es recomendable poner esta entidad de carácter siempre para indicar que la celda está vacía pero que deben mostrarse sus bordes si no queremos hacer uso de la propiedad {empty-cells}.

Ejemplo {empty-cells}

En este ejemplo tenemos una tabla con la celda (fila, columna)=(1,2) que tiene un contenido &nbsp; mostrándose sus bordes. La celda (2,2) no se muestran sus bordes debido al uso de {empty-cells} con valor hide y dado que no tiene contenido. La celda (3,3) no se muestra debido al uso de {visibility} con valor hidden en esa celda que oculta la celda aunque tiene contenido.
<table border="1" style="empty-cells: hide;">
    <tr><td>celda</td><td>&nbsp;</td>
        <td>celda</td></tr>
    <tr><td>celda</td><td></td>
        <td>celda</td></tr>
    <tr><td>celda</td><td>celda</td>
        <td style="visibility: hidden;">celda</td></tr>                    
</table>
Resultado:
celda celda
celdacelda
celdaceldacelda