Presentación de una tabla: Reformateo dinámico

Una de las primeras cosas que parece sorprendernos es que, sin especificar ningún ancho de la tabla ni de las columnas, el navegador ajusta los mismos a los contenidos de las celdas. Es lo que se conoce como reformateo dinámico. Resultaría arriesgado especificar un ancho fijo en píxeles para la tabla y más para las columnas, sin saber a ciencia cierta si el contenido se presenta comódamente en esos anchos. En cambio, cuando no se especifican anchos para las columnas, el navegador adopta la pauta de modificar su tamaño dinámicamente para adaptar los anchos de los contenidos al ancho total disponible de la tabla. Si éste no es especificado tomará todo el ancho disponible que necesite en su ventana o contenedor donde esté ubicado. Si el ancho de la tabla es especificado y el contenido es muy largo, el navegador adaptará el contenido de texto en tantas líneas como necesite, ajustándose como mínimo al ancho de la palabra más larga. Si el contenido es una imagen y como ésta no puede dividirse en varias líneas, entonces el ancho especificado se ignora.

En este primer ejemplo tenemos una tabla con contenido que ocupan poco espacio. El navegador tratará en la medida de lo posible de no cortar las frases en diferentes líneas mientras tenga espacio horizontal en la ventana disponible. Irá ajustando el ancho de cada columna para que quepa el contenido de tal forma que el ancho de la tabla estará condicionada por esos anchos de contenidos.

<table border="1">
    <tr>
        <td>Inicio fila</td>
        <td>Medio fila</td>
        <td>Fin fila</td>
    </tr>
</table>
            

A continuación tampoco se indica ancho de la tabla, pero la columna del centro tiene un contenido muy largo. El navegador ajustará los anchos de las tres columnas según sus contenidos, por lo que debe esperar a recibirlos todos para poder tratarlos. Se observa como se da mayor preponderancia para conceder ancho cuanto mayor sea el contenido. Así la columna central tiene mayor ancho, luego la final y por último la inicial, lo que va en función de lo que ocupan los contenidos.

<table border="1">
    <tr>
        <td>Inicilo fila</td>
        <td>Este enfoque.....</td>
        <td>Final de fila, con.....</td>
    </tr>
</table>                
            

Ahora bien, si estamos empeñados en especificar el ancho de la tabla, el navegador lo respetará siempre que quepa el contenido. En este ejemplo usamos una tabla con una única celda cuyo contenido será más largo que el ancho que se especifica de 20 píxeles, ajustando al ancho de la palabra más larga e ignorando esos 20 píxeles.

Este cuadro azul 
<div style="border: solid blue 1px; width: 20px; "> </div>
tiene un ancho de 20 píxeles, longitud a la que se configuró el ancho de esta tabla:
<table width="20" border="1">
    <tr>
        <td>Aterciopeladamente el atardecer mostró su color más vivo.</td>
     </tr>
</table>                
            

Por último para finalizar podemos fijar el ancho de la tabla en porcentajes del espacio disponible. Nuevamente primero se adaptará a los contenidos de la palabra más larga y luego respetará el ancho fijado. Esto se puede observar reduciendo el ancho de la ventana del navegador hasta que sea menor que el ancho mínimo de la tabla, momento en que el cuadro azul se redibuja pero no así la tabla, pues llega un momento en que no puede reducir la longitud de la palabra más larga en cada columna.

Este cuadro azul 
<div style="border: solid blue 1px; width: 50%; "> </div>
tiene un ancho del 50% de la ventana disponible, mismo ancho que se fija 
para la tabla: 
<table width="50%" border="1" >
    <tr><td>FECHA</td><td>CONCEPTO</td>
        <td>IMPORTE</td></tr>
    <tr><td>10/11/07</td><td>Factura</td>
        <td>3.540,26 €</td></tr>
    <tr><td>12/11/07</td><td>Gastos bancos</td>
        <td>150,36 €</td></tr>
    <tr><td> </td><td>TOTAL..........</td>
        <td>3.690,62 €</td></tr>
