Tablas

Creación de tablas

El modelo propuesta por Netscape para la implementación de tablas, se ha convertido en un estándar de facto, permitiendo realizar sofisticadas presentaciones tabulares. Como se verá, no se limita a la presentación de texto en columnas, sino que permite realizar combinaciones muy complejas de imágenes y texto.

HTML 3 dispone de un soporte completo para la presentación de tablas, que utiliza como base el modelo propuesto por Netscape.

Elementos de una tabla

Toda la definición de una tabla está contenida dentro de la etiqueta <TABLE> </TABLE>. En su interior, se describe la distribución de la misma a partir de filas y celdas. En un primer nivel, la tabla sólo puede tener dos elementos, filas <TR> y títulos <CAPTION>.

Las filas <TR> </TR> son los bloques básicos. Dentro de ellas, se pueden definen celdas <TD> </TD> que representan las diferentes celdas dentro de esa fila. Un tipo especial de celda es el encabezado <TH> </TH>, equivalente a las celdas normales, pero que se muestra en letra negrita.
El elemento <CAPTION> </CAPTION> representa el título de la tabla, que se colocará en la parte superior o inferior de la misma, pero fuera de la estructura de filas y columnas de la tabla. Sólo puede incluirse uno, en cualquier posición del interior de la tabla.
Según esto, el número de filas de una tabla viene fijado por el número de elementos <TR>. Sin embargo, el número de columnas el mayor de los números de elementos <TD> de cada una de las filas.

Un pequeño ejemplo ayudará a comprender mejor la forma en que se crean tablas: <TABLE BORDER=1>
<CAPTION ALIGN=bottom>Gastos por secciones</CAPTION>
<TR><TH>Departamento</TH><TH>Gastos</TH></TR>
<TR><TD>Compras</TD><TD>100.000</TD></TR>
<TR><TD>Gestión</TD><TD>240.000</TD></TR>
</TABLE> Se representaría como:

Etiquetas para la creación de tablas

Las siguientes tablas recogen los atributos más importantes de cada una de las etiquetas empleadas para la presentación de información tabular.

<TABLE> </TABLE>	Marca un bloque de definición de tabla. Dentro del mismo, sólo se pueden incluir elementos <TR> y <CAPTION>.
	BORDER=	Fija el ancho del borde exterior de la tabla, medido en pixels. El valor por defecto es 0 (sin bordes).
	CELLPADDING=	Fija la distancia, en pixels, entre el borde de una celda y su contenido. El valor por defecto es 1.
	CELLSPACING=	Fija la anchura, en pixels, de las líneas de división de la tabla. El valor por defecto es 2.
	WIDTH=	Controla la anchura horizontal de la tabla. Si no se especifica, el propio browser busca un valor adecuado, en función de su contenido. Se puede especificar como un valor en pixels, o como un porcentaje del ancho que tenga la pantalla del browser en cada momento, o el elemento en que se inserta la tabla (por ejemplo, otra tabla).
	ALIGN=	Permite crear tablas flotantes,, equivalentes a las imágenes, en las que el texto de un párrafo fluye a lo largo del borde de la tabla. Especifica la alineación horizontal de la tabla. Puede tomar los valores left o right. Por defecto, se usa left.

<CAPTION> </CAPTION>	Inserta un título alusivo al contenido de la tabla. Por defecto, el título se inserta por encima de la tabla, centrado sobre la misma.
	ALIGN=	Fija la posición del título con respecto a la tabla. Puede tomar los valores top o bottom.

<TR>
</TR>

Crea una nueva fila dentro de una tabla. Dentro de ella, sólo se pueden incluir elementos <TD> o <TH> para la creación de celdas.

ALIGN=

Especifica la alineación horizontal del texto en la celda.

Puede tomar los valores left, right, center. Por defecto, se utiliza alineación izquierda.

Este valor afecta a todas las celdas de esta fila, salvo que éstas modifiquen su alineación particular.

VALIGN=

Especifica la alineación vertical del texto en la celda.

Puede tomar los valores top, bottom, middle o baseline. Por defecto, se utiliza alineación central (middle).

El valor baseline alinea el texto en líneas adyacentes sobre una línea base común.

Este valor afecta a todas las celdas de esta fila, salvo que estas modifiquen su alineación particular.

