Tablas

La estructura de una tabla se define mediante:

una marca de inicio de la tabla (TABLE),

una marca de comienzo de una nueva línea (TR) y

una marca de comienzo de una celda (TD).

Al final de cada uno de estos elementos se deberá definir la marca de final correspondiente.

Esta estructura es bastante simple y muy fácilmente modificable.

Se pueden definir además textos de cabecera en las celdas (TH) y títulos para las tablas (CAPTION).

Una celda puede contener algunos de los siguientes elementos:

texto

listas

otras tablas

imágenes

enlaces de hipertexto

elementos de formulario

La representación de una tabla es actualmente muy dependiente del browser utilizado.

TABLE

La marca <TABLE> permite la apertura de una tabla; el fin de tabla se especifica con </TABLE>.

Se puede indicar alguno de los siguintes atributos:
BORDER: define el grosor del marco exterior (puede ser cero).
CELLPADDING: define el espacio alrededor del texto de una celda.
CELLSPACING: define el espacio entre celdas.

El valor de estos atributos se especifica en píxels. Cuando no se les asigna ningún valor explícitamente estos atributos tomarán valores definidos por defecto.

El valor por defecto del atributo BORDER es cero por lo que si éste atributo no se especifica se obtendrá una tabla sin bordes la cual suele ser muy útil para la alineación de elementos, uno al lado de otro, o uno debajo de otro. Para que se visualicen los bordes de la tabla bastará nombrar este atributo asignandole un valor, o no.

Se puede determinar el tamaño de la tabla, bien forzandola a ocupar un cierto porcentaje de la anchura de la ventana del browser o definiendo un tamaño fijo en unidades, mediante los atributos:
WIDTH: define el ancho de la tabla, bien en % o en unidades.
HEIGTH: define el alto de la tabla, bien en % o en unidades.

Ejemplos:

celda 1	celda 2
celda 3	celda 4


<TABLE>
<TR><TD>celda 1</TD><TD>celda 2</TD></TR>
<TR><TD>celda 3</TD><TD>celda 4</TD></TR>
</TABLE>

celda 1	celda 2
celda 3	celda 4


<TABLE BORDER>
<TR><TD>celda 1</TD><TD>celda 2</TD></TR>
<TR><TD>celda 3</TD><TD>celda 4</TD></TR>
</TABLE>

celda 1	celda 2
celda 3	celda 4


<TABLE BORDER=5 CELLSPACING=6 CELLPADDING=8>
<TR><TD>celda 1</TD><TD>celda 2</TD></TR>
<TR><TD>celda 3</TD><TD>celda 4</TD></TR>
</TABLE>

Definiendo el ancho y alto de la tabla en %
Ancho (WIDTH)	50%
Alto (HEIGHT)	30%


<TABLE BORDER WIDTH=50% HEIGHT=30%>
<CAPTION>Definiendo el ancho y alto de la tabla en %</CAPTION>
<TR ALIGN="center">
<TH>Ancho (<I>WIDTH</I>)</TH>
<TD>50%</TD>
<TR ALIGN="center">
<TH>Alto (<I>HEIGHT</I>)</TH>
<TD>30%</TD>
</TABLE>

Definiendo el ancho y alto de la tabla en unidades.
Ancho (WIDTH)	300
Alto (HEIGHT)	80


<TABLE BORDER WIDTH=300 HEIGHT=80>
<CAPTION>Definiendo el ancho y alto de la tabla en %</CAPTION>
<TR ALIGN="center">
<TH>Ancho (<I>WIDTH</I>)</TH>
<TD>300</TD>
<TR ALIGN="center">
<TH>Alto (<I>HEIGHT</I>)</TH>
<TD>80</TD>
</TABLE>

TR

La marca <TR> inicia una línea de la tabla que terminará con </TR>. Admite los atributos:

VALIGN: permite una alineación del texto en el sentido vertical de la celda.
Admite los valores: TOP, BOTTOM, MIDDLE
ALIGN: permite una alineación del texto en el sentido horizontal de la celda.
Admite los valores: RIGHT, CENTER, LEFT