</table>                
            

Ejemplo <table border>: Colores y forma de bordes de la tabla (con atributos)

1)...
<div style="color:black">
    <table border="10" cellspacing="5">
        <tr><td>celda</td><td>celda</td></tr>
        <tr><td>celda</td><td>celda</td></tr>                        
    </table>                    
</div>
2)...
<div style="color:blue">
    <table border="10" cellspacing="5">
...
3)...
<div style="color:blue">
    <table border="10" cellspacing="5" style="color: red;">
...
4)...
<div style="color:blue">
    <table border="10" cellspacing="5" style="border-color: red;">
...      
            

Con los navegadores Internet Explorer 7, Firefox 2.0 y Opera 9.24 hicimos pruebas hace un par de años y ahora en el año 2010 nos volvemos a encontrar que esta forma diferente de tratar el color en las tablas por distintos navegadores no ha cambiado. Vea unas capturas de pantallas que hemos realizado con los navegadores señalados (versiones actualizadas en junio 2010):

Explorer 8	Safari 4.0	Firefox 3.5	Opera 10.5

Se observa cierta similitud Explorer y Safari y por otro lado Firefox y Opera. Pienso que no merece la pena saber cuál es la que más se adapta al estándar, si es que esto de la aplicación del color está especificado, pero deberían ponerse de acuerdo.

Ejemplo <table border>: Procedimiento para especificar bordes con estilos. Modelos de bordes abiertos y cerrados.

• {border}, lo cual permitirá dar color, forma y grosor a los bordes agrupados o individualmente.
• {border-collapse}, lo que nos permite optar por un modelo de bordes abiertos con separación entre bordes internos o un modelo de bordes cerrados para anular esa separación (valores separate o collapse respectivamente).
• {border-spacing}, que se comporta como el atributo <table cellspacing>.
• {padding} que aplicado a las celdas de forma agrupada o individualmente se comporta igual que <table cellpadding>.

La mejor forma es declarar en estilo interno en la cabecera del documento (o en externo) los tipos de tablas que deseamos para nuestro documento. Por ejemplo, en este documento hemos declarado con el elemento <style> dos clases de tablas: "abierta" y "cerrada" para albergar tablas de uno u otro modelo que contemplen o no la separación entre bordes internos de la tabla. En la clase abierta también definimos una clase "d" para celdas que necesitemos con borde doble.

<style type="text/css">
    /*MODELO BORDES SÓLIDOS ABIERTOS*/
        table.abierta {border:red solid 1px; border-collapse:separate; 
            border-spacing:5px 8px; }
        table.abierta td {border:blue solid 1px; padding:5px;  }
    /*Para celdas con borde doble*/
        table.abierta td.d {border:blue double 5px; padding:5px;}
    /*MODELO BORDES SÓLIDOS CERRADOS*/    
        table.cerrada {border:red solid 1px; border-collapse:collapse;  }
        table.cerrada td {border:blue solid 1px; padding:5px; }    
</style>
            

<div>
    Aquí tenemos..."abierta"...
    <table class="abierta">
        <tr><td>celda</td><td>celda</td></tr>
        <tr><td>celda</td><td>celda</td></tr>                        
    </table>                    
</div>
<div>
    La misma pero...."cerrada"...
    <table class="cerrada">
...
<div>
    Esta es una..."abierta"...
    <table class="abierta" style="border: orange outset 10px;">
        <tr><td>celda</td>
            <td class="d">celda</td></tr>   
        <tr><td>celda</td>
            <td class="d">celda</td></tr> 
...               
            

Hemos capturado la imagen de las pantallas de las tablas de este ejemplo agrupándolas por cada uno de los cuatro navegadores consultados, los cuales tiene versiones actualizadas en Junio 2010. Se observa que todos se comportan igual ahora usando estilos (comparar con la nota del tema anterior). Bueno, hay pequeñas diferencias en la presentación del borde cincelado, pero es una cuestión menor.