<TD> </TD>	Crea una celda dentro de una fila de la tabla.
	ALIGN=	Especifica la alineación horizontal del texto en la celda. Puede tomar los valores left, right, center. Por defecto, se utiliza alineación izquierda. Este valor afecta sólo a esta celda.
	VALIGN=	Especifica la alineación vertical del texto en la celda. Puede tomar los valores top, bottom, middle o baseline. Por defecto, se utiliza alineación central (middle). Este valor afecta sólo a esta celda.
	COLSPAN=	Indica el número de columnas que ocupará esta celda. Se usa para crear tablas con diferente número de columnas en cada fila. Su valor por defecto es 1.
	ROWSPAN=	Indica el número de filas que ocupará esta celda. Se usa para crear celdas que ocupen más de una fila. Su valor por defecto es 1.
	NOWRAP	Obliga al cliente Web a no romper las líneas de texto que contenga la celda. El ancho de la línea fijará el ancho de la celda. Se debe usar con cuidado, en caso de que aparezcan líneas de texto muy anchas.
	WIDTH=	Determina el ancho de la celda. Si no se incluye, el browser determina el ancho de la celda, en función de los contenidos del resto de las celdas de esta columna. Se puede especificar como un ancho en pixels, o como un porcentaje del ancho de la tabla completa.

<TH>
</TH>

Crea una celda de encabezados. Las celdas de encabezados son totalmente equivalentes a las celdas de datos <TD>, salvo que el texto se muestra con un formato de presentación resaltado.

Los atributos de <TH> son los mismos que los de <TD>.

Creación de diferentes tipos de tablas

El proceso de creación de una tabla consiste simplemente en insertar adecuadamente las diferentes etiquetas de creación de filas y celdas, siguiendo una serie de sencillas reglas.

El primer paso consiste en conocer el número máximo de columnas que tendrá la tabla. Los clientes Web lo fijan buscando la fila con mayor número de elementos <TD>. Si una fila tiene menos celdas que este ancho máximo, al final de la misma aparecerán tantas celdas vacías como columnas falten. Más adelante se explicará como hacer que una celda ocupe más de una fila o columna.

Las etiquetas <TABLE>, <TR> y <TD> tienen un conjunto de atributos comunes; los valores de estos parámetros (de control de color y alineación) en cada uno de ellos actúan como valores por defecto para los elementos del nivel inferior, que pueden a su vez modificarlos.

Normas de enlazado con otras etiquetas:

Dentro del elemento <TABLE>, sólo se pueden insertar elementos <CAPTION> o <TR>. En las filas <TR>, sólo se puede insertar elementos <TH> y <TD>, para crear celdas.
Dentro de las celdas, a su vez, se puede insertar texto, elementos de formato de texto, párrafos, saltos de línea, imágenes y enlaces. A su vez, en una celda se puede insertar una nueva tabla, realizándose así el anidamiento de las mismas.
Una tabla puede ser insertada en otra tabla, en un párrafo o en un BLOCKQUOTE.

Control de anchura

Los atributos de los diferentes elementos de una tabla permiten un control completo sobre la anchura de la tabla y de cada una de sus columnas:

En caso de que no se utilice ninguno de los atributos de control de tamaño, el browser utilizará un algoritmo propio para tratar de mostrar la tabla de la mejor forma posible. En ningún caso el ancho de la tabla superará el ancho de la ventana del cliente.
Si se fija un ancho máximo para la tabla, éste afectará a los cálculos de todos los demás elementos. El ancho de la tabla se puede especificar como un valor absoluto, en pixels, o como un porcentaje del ancho de la pantalla del browser. En caso de que la tabla esté insertada dentro de otra tabla, el valor en porcentaje se establecerá sobre el ancho de la celda en que se inserta la tabla.
Si se fija el ancho de una celda, este afectará a todas las celdas de esa columna. En caso de que se especifiquen diferentes anchos, se utilizará el mayor de todos. De nuevo, el ancho de una columna puede ser absoluto, en pixels, o relativo al ancho de la tabla, en forma de porcentaje.
Si el conjunto de parámetros de anchura especificados para una tabla no son compatibles, se tomará la combinación de los mismos que garantice el tamaño de los elementos más grandes, a expensas de aumentar el tamaño de los más pequeños.

<B>Ejemplo con ancho de tabla (80%) y ancho de celda fijado</B>
<P><TABLE BORDER WIDTH=80%>
<TR><TD WIDTH=40%>Ancho=40%</TD><TD>Ancho=60% (el resto)</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
<P><B>Tabla con control de ancho y una tabla anidada</B>
<P><TABLE BORDER WIDTH=100%>
<TR><TD WIDTH=70%>Elemento 1</TD><TD>Elemento 2</TD></TR>
<TR><TD><TABLE BORDER WIDTH=90%>
<TR><TD>Elemento A</TD><TD>Elemento B</TD></TR>
</TABLE>
</TD><TD>Elemento 4</TD></TR>
</TABLE>

