5.TABLAS

Las tablas nos permiten representar cualquier elemento de nuestra página (texto, listas, imágenes, etc.) en diferentes filas y columnas separadas entre sí. Es una herramienta muy útil para ordenar los contenidos. Se define mediante la instrucción <TABLE></TABLE>. Los parámetros opcionales de esta directiva son:

border ="número". Indica el ancho del borde de la tabla en puntos.
cellspacing ="número". Indica el espacio en puntos que separa las celdas que están dentro de la tabla.
cellpadding ="número". Indica el espacio en puntos que separa el borde de cada celda y el contenido de ésta.
width ="número o %". Indica la anchura de la tabla en puntos o en porcentaje en función del ancho de la ventana del visor. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos de las celdas.
height ="número o %". Indica el alto de la tabla en puntos o en porcentaje en función del alto de la ventana del visor. Si no se indica este parámetro, la altura se adecuará a la altura de los contenidos de las celdas.
bgcolor = "código de color". Especifica el color de fondo de toda la tabla.

Para definir las celdas que componen la tabla se utilizan las instrucciones <TD> y <TH>. <TD> indica una celda normal, y <TH> indica una celda de cabecera, el contenido será resaltado en negrita y en un tamaño ligeramente superior al normal. Los parámetros opcionales de ambas instrucciones son:

align ="valor". Indica como se debe alinear el contenido de la celda. Sus valores son: a la izquierda (left), a la derecha (right), centrado (center) o justificado (justify).
valign ="valor". Indica la alineación vertical del contenido de la celda. Sus valores son: en la parte superior (top), en la inferior (bottom), o en el centro (middle).
rowspan = "número". Indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila.
colspan =" número". Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.
width ="número o %". Indica la anchura de la columna en puntos o en porcentaje en función del ancho de la ventana del visor. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos. Este parámetro sólo funciona en los navegadores modernos.
bgcolor = "código de color". Especifica el color de fondo de la celda.

Para indicar que acaba una fila de celdas se utiliza la instrucción <TR>. A continuación mostraremos un ejemplo de una tabla que contiene solo texto. Como se indicó anteriormente el contenido de las celdas puede ser cualquier elemento de HTML, un texto, una imagen, un hiperenlace, una lista, etc.

SE VERÁ ASI

Las instrucciones <TD> y <TH> son cerradas según el estándar de HTML, es decir, que un elemento de la tabla <TD> debería cerrarse con un </TD>, sin embargo los visores asumen que un elemento de la tabla, queda automáticamente "cerrado" cuando se "abre" el siguiente.

Continuando con nuestra web abriremos el archivo tablero.htm e insertaremos la tabla anterior: