Curso completo de HTML - Cómo se crea una tabla HTML (II)

Insertar un título para la tabla

El siguiente elemento importante a destacar en las tablas y del que todavía no hemos hablado es el título. Este será un texto que acompaña a la tabla podrá estar situado encima o debajo de ella. Para insertarlo haremos uso de una nueva etiqueta: CAPTION (que se puede traducir al español como título), que deberá ser usada entre las instrucciones <TABLE> y </TABLE >, de la siguiente manera:

 <TABLE>
  
    <CAPTION>
    Titulo de la tabla
    </CAPTION>
  
  ... Código de la tabla ...
  </TABLE>
 
       

El texto que servirá de título será insertado entre las instrucciones de inicio y fin. Este texto podrá ser formateado por otras etiquetas siempre y cuando sean de nivel de texto, esto es, que su inclusión no provoque un salto de línea. Esto, desgraciadamente, excluye a los encabezados (H1 ,H2, etc.), pero no a las etiquetas de nivel de texto o a FONT.

Los títulos de la tabla serán mostrados por defecto en la parte superior de esta, pero la etiqueta CAPTION permite el uso de un atributo (cuyo nombre nos resultará familiar), ALIGN , que nos permitirá elegir que dichos títulos sean mostrados como pie de la tabla. El atributo ALIGN, puede tomar dos valores top y bottom. El primero de ellos, top, significa en inglés arriba o parte superior y su efecto será que el título sea mostrado encima de la tabla. Bottom, por su parte puede ser traducido como abajo o parte inferior. El uso de este atributo provocará el efecto antes comentado: el título será mostrado al pie de la tabla. El siguiente código es un ejemplo del uso este tipo de alineamiento del título:

 <TABLE>
  
    <CAPTION ALIGN="bottom">
    Pie de la tabla
    </CAPTION>
  
  ... Código de la tabla ...
         </TABLE>
 
       

A continuación veremos un ejemplo completo de tabla con título. Es necesario resaltar dos aspectos de este ejemplo. El primero es que aunque usemos ALIGN="top" para el título, en realidad no es necesario, ya que este es el alineamiento que aparece por defecto. El segundo es que para resaltar el título nos hemos ayudado de las etiquetas BIG y B que ya conocemos, algo perfectamente válido dentro de la etiqueta CAPTION.

Un ejemplo de inclusión de un encabezado es el siguiente:

 <TABLE>
  <CAPTION ALIGN="top">
         <BIG>
  <B>
  Tabla de ejemplo
  </B>
         </BIG> 
  </CAPTION>
  <TR>
         <TD>
  Fila1,Columna1
         </TD>
         <TD>
  Fila1,Columna2
         </TD>
  <TR>
         <TD>
  Fila2,Columna1
         </TD>
         <TD>
  Fila2,Columna2
         </TD>
         </TABLE>
 
       

Cuyo resultado podemos apreciar en la tabla izquierda de la figura 7.6.

La tabla de la derecha corresponde al mismo código pero con ALIGN="bottom".

Tamaño de las tablas

Todavía queda un tema de gran importancia en la creación de tablas que debemos comentar: su tamaño. Quizá tras haber hecho algunos ejemplos el lector se habrá dado cuenta que el tamaño de las tablas no es siempre el mismo. Lo más probable es que este hecho no nos haya sorprendido, aún así es importante la manera en que los navegadores calculan el tamaño de las tablas y sus celdas no es tan sencilla y suele ser muy útil conocerla bien. Posteriormente aprenderemos a cambiar este tamaño a mano.

Cuando al leer una página el navegador encuentra una tabla calcula cual es el tamaño tanto horizontal como vertical necesario para mostrar el contenido de cada una de las celdas. En este momento hay que tener en cuenta que todas las celdas de una misma columna deben tener un mismo ancho y que todas las celdas de una misma fila deben tener la misma altura. La altura de cada fila quedará determinada por el elemento más alto (o el texto con más líneas) de todas las celdas de la fila. De manera similar se calcula el ancho de las columnas. Vistos estos conceptos probablemente se haya quedado el lector un poco confundido, esta parte es un poco complicada al principio pero se comprende rápidamente una vez hemos practicado un poco con tablas.

Llegados a este punto ya podemos afirmar que sabemos todo lo necesario para crear tablas. Ahora nos queda conocer algunos aspectos más avanzados y realizar algunos ejemplos para adquirir destreza en su uso. Pero antes, practiquemos un poco.

Ejercicio 7.1

En este ejercicio se propone la creación de tablas con elementos de diferentes tamaños en sus celdas para observar como varían sus tamaños. En el archivo extra.zip se ofrecen imágenes de diferentes tamaños como ayuda. Las tablas que se proponen realizar son:

1. Una tabla de 2 filas y 3 columnas. El contenido de todas las celdas será la palabra: TABLA.

2. Se sustituye la palabra TABLA en cada una de las celdas anteriores por un texto lo suficientemente largo para que ocupe varias líneas.

3. Crear dos tablas iguales a las dos anteriores pero con la imagen montana.gif en la segunda celda de la primera fila.

4. Combinar el texto escrito en el segundo caso, la imagen montana.gif, y la imagen spot.gif en diferentes celdas para ver el cambio de tamaño que sufren.