Explorer 8	Safari 4.0	Firefox 3.5	Opera 10.5

Nota: Obtenemos una imagen en pantalla y la comprimimos con el formato jpg para ahorrar espacio a costa de perder calidad en el color. El azul en los bordes finos casi parece negro (en lugar de azul más claro), pero en la realidad observada en los cuatro navegadores no se aprecian diferencias en cuanto al color.

Ejemplo <table cellspacing>

• Un borde externo sólido verde de 5px configurado con la propiedad de estilo {border}, no usándose el atributo de borde externo <table border>.
• Separación entre celdas de 10px configurado con el atributo <table cellspacing> para todas las celdas de la tabla.
• Relleno interno de las celdas de 10px configurado con el atributo <table cellpadding> para todas las celdas de la tabla.
• Bordes sólidos rojos de las celdas de 5px configurados con la propiedad de estilo {border} en cada una de las celdas de forma individual.

<table style="border:solid green 5px;" cellspacing="10" 
    cellpadding="10"> 
    <tr>
        <td style="border:solid red 5px; ">celda</td>
        <td style="border:solid red 5px;">celda</td>
    </tr>
</table>                   
            

Ejemplo <table cellpadding>

<table cellpadding="20" border="1">
    <tr><td>contenido</td>
    <td>contenido</td></tr>
</table>
            

Ejemplo <table frame>

<table frame="void" border="3">
<tr><td style="color:red;">void</td><td>ninguno</td></tr>
</table>
...etcétera...	
            

Ejemplo <table frame>: Efecto de frame y border-collapse

<table border="10">
    <tr><td>celda</td><td>celda</td></tr>
</table>      
...                
<table border="10" frame="vsides">
...
<table border="10" frame="vsides" style="border-collapse: separate;">
...
<table border="10" style="border-collapse: collapse;">
...
<table border="10" frame="vsides" style="border-collapse: collapse;">
... 
            

Ejemplo <table rules>

<table border="1" rules="none">
<tr><td>1,1</td><td>1,2</td>
    <td>1,3</td></tr>
...
            

Ejemplo <table rules>: Efecto de rules y los modelos de bordes abiertos y cerrados

...
<table border="1">
    <tr>
        <td>(1,1)</td>
...
<table border="1" rules="cols">
    <tr>
        <td>(1,1)</td>
...
<table style="border-collapse: separate; 
    border: green solid 1px; ">
    <tr>
        <td style="border: green solid 1px;">(1,1)</td>
...
<table rules="cols" style="border-collapse: separate; 
    border: green solid 1px; ">
...              
<table rules="cols" style="border-collapse: collapse; 
    border: green solid 1px; ">
...          
        

Ejemplo <table align>

Tabla centrada:
<table align="center" border="1">
    <tr><td>celda</td><td>celda</td></tr>
</table> 
<table align="left" border="1">
    <tr><td>celda</td><td>celda</td></tr>
</table>
Ejemplo de tabla alineada a la izquierda con el texto a la derecha.
<div style="clear: left;"></div>
<table align="right" border="1">
    <tr><td>celda</td><td>celda</td></tr>
</table>
Ejemplo de tabla alineada a la derecha con el texto a la izquierda.
<div style="clear: right;"></div>
            

Ejemplo <table gbcolor>

<table bgcolor="aqua" border="10">
<tr><td>celda1</td><td>celda2</td></tr>
</table>
            

Ejemplo <caption align>

Los navegadores no actúan de la misma forma. Especialmente significativa es la diferencia de Firefox que entiende que debe alinearse el elemento <caption> también con respecto a los laterales derecho e izquierdo de la tabla, en lugar de alinear el texto horizontalmente dentro de <caption> como hacen Explorer y Opera. Safari sólo ejecuta este atributo parcialmente. En los resultados comentaremos cada caso.

