Tablas

Delimitador de tabla <TABLE>

Este es la etiqueta principal que limita la tabla y lo debes usar dentro del BODY, cualquier etiqueta de tabla fuera de este delimitador no sera interpretado como tal.

Este etiqueta introduce un salto de linea automaticamente, tanto al principio de la tabla como al final.

WIDTH=valor o porcentaje Con este parametro opcional se controla el ancho de la tabla en pixels o en % del ancho de la ventana.

HEIGHT=valor o porcentaje Con este parametro opcional se controla el alto de la tabla en pixels o en % del alto de la ventana.

ALIGN Con este parametro opcional, se logra una tabla flotante, osea se alinea el texto al rededor de la tabla. Al igual que en las imagenes flotantes, se puede usar la etiqueta <BR CLEAR=...>, para organizar el texto fuera de la tabla mas comodamente. Puede tomar los valores LEFT (omision), CENTER, RIGHT.

VALIGN Con este parametro es posible manejar el alineamiento del texto dentro de las celdas en si. Puedes usar: TOP, CENTER, BOTTOM o BASELINE. Por omision este valor esta en CENTER.

BORDER=valor Por omision las tablas se presentan sin borde, pero con este parametro opcional se les puede añadir uno al rededor de cada celda. Con el se puede dar mas enfasis a una tabla poniendole un valor de 4 y una subtabla dentro con un valor de 1, por ejemplo.

Otro bonito efecto es darle un valor de 0, de manera que el espacio originalmente reservado al borde entre celdas es eliminado, obteniendose asi una tabla mas compacta.

BORDERCOLOR Con este parametro seleccionas el color del borde, siempre que este tambien presente el atributo BORDE.

BORDERCOLORLIGHT u BORDERCOLORDARK Con estos parametros puedes seleccionar un borde de color claro u oscuro muy especial, que proporciona una apariencia 3D. Tambien aqui debera estar presente la etiqueta BORDER.

CELLSPACING=valor Con este parametro opcional se controla el espacio entre dos celdas de una tabla. Por omision esta en 2. Poner este valor en 0 nos proporciona una tabla mas compacta.

CELLPADDING=valor Con este parametro opcional se controla el espacio entre el borde y su contenido. Por omision este valor esta en 1. Poniendolo en 0, se tendra que el contenido llaga a tocar el borde, algo no muy agradable.

BGCOLOR Con este parametro es posible poner un color de fondo diferente al del documento para resaltar la tabla. Se usa la misma sintaxis que en el parametro del mismo nombre en BODY.

BACKGROUND Con este parametro es posible poner una imagen de fondo dentro de la tabla. Se usa la misma sintaxis que en el parametro del mismo nombre en BODY. La imagen sera puesta en forma de mosaico el numero de veces necesario para cubrir todo el fondo de la tabla y solo funciona en Explorer.

Los atributos BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT y BORDERCOLORDARK tambien puedes usarlos en los etiquetas <TR>, <TD> y <TH> logicamnete afectando en este caso solo a una fila o celda en particular.

1. <CAPTION>

Con este etiqueta se asigna un titulo a la tabla. Debe aparecer dentro de los limites dla etiqueta TABLE pero fuera dla etiqueta TR.

Este etiqueta acepta los atriburos ALIGN (por omision en TOP), VALIGN y BGCOLOR.

2. Fila <TR>

Este etiqueta debe estar dentro del limite dla etiqueta TABLE y se usa para especificar una fila de la tabla. El numero de filas de la tabla es exactamente el numero de etiqueta TR usados.

ALIGN Con este parametro opcional, puedes alinear horizontalmente el texto contenido en todas las celdas de la fila. Puede tomar los valores LEFT (omision), CENTER, RIGHT.

VALIGN Con este parametro es posible manejar el alineamiento del texto dentro de todas las celdas de la fila. Puedes usar: TOP, CENTER (omision), BOTTOM o BASELINE.

Como ya se menciono tambien puedes usar los atributos BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT y BORDERCOLORDARK.

No funciona aqui los parametros WIDTH, HEIGHT, BACKGROUND, ROWSPAN ni COLSPAN.

3. Celda <TD>

Este etiqueta debe estar entre los limites dla etiqueta TR y define una celda normal. Cada fila debe tener el mismo numero de columnas, determinadas por este etiqueta o celdas en blanco seran añadidas al final para completar las columnas. Ten mucho cuidado al expandir filas o columnas de reducir el numero de celdas correspondientes en las otras filas o se te descuadra todo.

Cada celda puede contener cualquier etiqueta HTML y por omision la alineacion de horizontal sera left y la vertical center. Las lineas dentro de la celda pueden ser rotas con <BR> pero el parametro NOWRAP previene esto.

WIDTH=valor o porcentaje Con este parametro opcional se controla el ancho de la celda (en realidad de la columna correspondiente ya que tambien afectara a las demas celdas de la misma columna) en pixels o en % del ancho de la tabla.

HEIGHT=valor o porcentaje Con este parametro opcional se controla el alto de la celda (en realidad de la fila correspondiente ya que tambien afecta a las demas celdas de la misma fila) en pixels o en % del alto de la ventana.

