Las tablas son posiblemente la manera más clara de organizar la información. También es el modo más adecuado de maquetar texto y gráficos de una manera algo más controlada que con los parámetros ALIGN.
Las tablas se definen de la siguiente manera. Primero, las características de la tabla, luego las de cada fila y dentro de ésta, cada celda. Así pues, una tabla con 2 filas y 3 columnas se declarará así:
|| <TABLE> <TR> <TD>1,1</TD> <TD>1,2</TD> <TD>1,3</TD> </TR> <TR> <TD>2,1</TD> <TD>2,2</TD> <TD>2,3</TD> </TR></TABLE> || || 1,1 || 1,2 || 1,3 || || 2,1 || 2,2 || 2,3 || ||
Como se puede ver la tabla no tiene mucho aspecto de tabla. Quedará mejor con unos bordes, Puede que tampoco le viniese mal mayor espacio entre celdas o mayor anchura. Estas son las cosas que podremos cambiar con los atributos de TABLE:
|| BORDER || Especifica el grosor del borde que se dibujará alrededor de las celdas. Por defecto es cero, lo que significa que no dibujará borde alguno. ||
|| CELLSPACING || Define el número de pixeles que separarán las celdas. ||
|| CELLPADDING || Especifica el número de pixeles que habrá entre el borde de una celda y su contenido. ||
|| WIDTH || Especifica la anchura de la tabla. Puede estar tanto en pixeles como en porcentaje de la anchura total disponible para él (pondremos "100%" si queremos que ocupe todo el ancho de la ventana del navegador). ||
|| ALIGN || Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER). ||
Si ahora, por ejemplo definimos ahora la tabla anterior como <TABLE BORDER=1 WIDTH="50%" ALIGN=CENTER> veremos lo siguiente:
|| 1,1 || 1,2 || 1,3 ||
|| 2,1 || 2,2 || 2,3 ||
Definir las filas
Ahora que hemos definido la tabla nos toca hacer lo mismo con las filas. Cada fila se define con una etiqueta TR que tiene los siguientes atributos:
|| ALIGN || Alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT), derecha (RIGHT)o centro (CENTER). ||
|| VALIGN || Alinea el contenido de las celdas de la fila verticalmente arriba (TOP), abajo (BOTTOM)o centro (MIDDLE). ||
Definir las celdas
Por último, nos queda definir cada celda gracias a la etiquetas TDy TH. Estas etiquetas son equivalentes, pero la última se utiliza para encabezados, de modo que su interior se escribirá por defecto en negrita y centrado. Estos son los atributos de ambas:
|| ALIGN || Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER). ||
|| VALIGN || Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM)o centro (MIDDLE). ||
|| WIDTH || Especifica la anchura de la celda. También se puede especificar tanto en pixels como en porcentaje, teniendo en cuenta que, en este último caso, será un porcentaje respecto al ancho total de la tabla (no de la ventana del navegador). ||
|| NOWRAP || Impide que, en el interior de la celda, se rompa la línea en un espacio. ||
|| COLSPAN || Especifica el número de celdas de la fila situadas a la derecha de la actual que se unen a ésta (incluyendo la celda en que se declara este parámetro). Es por defecto uno. Si se pone igual a cero, se unirán todas las celdas que queden a la derecha. ||
|| ROWSPAN || Especifica el número de celdas de la columna situadas debajo de la actual que se unen a ésta. ||
Posiblemente los dos últimos parámetros no puedan quedar claros sin ejemplos. De hecho, aún entendiendo perfectamente su función es habitual que confundamos a uno con otro. Pero bueno, vamos a ver una tabla de 3x3 con una celda que se une a una de la derecha y otra que se une a otra de debajo:
|| <TABLE BORDER=1> <TR> <TD COLSPAN=2>1,1 y 1,2</TD> <TD>1,3</TD> </TR> <TR> <TD ROWSPAN=2>2,1 y 3,1</TD> <TD>2,2</TD> <TD>2,3</TD> </TR> <TR> <TD>3,2</TD> <TD>3,3</TD> </TR></TABLE> || || 1,1 y 1,2 || 1,3 || || 2,1 y 3,1 || 2,2 || 2,3 || || 3,2 || 3,3 || ||
Como podemos ver, cuando declaramos un celda con ROWSPAN o COLSPAN, no deberemos declarar las celdas "absorbidas" o la creación de la tabla se nos complicará mucho.
Título de la tabla
Por último, vamos a ver como definir un título a la tabla. Esto se hace por medio de la etiqueta CAPTION. Para ver cómo funciona, vamos a incluirlo en la declaración de la tabla anterior:
|| <TABLE BORDER=1> <CAPTION> Ejemplo de tablas </CAPTION>...</TABLE> || Ejemplo de tablas || 1,1 y 1,2 || 1,3 || || 2,1 y 3,1 || 2,2 || 2,3 || || 3,2 || 3,3 || ||
Esta etiqueta admite sólo un parámetro: ALIGN, que es por defecto TOP. Si lo definimos como BOTTOM el título se colocará al final de la tabla en lugar del comienzo.
Marcos
Un marco (o
frame) es una ventana independiente dentro de la ventana general del navegador. Cada marco tendrá sus bordes y sus propias barras de desplazamiento. Así cada página se dividirá en la práctica en varias páginas independientes.
Para crearlos necesitaremos un documento HTML específico, que llamaremos documento de definición de marcos. En él especificaremos el tamaño y posición de cada marco y el documento HTML que contendrá.
Vamos a examinar por último los parámetros COLS y ROWS. Deberemos asignarles una lista de tamaños separada por comas. Se admiten los siguientes formatos de tamaño:
- Con porcentajes: Al igual que con las tablas, podemos definir el tamaño de un marco como un porcentaje del espacio total disponible.
- Absolutos: Si ponemos un número a secas, el marco correspondiente tendrá el tamaño especificado en pixeles.
- Sobre el espacio sobrante: Si colocamos un asterisco (*) estaremos indicando que queremos todo el espacio sobrante para ese marco. Podemos poner este símbolo en varios marcos, que se repartirán el espacio equitativamente. Si queremos que uno tenga más deberemos ponerle al asterisco un número delante. Así, un marco con un espacio de 3* será tres veces más grande que su compañero, que tiene un asterisco sólo.
Por ejemplo, el siguiente código es una muestra de cómo combinar los tres métodos:
<FRAMESET COLS="10%,*,200,2*">
Supongamos que el ancho total de la ventana son 640 pixeles. El primer marco ocupará el 10%, es decir, 64 pixeles. El tercero necesita 200, luego nos quedan 476 para los otros dos. Como el cuarto debe tener el doble de espacio que el segundo, tenemos aproximadamente 158 pixels para este último y 316 para el cuarto marco.
Hay que tener cuidado cuando usamos valores absolutos en la definicin de marcos; debemos asegurarnos de tener al menos un marco con un tamaño relativo si queremos estar seguros del aspecto final de la página.
Por último, indicar que las etiquetas <FRAMESET> se pueden anidar. Esto se hace poniendo otro <FRAMESET> donde normalmente colocamos las etiquetas <FRAME> tal que así:
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.html">
<FRAMESET ROWS="*,80">
<FRAME NAME="principal" SRC="introduccion.html">
<FRAME NAME="ejemplos" SRC="ejemplo.html">
</FRAMESET>
</FRAMESET>
Etiqueta <FRAME>
Esta etiqueta define tan sólo las características de un marco determinado, no de un conjunto de ellos. Estos son los parámetros que admite:
|| NAME || Asigna un nombre a un marco para que después podamos referirnos a él. ||
|| SRC || Indica la dirección del documento HTML que ocupará el marco. ||
|| SCROLLING || Decide si se colocan o no barras de desplazamiento al marco para que podamos movernos por su contenido. Su valor es por defecto AUTO, que deja al navegador la decisión. Las otras opciones que tenemos son YES y NO. ||
|| NORESIZE || Si lo especificamos el usuario no podrá cambiar de tamaño el marco. ||
|| FRAMEBORDER || Al igual que su homónimo en la etiqueta < FRAMESET>, si lo igualamos a cero se eliminará el borde con todos los marcos contiguos que tengan también este valor a cero. ||
|| MARGINWIDTH || Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixeles. ||
|| MARGINHEIGHT || Igual al anterior pero con márgenes verticales. ||
Acceso a otros marcos
Por defecto, cuando pulsamos sobre un enlace situado dentro de un marco, la nueva página a la que queremos acceder la veremos encerrada en ese mismo marco. Es posible que deseemos que esto no ocurra. Por ejemplo, si tenemos un marco que nos sirve de índice y otro donde mostramos los contenidos sería deseable que los enlaces del marco índice se abrieran en el otro marco. Esto es posible hacerlo gracias al parámetro TARGET.Este parámetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>. En las dos primeras sirve para indicar el marco en el que abriremos ese enlace en particular y el último modificaremos el marco en el que por defecto se nos muestran todos los enlaces.
Pero para que un parámetro funcione, es habitual que le asignemos un valor, y TARGET no es una excepción. Para indicarle el marco que deseamos le asignaremos el nombre del mismo. Así, en los ejemplos anteriores, si en el marco llamado indice tenemos un enlace que queremos se abra en el marco principal pondremos:
<A HREF="pagina.html" TARGET="principal">
También existen cuatro nombres reservados que podremos utilizar en el parámetro TARGET:
_top
Elimina todos los marcos existente y muestra la nueva página en la ventana original sin marcos.
_blank
Muestra la nueva página en una ventana nueva y sin nombre del navegador.
_self
Muestra la nueva página en el marco donde está declarado el enlace.
_parent
Muestra la nueva página en el <FRAMESET> que contiene al marco donde se declara el enlace. En el ejemplo que pusimos de <FRAMESET> anidados, una enlace situado en el marco ejemplo cuyo parámetro TARGET fuese igual a _parent eliminaría la separación entre los marcos ejemplo y principal y mostraría en ese nuevo marco la nueva página.