En cuanto a alinear en los lados de una tabla hemos de decir que con estilos podemos alinear horizontalmente el texto con la propiedad {text-align} pero dentro del propio elemento <caption> y no en relación con la tabla. Por lo tanto con XHTML estricto ni con CSS 2.1 (la propiedad {caption-side} sólo permite posicionar arriba y abajo), no habría forma de situar el título en los laterales tal como lo entiende Firefox.

Título alineado a la izquierda:<br />
<table border="1" style="color: blue;">
    <caption align="left">Tabla con dos celdas</caption>
    <tr><td>celda1</td><td>celda2</td></tr>
</table>
...
            

Ejemplo <col span>: Aplicando estilos a las columnas

1. Ancho y color de fondo, estilos que son aplicados por todos.
2. Imagen de fondo, aplicado por todos.
3. Color de primer plano, fuente, se ignora.
4. Bordes y márgenes, ignorado por todos.
5. Relleno y contorno, ignorado por todos.

<table border="1" style="color: black; ">
    <col style="background-color: aqua; width: 100px;" />
    <col width="100" style="vertical-align: top; 
        background-image: url(ejemplos/tabla/img_1.jpg); " />                     
    <col width="100" style="color: red; font: bold 2em 'Arial Black'; 
        text-align: center; " />
    <col width="100" style="border: green double 5px; margin-left: 20px; " />
    <col width="100" style="padding-left: 20px; outline: purple dotted 1px; " /> 
    <tr><td>1,1</td><td>1,2</td>......
            

Ejemplo <col span>, controlar número de columnas abarcadas

Abarcamos 3 columnas...
<table border="1">
    <col span="3" width="100"/>
    <tr><td>1,1</td><td>1,2</td><td>1,3</td></tr>
...
Ahora abarcamos 2 columnas...
<table border="1">
    <col span="2" width="100"/>
    <tr><td>1,1</td><td>1,2</td><td>1,3</td></tr>
...
Por último...
<table border="1">
    <col />
    <col span="2" width="100"/>
    <tr><td>1,1</td><td>1,2</td><td>1,3</td></tr>
...                  
            

Ejemplo <col width>: Presentación incremental con anchos fijos

En todos los navegadores consultados se observa el mismo efecto.

Este bloque ...
<div style="border: solid 1px; width: 120px; margin: 10px; 
    text-align: center;">
    120px
</div>   
<div style="border: solid 1px; width: 120px; margin: 143px; 
    text-align: center;">
    120px
</div>   
Esta tabla ...
<table border="1" cellpadding="10" cellspacing="10">
    <col width="100" />
    <col width="100" />
    <tr><td><img src="ejemplos/tabla/contenido.jpg" width="100" 
        height="50" alt="contenido.jpg" title="contenido.jpg de 100x50" />
        </td><td>celda</td></tr>                        
</table>               
            

Resultado:

Estos bloques tiene anchos de 120 píxeles y situado con un margen de 10 píxeles desde su posición a la izquierda para la primera celda y 143 píxeles para la segunda (sumando también los 3 píxeles que ocupan los bordes de las celdas y tabla a la izquierda):

120px

120px

Esta tabla tiene dos columnas con anchos especificados de 100 píxeles cada una. Sin embargo además tiene un relleno de 10 píxeles que deben sumarse al ancho para dar un total para cada celda de 120 píxeles.

celda

Ejemplo <col width>: Presentación incremental con anchos porcentuales

Este bloque...
<div style="border: solid 1px; width: 50%; margin: 10px; text-align: center;">
    50%
</div>                   
Esta tabla...
<table border="1" cellpadding="10" cellspacing="10">
    <col width="50%" />
    <tr><td>celda</td></tr>                        
</table>                
            

Ejemplo <col width>: Presentación incremental con anchos proporcionales