Espaciado entre celdas

En algunas ocasiones, es preciso controlar la distancia entre el borde interior de las celdas y su contenido. CELLPADDING permite especificar el valor que tomará esta distancia, expresado en pixels. Por defecto, toma el valor 1.

El otro atributo relacionado, CELLSPACING, sirve para aumentar el ancho de las líneas de división entre celdas y, por tanto, sólo tiene sentido cuando BORDER es distinto de 0. Su valor por defecto es 2.

Control de la alineación en las celdas

Los atributos ALIGN y VALIGN nos permiten controlar la forma en que se alinearán los contenidos de una celda con respecto a sus bordes. Estos parámetros pueden ser fijados en <TR>, con lo cual afectarán a todas las celdas de la fila, o en <TD>, aplicándose a una celda de datos individual.

<TABLE BORDER=1>
<TR>
<TD WIDTH=25%>Esta celda es muy alta.<BR><BR><BR><BR>Así podemos ver las alineaciones verticales.
<TD WIDTH=25% VALIGN=top>Esta celda tiene alineación superior
<TD WIDTH=25% VALIGN=middle>Esta celda tiene alineación central </TD>
<TD WIDTH=25% VALIGN=bottom>Esta celda tiene alineación inferior</TD>
</TR>
<TR>
<TD ALIGN=left>Esto está alineado a la izquierda, el valor por defecto </TD>
<TD ALIGN=center COLSPAN=2> Este párrafo tiene alineación central</TD>
<TD ALIGN=right>Y este está alineado a la derecha</TD>
</TR></TABLE>

Cambios en la distribución de celdas

Los atributos COLSPAN (expansión en columnas) y ROWSPAN (expansión en filas) de <TD> (y también de <TH>) permiten hacer que una celda ocupe un número variable de filas o columnas contiguas. Para ello, en la celda que debe aumentar de tamaño, se especifica el número de filas hacia abajo, o el número de columnas a la derecha (o ambas) que ocupará. Por defecto, tanto COLSPAN como ROWSPAN valen 1.

Después, en las filas o columnas adyacentes, afectadas por este cambio, se incluirá un número inferior de elementos <TD>, en función del número de filas o columnas solapadas.

<TABLE BORDER=1>
<TR>
<TD>Elemento 1</TD>
<TD COLSPAN=2>Elemento 2</TD>
</TR>
<TR><TD>Elemento 3</TD> <TD>Elemento 4</TD> <TD>Elemento 5</TD></TR>
</TABLE>

<TABLE BORDER=1>
<TR>
<TD>Elemento 1</TD>
<TD ROWSPAN=2>Elemento 2</TD>
<TD>Elemento 3</TD>
</TR>
<TR><TD>Elemento 4</TD> <TD>Elemento 5</TD></TR>
</TABLE>

<TABLE BORDER>
<TR><TD ALIGN=center ROWSPAN=2>Elemento 1 <BR>(2 celdas)</TD><TD>Elemento 2</TD><TD>Elemento 3</TD></TR>
<TR><TD>Elemento 4</TD><TD>Elemento 5</TD></TR>
<TR><TD ALIGN=center>Elemento 6</TD><TD ALIGN=center COLSPAN=2>Elemento 7</TD></TR>
</TABLE>

Control de la alineación de la tabla

Al igual que las imágenes, las tablas disponen de atributos que permiten su anclado en los márgenes laterales, haciendo que el texto fluya a lo largo del nuevo margen creado. El control de la alineación de la tabla se realiza con el atributo ALIGN. Las posibilidades que se dan son:

Si no se utiliza atributo de alineación, la tabla se alinea en el margen izquierdo; sin embargo, esto no crea un margen interior, por lo que el código HTML que sigue a la definición de la tabla se muestra inmediatamente debajo de la misma.
Si se desea centrar la tabla, se deberá rodear la definición completa de la misma por etiquetas <CENTER> o <DIV ALIGN=center>. En cuanto a los elementos que siguen a la tabla, ocurre lo mismo que en el caso anterior.
Si se utiliza ALIGN=left, la tabla queda anclada en el margen izquierdo. El margen interior creado por la tabla será respetado hasta que se termine la tabla o se introduzca un <BR CLEAR=> adecuado.
Si se utiliza ALIGN=right, la tabla queda anclada en el margen derecho. El margen exterior creado por la tabla será respetado hasta que se termine la tabla o se introduzca un <BR CLEAR=> adecuado.

