Tablas


La estructura de una tabla se define mediante: 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:
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.
Inicio

Ejemplos:

celda 1celda 2
celda 3celda 4

<TABLE>
<TR><TD>celda 1</TD><TD>celda 2</TD></TR>
<TR><TD>celda 3</TD><TD>celda 4</TD></TR>
</TABLE>
celda 1celda 2
celda 3celda 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 1celda 2
celda 3celda 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>
Inicio

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.
Inicio

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.
Inicio

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).
Inicio

CAPTION

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

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 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>
Inicio

Indice (Pequeño tutorial de TABLAS)

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