Malditas tablas (Parte 2)

En esta segunda parte está dedicada a mostrar las etiquetas y las propiedades CSS exclusivas utilizadas para crear tablas. Si bien la mayoría son conocidas, hay algunas que, lamentablemente, no son usadas frecuentemente y son fundamentales para mejorar la velocidad de la carga de las páginas y simplificar el código.

Estas son las etiquetas HTML más utilizadas para crear tablas:

TABLE  permite crear la tabla
align = left|center|right posición respecto al documento
background = url imagen de fondo
bgcolor = color el color de fondo
border = pixeles ancho del borde (cero = sin borde)
cellspacing = valor espacio entre el borde y el contenido de las celdas
cellpadding = valor espacio entre las celdas
frame = void|above|below|hsides|lhs|rhs|vsides|box|border
  indica qué bordes alrededor de la tabla se mostrarán
  above: sólo arriba
  below: sólo abajo
  border, box: los cuatro lados
  hsides: arriba y abajo
  lhs: sólo el izquierdo
  rhs: sólo el derecho
  void: ninguno (este es el valor por defecto)
  vsides: el derecho y el izquiedo
rules = none|groups|rows|cols|all muestra los bordes internos
  all: entre filas y columnas
  cols: sólo entre columnas
  groups: entre grupos (THEAD, TFOOT, TBODY, etc)
  none: ninguno (este es el valor por defecto)
  rows: sólo entre filas
summary = texto sumario para usar con navegadores no-visuales
width = longitud un valor o un porcentaje que indica el ancho

TR crea una fila
TH crea una celda encabezado para una fila o columna
TD crea una celda
en los tres casos, los posibles atributos son:
align, valign controlan la alineación horizontal y vertical
bgcolor indica el color de fondo
width, height especifican el ancho y el alto
además, las celdas TH y TD tienen estos atributos:
colspan = cantidad combina una cantidad de columnas
rowspan = cantidad combina una cantidad de filas

COL define datos de una columna
align, valign controlan la alineación horizontal y vertical
span indica la cantidad de columnas
width especifica el ancho

Además de aquellas hay una serie de tags "opcionales"

CAPTION crea una fila específica para el título
TBODY identifica el cuerpo de la tabla (el contenido)
THEAD identifica el encabezado
TFOOT identifica el pie de página
y en los todos los casos, los posibles atributos son: align y valign

Hay muy pocas propiedades CSS específicas para las tablas:

border-spacing: tamaño

Indica la distancia que separa los bordes de las celdas adyacentes. Si sólo se especifica una medida, ésta da el espacio horizontal y vertical. Si se especifican dos, la primera da el espacio horizontal y la segunda el espacio vertical.

border-collapse: collapse | separate

Determina como serán tratados los bordes de dos celdas consecutivas; separate los muestra separados (muestra ambos), en cambio, collapse los "junta" en uno solo.

empty-cells:show | hide

Controla el los bordes alrededor de las celdas que no tienen ningún contenido visible. El contenido visible incluye " " y otros espacios en blanco excepto tab ("\09") y space ("\20"). Con show los bordes son dibujados alrededor de las celdas vacías (como las celdas normales) y con hide no se dibujará ningún borde alrededor de las celdas vacías. Veamos un ejemplo:

FILA 1 COLUMNA 1	FILA 1 COLUMNA 2
FILA 2 COLUMNA 1	FILA 2 COLUMNA 2

<table cellpadding=5 cellspacing=0 style="border-collapse: separate;">
  <tr>
     <td style="border=2px solid yellow;">... contenido ...</td>
  </tr>
</table>

FILA 1 COLUMNA 1	FILA 1 COLUMNA 2
FILA 2 COLUMNA 1	FILA 2 COLUMNA 2

<table cellpadding=5 cellspacing=0 style="border-collapse: collapse;">
  <tr>
     <td style="border=2px solid yellow;">... contenido ...</td>
  </tr>
</table>

Una tabla completa se vería así:	Pero esto es suficiente:
<table> <caption> TITULO DE LA TABLA </caption> <thead> <th> ENCABEZADO COLUMNA </th> </thead> <tbody> <tr> <td> LOS DATOS </td> </tr> </tbody> <tfoot> <th> PIE COLUMNA </th> </tfoot> </table>	<table> <tbody> <tr> <td> LOS DATOS </td> </tr> </tbody> </table>

Hay una propiedad más, muy poco utilizada y con la cual podemos definir la forma en que un navegador debe mostrar la tabla.

table-layout: auto | fixed

Así como, especificar el tamaño de las imágenes permite que el navegador cargue la página más rápidamente, el uso de los atributos width y height o las propiedades de estilo correspondientes para definir anchos y altos de cada elemento de una tabla mejorará la velocidad sustancialmente, sobre todo si contienen muchos datos.

La propiedad table-layout controla el algoritmo que usa el navegador para mostrar las tablas. Si el valor es auto, se usa cualquiera (es el valor por defecto), si se especifica fixed, la tabla será "fija".

Utilizando fixed, el ancho no dependerá del contenido de las celdas sino sólo de los anchos indicados por width. Las reglas serán claras, cualquier elemento de una columna con una propiedad width definirá el ancho de toda la columna, el ancho de la tabla será igual a la suma de los anchos de las columnas.

Al definirse fixed y especificarse width, el navegador puede comenzar a "dibujar" la tabla apenas ha cargado la primera fila, con lo que toda la página se carga más rápido.

FILA 1 COLUMNA 1	FILA 1 COLUMNA 2	FILA 1 COLUMNA 3
FILA 2 COLUMNA 1	FILA 2 COLUMNA 2	FILA 2 COLUMNA 3

<table style="table-layout:fixed">
<col width=100 style=".....">
<col width=300 style=".....">
<col width=200 style=".....">
<tr>
    td>...</td><td>...</td><td>...</td>
</tr>
<tr>
    td>...</td><td>...</td><td>...</td>
</tr>
</table>

Como se ve en el ejemplo, también es interesante el uso de la etiqueta COL, dentro de ella es posible definir estilos que afectarán a la columna completa.