ROWSPAN Con este atributo especificas cuantas filas debe espandirse esta celda sobre las otras. Por omision este valor es uno.

COLSPAN Con este atributo especificas cuantas columnas se puede expandir una celda sobre las demas. Por omision es uno.

NOWRAP Con este atributo se especifica que el contenido en la celda no sera roto, pero hay que tener cuidado porque puede causar que las celdas crescan demaciado.

Como ya se menciono tambien puedes usar los atributos ALIGN, VALIGN, BGCOLOR, BACKGOUND, BORDERCOLOR, BORDERCOLORLIGHT y BORDERCOLORDARK.

4. Encabezado <TH>

Es muy parecido al etiqueta TD solo que este es usado para titulos y encabezados, ya que pone el texto en negrita y lo alinea horizontalmente al centro de la celda.

Aqui se puede usar los mismos parametros que en TD.

Algunas consideraciones sobre el uso de tablas

Celdas en blanco no tendran borde. Si quieres que aparesca el borde tendras que poner algo como un espacio en la celda. Ej &nbsp; o <BR>.

Puedes incluso incluir un enlace, una imagen, un sonido o un video como contenido de una celda.

No es necesario (aunque tampoco es un error) cerrar los etiquetas <TR>, <TH> y <TD>. No asi <TABLE> y <CAPTION> que son obligatorios.


Algunos ejemplos

Ejemplo 1

<TABLE BORDER=1 BORDERCOLOR=purple CELLSPACING=0>
<CAPTION ALIGN=left>Ejemplo 1</CAPTION>
<TR><TD ROWSPAN=2 COLSPAN=2><TH COLSPAN=2 BGCOLOR=gray>Promedio
<TR><TH>Alto<TH>Ancho
<TR><TH ROWSPAN=2 BGCOLOR=gray>Sexo<TH BGCOLOR=silver>Machos<TD>1.9<TD>0.003
<TR><TH BGCOLOR=silver>Hembras<TD>1.7<TD>0.002
</TABLE>

Ejemplo 1
Promedio
AltoAncho
SexoMachos1.90.003
Hembras1.70.002


Ejemplo 2

<TABLE BORDER=1 BGCOLOR=#FEE7BD>
<CAPTION>Ejemplo 2</CAPTION>
<TR>
<TD>1</TD><TD>2<TD>3
<TABLE BORDER BORDERCOLOR=Black>
<TR><TD>A<TD>B
<TR><TD>C<TD>D
</TABLE>
<TR><TD>4<TD><5<TD6>
</TABLE>

Ejemplo 2
123
AB
CD
456


Ejemplo 3

<CENTER>
<TABLE BORDER=4 WIDTH=70% HEIGHT=15%>
<CAPTION ALIGN=RIGHT VALIGN=BOTTOM>Ejemplo 3</CAPTION>
<TR><TH>Este sera el Item 1<TH>Item 2
<TR><TD>3<TD>4
<TR ALIGN=CENTER><TD>5<TD>6
<TR ALIGN=RIGHT><TD>7<TD>8
</TABLE>
</CENTER>

Ejemplo 3
Este sera el Item 1Item 2
34
56
78


Ejemplo 4

<TABLE BORDER BGCOLOR=Silver BORDERCOLOR=Black WIDTH=50%>
<CAPTION BGCOLOR=WHITE>Ejemplo 4</CAPTION>
<TR>
<TD>Esta es la primera celda<TD>Esta es la segunda celda
<TR BORDERCOLOR=TEAL BGCOLOR=OLIVE><TD>Eta es la tercera celda<TD>Esta es la cuarta celda
<TR BORDERCOLOR=NAVY BGCOLOR=AQUA>
<TD BORDERCOLOR=Yellow>Esta es la quinta celda</TD><TD BGCOLOR=White>Esta es la sexta celda
</TABLE>

Ejemplo 4
Esta es la primera celdaEsta es la segunda celda
Eta es la tercera celdaEsta es la cuarta celda
Esta es la quinta celdaEsta es la sexta celda


Ejemplo 5

<TABLE ALIGN=left BORDER WIDTH=50%>
<CAPTION>Ejemplo 5</CAPTION>
<TR><TD><FONT COLOR=PURPLE>Esta tabla tiene dos filas</FONT>
<TR><TD>Esta alineada a la izquierda
</TABLE>

Ejemplo 5
Esta tabla tiene dos filas
Esta alineada a la izquierda
Estas lineas de texto estan a la derecha de la tabla que es flotante y la pueden rodear completamente sin problemas.


Ejemplo 6

<TABLE ALIGN=right BORDER=1 WIDTH=50%>
<CAPTION>Ejemplo 6</CAPTION>
<TR><TD HEIGHT=30%><FONT COLOR=red>Esta tabla tiene dos filas</FONT>
<TR><TD>Esta alineada a la derecha de la pagina
</TABLE>

Ejemplo 6
Esta tabla tiene dos filas
Esta alineada a la derecha de la pagina
Estas lineas de texto estan a la izquierda de la tabla que es flotante y la pueden rodear completamente sin problemas.


Ejemplo 7

Esta es
la vista
desdemicasa