En este ejemplo dotamos a una tabla de un ancho de 340 píxeles. Queremos distribuirlo en tres columnas con una separación entre celdas de 10 píxeles. La primera deberá tener 3 partes del ancho disponible, la segunda 2 partes y la tercera una parte. ¿Cuál sería el ancho final de cada columna?. Al ancho total de la tabla le descontamos 4 separaciones entre celdas, contando con los laterales, lo que supone 340-(4x10) = 300 píxeles disponibles para las columnas. Como tenemos 3+2+1=6 partes, la primera llevará 3/6 de 300 que son 150 píxeles, la segunda 2/6 de 300 que son 100 píxeles y la tercera 1/6 de 300 que son 50 píxeles. Hemos añadido unos bloques con tamaños para poder compararlos con los que finalmente pondrá el navegador a cada columna.

Estos bloques...
<div style="border: solid 1px; width:150px; margin-left: 10px; text-align: center;">
    150px
</div>   
<div style="border: solid 1px; width:100px; margin-left: 170px; text-align: center;">
    100px
</div>   
 <div style="border: solid 1px; width:50px; margin-left: 280px; text-align: center;">
    50px
</div>                  
Esta tabla...
<table width="340" border="1" cellspacing="10">
    <col width="3*" />
    <col width="2*" />
    <col width="1*" />                    
    <tr><td>celda</td><td>celda</td>
    <td>celda</td></tr>                        
</table>         
            

Este ejemplo funcionó en los términos expresados antes con los navegadores Netscape 9 y Firefox 2, durante las pruebas realizadas en 2007-2008, cuando aún Netscape estaba en vigor. En los otros navegadores consultados en aquel momento (Explorer y Opera) no se observó que se ejecutara. La captura de pantalla siguiente es lo que aparecía en Netscape 9, donde se observaba que los anchos de las columnas aplicando la presentación incremental con anchos proporcionales (n*) eran iguales que cada uno de los tres testigos de muestra:

Actualmente (junio 2010), todos los navegadores consultados (Explorer, Firefox, Opera y Safari) parecen no aplicar los anchos proporcionales tal como se explica aquí. Aunque también es cierto que los tres se comportan igual, pero desconozco que procedimiento están aplicando.

Ejemplo <col char>

12.350,64
   431,2
 1.000
     0,789
            

<table border="1">
    <col align="char" char="." />
    <tr><th>Importes</th></tr>
    <tr><td>12.350,64</td></tr>
    <tr><td>431,2</td></tr>
    <tr><td>1.000</td></tr>
    <tr><td>0,789</td></tr>
</table>                
            

Ejemplo <col align>

<table border="1">
    <col align="left" />
    <col align="right" />
    <col align="center" />
    <col align="justify" />
    <tr><th>izquierda</th><th>derecha</th><th>centrado</th><th>justificado</th></tr>                      
    <tr><td>1</td><td>2</td><td>3</td>
    <td>Este enfoque...
    </td>
    </tr>
 </table>             
            

Ejemplo <col align>: Alinear horizontalmente el contenido de una columna con CSS

<table border="1">
    <col style="text-align: left; " />
    <col style="text-align: right; " />
    <col style="text-align: center; " />
    <col style="text-align: justify; " />
    <tr><th>izquierda</th><th>derecha</th><th>centrado</th><th>justificado</th></tr>                      
    <tr><td>1</td><td>2</td><td>3</td>
    <td>Este enfoque...
    </td>
    </tr>
 </table>              
            

Ejemplo <col valign>

Explorer y Opera lo ejecutan adecuadamente. Firefox y Safari lo ignoran.

<table border="1">
    <col valign="top" />
    <col valign="middle" />
    <col valign="bottom" />
    <col valign="baseline" />
    <tr><th>TOP</th><th>MIDDLE</th>
        <th>BOTTOM</th><th>BASELINE</th>
        <th>X</th></tr>
    <tr><td>1</td><td>2</td>
        <td>3</td><td>4</td>
        <td>1<br />2<br/>3<br /></td></tr>                    
</table>                
            

Ejemplo <col valign>: Alineación vertical con CSS del contenido de una columna

