14. Tablas
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í:
Código | Resultado |
---|
<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> |
|
Como podéis ver (o mejor no ver) la tabla no tiene mucho aspecto
de tabla. Quedaría mejor con unos bordes, ¿no? 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:
Parámetro | Utilidad |
---|
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 pixels que separarán las
celdas. | CELLPADDING | Especifica el número de pixels que habrá entre el
borde de una celda y su contenido. | WIDTH | Especifica la anchura de la tabla. Puede estar tanto en pixels
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:
14.1. 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:
Parámetro | Utilidad |
---|
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). |
14.2. Definir las celdas
Por último, nos queda definir cada celda gracias a la etiquetas
TD y 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:
Parámetro | Utilidad |
---|
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:
Código | Resultado |
---|
<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á de horrible manera.
14.3. 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:
Código | Resultado |
---|
<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.
Mapas | Marcos |
|