Estos atributos se aplican sobre toda la fila, salvo cuando un atributo de <TD> contradice esta alineación.

TD

La marca <TD> delimita el inicio de una celda. Admite los atributos:
VALIGN: permite una alineación del texto en el sentido vertical de la celda.
Admite los valores: TOP, BOTTOM, MIDDLE
ALIGN: permite una alineación del texto en el sentido horizontal de la celda.
Admite los valores: RIGHT, CENTER, LEFT
COLSPAN: define una celda con una anchura múltiplo de la columna básica.
ROWSPAN: define una celda con una anchura múltiplo de la fila básica.
NOWRAP: obliga al browser a inscribir todo el texto de la celda en una sola línea.

En las tablas el ajuste es automático, la anchura de una celda depende del texto más largo inscrito en una de las celdas de la columna. De modo predeterminado, si la línea es demasiado larga, el browser la cortará en varias líneas, no ser que esté presente el atributo NOWRAP.

TH

La marca <TH> es idética a <TD> pero el texto de las celdas se considera como texto de cabecera. Este texto se centra automáticamente y se pone en negrita. Admite los mismos parámetros que la marca <TD> (VALIGN, ALIGN, COLSPAN, ROWSPAN, NOWRAP).

CAPTION

Esta marca permite poner un título encima ( atributo ALIGN=TOP) o debajo (atributo ALIGN=BOTTOM) de la tabla.

Ejemplos:

Titulo Superior (por defecto)
	Atributos de alineación, Align y VAlign
Alineación Vertical	Top	Middle	Bottom
Alineación Horizontal	Left	Center	Right


<CENTER>
<TABLE BORDER>
<CAPTION>Titulo Superior (por defecto)</CAPTION>
<TR>
   <TD></TD>
   <TH COLSPAN=3>Atributos de alineación, Align y VAlign</TH>
<TR>
   <TH>Alineación<BR>Vertical</TH>
   <TD VALIGN=top>Top</TD>
   <TD VALIGN=middle>Middle</TD>
   <TD VALIGN=bottom>Bottom</TD>
<TR>
   <TH>Alineación<BR>Horizontal</TH>
   <TD ALIGN=left>Left</TD>
   <TD ALIGN=center>Center</TD>
   <TD ALIGN=right>Right</TD>
</TABLE>
</CENTER>

Tabla 2.1.
	Ventana 1	Ventana 2	Ventana 3
Color Fondo	blanco	gris	amarillo
Color Texto	azul	negro	negro
Color Símbolos	rojo	negro	verde


<CENTER>
<TABLE BORDER>
<CAPTION ALIGN="bottom">Tabla 2.1.</CAPTION>
<TR ALIGN="center">
<TD></TD>
<TH>Ventana 1</TH>
<TH>Ventana 2</TH>
<TH>Ventana 3</TH>
<TR ALIGN="center">
<TH>Color<BR>Fondo</TH>
<TD>blanco</TD>
<TD>gris</TD>
<TD>amarillo</TD>
<TR ALIGN="center">
<TH>Color<BR>Texto</TH>
<TD>azul</TD>
<TD ROWSPAN=2> negro </TD>
<TD>negro</TD>
<TR ALIGN="center">
<TH>Color<BR>Símbolos</TH>
<TD>rojo</TD>
<TD>verde</TD>
</TABLE>
</CENTER>

Ejemplo: Atributo NOWRAP

Aquí hay una línea muy larga. Para que no sea cortada utilizamos el atributo NOWRAP.


<TABLE BORDER>
<TR>
<TD>Ejemplo: Atributo NOWRAP</TD>
<TD NOWRAP>Aquí hay una línea muy larga. Para que no sea cortada 
utilizamos el atributo <I>NOWRAP</I>.</TD>
</TABLE>

(Pequeño tutorial de TABLAS)

Facultad de Informática de la Universidad de Las Palmas de Gran Canaria