<table border="1">
    <col style="vertical-align: top;" />
    <col style="vertical-align: middle;"" />
    <col style="vertical-align: bottom;" />
    <col valign="vertical-align: baseline;" />
    <tr><th>TOP</th><th>MIDDLE</th>
        <th>BOTTOM</th><th>BASELINE</th>
        <th>X</th></tr>
    <tr><td>1</td><td>2</td>
        <td>3</td><td>4</td>
        <td>1<br />2<br/>3<br /></td></tr>                    
</table>              
            

Ejemplo <colgroup span>

En esta tabla....
<table border="1">
    <colgroup span="2" width="100">
        <col width="50" />    
        <col width="30" />
    </colgroup>
    <tr><td>1</td><td>2</td></tr>
</table>
Ahora el primer grupo....
<table border="1">
    <colgroup style="background-color: lime;" /><!--1 columna-->
    <colgroup span="2" width="100" /><!--2 columnas-->
    <colgroup>
        <col span="2" width="50" /><!--2 columnas-->
    </colgroup>
    <tr><td>1</td><td>2</td><td>3</td>
        <td>4</td><td>5</td></tr>
</table>                  
            

Ejemplo <tr align>

<table border="1">
    <tr align="left"><td>Izquierda</td></tr>
    <tr align="center"><td>Centro</td></tr>
    <tr align="right"><td>Derecha</td></tr>
    <tr align="justify"><td>Justificado:....</td></tr>                    
</table>                    
            

Ejemplo <tr valign>

<table border="1">
    <tr valign="top">
        <td>top</td><td>1<br />2</td></tr>
    <tr valign="middle">
        <td>middle</td><td>1<br />2</td></tr>
    <tr valign="bottom">
        <td>bottom</td><td>1<br />2</td></tr>
    <tr valign="baseline">
        <td>baseline</td><td>1<br />2</td></tr>                    
</table>               
            

Ejemplo <th rowspan>, <td rowspan>

<table border="1">
    <tr><td>1,1</td><td rowspan="2">1,2</td><td>1,3</td>
    </tr>
    <tr><td>2,1</td><td>2,3</td></tr>
    <tr><td>3,1</td><td>3,2</td><td>3,3</td></tr>                    
</table>                
            

Ejemplo <th colspan>, <td colspan>

<table border="1">
    <tr><td>1,1</td><td>1,2</td><td>1,3</td></tr>
    <tr><td colspan="2">2,1</td><td>2,3</td></tr>
    <tr><td>3,1</td><td>3,2</td><td>3,3</td></tr>                    
</table>                 
            

Ejemplo <th colspan>, <td colspan>

<table border="1">
    <tr><td>1,1</td><td>1,2</td><td>1,3</td>
        <td>1,4</td></tr>
    <tr><td>2,1</td><td rowspan="2" colspan="2">2,2</td>
        <td>2,4</td></tr>
    <tr><td>3,1</td><td>3,4</td></tr>    
    <tr><td>4,1</td><td>4,2</td><td>4,3</td>
        <td>4,4</td></tr>                 
</table>                  
            

Ejemplo <th align>, <td align>

<table border="1" width="100%">
    <tr><th>Alineación</th>
        <th>superior</th><th>centro</th><th>inferior</th>
        <th>X</th></tr>
    <tr><th>izquierda</th>
        <td valign="top" align="left">top,left</td>
        <td valign="middle" align="left">middle,left</td>
        <td valign="bottom" align="left">bottom,left</td>
        <td>1<br />2</td></tr>
    <tr><th>centro</th>
        <td valign="top" align="center">top,center</td>
        <td valign="middle" align="center">middle,center</td>
        <td valign="bottom" align="center">bottom,center</td>
        <td>1<br />2</td></tr>
    <tr><th>derecha</th>
        <td valign="top" align="right">top,right</td>
        <td valign="middle" align="right">middle,right</td>
        <td valign="bottom" align="right">bottom,right</td>
        <td>1<br />2</td></tr>
</table>