La tabla está anclada a este párrafo...
<TABLE BORDER ALIGN=left>
<TR><TD>Elemento 1</TD><TD>Elemento 2</TD></TR>
<TR><TD>Elemento 3</TD><TD>Elemento 4</TD></TR>
<TR><TD>Elemento 5</TD><TD>Elemento 6</TD></TR>
</TABLE>
El resto del texto se alinea con el margen interior.<P>Con independencia de los saltos de párrafo.
<P><BR CLEAR=all>
<TABLE BORDER ALIGN=left><TR><TD>Elemento 1</TD></TR></TABLE>
<TABLE BORDER ALIGN=right><TR><TD>Elemento 2</TD></TR></TABLE>
Estas dos tablas crean márgenes simultáneos.

Control del color

Los browsers Internet Explorer y Netscape Navigator han introducido nuevos atributos que permiten controlar los colores utilizados en la presentación de varios elementos de una tabla. Estas etiquetas no están recogidas en ningún estándar y su empleo se debería limitar en lo posible.

Los colores se especifican a partir de códigos hexadecimales, o bien a través de unos nombres de colores predefinidos.

Netscape (a partir de la versión 3) permite alterar el color de fondo, a nivel de tabla, fila o celda individual, con el atributo BGCOLOR, que acepta un código de color hexadecimal o mnemotécnico. Por ejemplo,

<TABLE BORDER=1 BGCOLOR="Gray">
<TR>
<TD BGCOLOR="White">Elemento 1</TD>
<TD>Elemento 2</TD>
</TR>
<TR>
<TD>Elemento 3</TD>
<TD BGCOLOR="White">Elemento 4</TD>
</TR>
</TABLE>

Como siempre, los valores definidos a nivel de tabla o de fila actúan como valores por defecto para las celdas, pero estas pueden modificar localmente su presentación.

Microsoft, en su Internet Explorer, dispone de un amplio conjunto de atributos que alteran la presentación de casi todos los elementos de una tabla. De nuevo, estas etiquetas no son estándar, y su efecto sólo puede ser apreciado en los browsers de este fabricante. BACKGROUND=
URL de una imagen que se utilizará como fondo de la tabla o de la celda. El fondo se sitúa por debajo de los contenidos de la tabla, ya sean texto o imágenes.

BGCOLOR=
Color de fondo de una tabla o celda.

BORDERCOLOR=
Color de los bordes de la tabla o celda.

BORDERCOLORLIGHT y BORDERCOLORDARK
Controlan los dos colores que se utilizan para dar una apariencia tridimensional a las tablas.

<TABLE BORDER=8 CELLSPACING=10 WIDTH="100%" BACKGROUND="tick.gif">
<TR BORDERCOLORDARK="red" BORDERCOLORLIGHT="red">
<TD COLSPAN=2 ALIGN="CENTER"><FONT SIZE="+2" COLOR="White"> <STRONG>Universidad de Cantabria</STRONG></FONT></TD>
</TR>
<TR ALIGN="Center" BORDERCOLORDARK="red" BORDERCOLORLIGHT="red">
<TD><B><FONT COLOR="White">Servicios Administrativos</FONT></B></TD>
<TD><B><FONT COLOR="White">Información académica</FONT></B></TD>
</TR>
</TABLE>

Una tabla, por defecto, no tiene bordes (es decir, BORDER=0).
Las etiquetas TH y TD no necesitan sus terminadores </TH> y </TD>. Sin embargo, es una buena práctica incluirlos, para facilitar el trabajo de interpretación de la tabla al browser.
Las tablas están siempre alineadas con el margen izquierdo. Para evitarlo, se puede rodear la tabla por un par <CENTER> </CENTER>, o utilizar los atributos de alineación para crear tablas flotantes,.
Muchos browsers no tienen capacidad de representar una tabla hasta que no conocen el tamaño de la misma y el de todos los elementos que incluyan. Por ello, para acelerar su presentación, es conveniente especificar los tamaños de las imágenes insertadas dentro de sus correspondientes etiquetas <IMG>.
Los clientes WWW no presentan una tabla hasta que no han recogido e interpretado todo el código de la misma. Esto es así porque necesitan conocer el número máximo de columnas de la misma.