Tablas

Las tablas son elementos que representan valores en dos dimenciones. Muchos atributos de tabla estan obsoletos y se recomienda usar en su lugar CSS.

La etiqueta de cierre es obligatoria. Soporta atributos globales.

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

Es un elemento de bloque por lo que introduce un salto de linea automaticamente, tanto al principio como al final de la tabla.

Atributos de TABLE
AtributoDescripcion
WIDTHDefine el ancho de la tabla en pixels o en % del ancho de la ventana.
HEIGHTDefine el alto de la tabla en pixels o en % del alto de la ventana.
ALIGNDefine la tabla como 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 none (omision)|LEFT|RIGHT.
VALIGNDefine el alineamiento vertical del texto dentro de las celdas en si. Puedes usar: CENTER (omicion)|TOP|BOTTOM|BASELINE.
BORDERDefine el borde de la tabla. 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.
BORDERCOLORDefine el color del borde, siempre que este tambien presente el atributo BORDER.
BORDERCOLORLIGHT o BORDERCOLORDARKDefine un borde de color claro u oscuro muy especial, que proporciona una apariencia 3D. Tambien aqui debera estar presente la etiqueta BORDER.
CELLSPACINGDefine el espacio entre dos celdas de una tabla. Por omision esta en 2. Poner este valor en 0 nos proporciona una tabla mas compacta.
CELLPADDINGDefine 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.
BGCOLORDefine 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.
FRAMEDefine cual lado de la tabla sera mostrado. above|below|hsides|vsides|lhs|rhs|border|box|void.
RULESDefine donde aparecen las reglas de la tabla. none|groups|rows|columns|all.
SUMMARYDefine un texto alternativo para describir la tabla. Ahora se debe usar CAPTION.
BACKGROUNDDefine 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.

Ya no se deberia usar ningun atributos de table. borde, border-collapse, padding, margin, etc todas fueron incluidas en CSS.

2. Filas TR

Este etiqueta debe estar dentro del limite de la 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.

Atributos de TR
AtributoDescripcion
ALIGNCon este parametro opcional, puedes alinear horizontalmente el texto contenido en todas las celdas de la fila. Puede tomar los valores: LEFT (omision)|CENTER|RIGHT.
VALIGNCon 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.

Aqui no funcionan los aributos WIDTH, HEIGHT, BACKGROUND, ROWSPAN ni COLSPAN.

Otros atributos son: ALIGN, VALIGN, BGCOLOR, BACKGOUND, BORDERCOLOR, BORDERCOLORLIGHT y BORDERCOLORDARK. Ahora deberian ser manejado con CSS.

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

Atributos de TH
AtributoDescripcion
ROWSPANDefine cuantas filas debe espandirse esta celda sobre las otras. Por omision este valor es uno.
COLSPANDefine cuantas columnas se puede expandir una celda sobre las demas. Por omision es uno.
SCOPEDefine si la celda es cabecera de una tabla. Los valores posibles son: ROW|COL.
WIDTHDefine 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.
HEIGHTDefine 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.
NOWRAPDefine que el contenido en la celda no sera roto, pero hay que tener cuidado porque puede causar que las celdas crescan demaciado.

4. Celda TD

Este etiqueta debe estar entre los limites de la 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 cortas con <BR> pero el parametro NOWRAP previene esto.

Atributos de TD
AtributoDescripcion
ROWSPANDefine cuantas filas debe espandirse esta celda sobre las otras. Por omision este valor es uno.
COLSPANDefine cuantas columnas se puede expandir una celda sobre las demas. Por omision es uno.
WIDTHDefine 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.
HEIGHTDefine 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.
NOWRAPDefine que el contenido en la celda no sera roto, pero hay que tener cuidado porque puede causar que las celdas crescan demaciado.

Otros atributos son: ALIGN, VALIGN, BGCOLOR, BACKGOUND, BORDERCOLOR, BORDERCOLORLIGHT y BORDERCOLORDARK. Ahora deberian ser manejado con CSS.

5. CAPTION

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

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

6. COLGROUP

7. THEAD

Delimita la seccion de cabecera de la tabla.

8. TBODY

Delimita la seccion de cuerpo de la tabla.

9. TFOOT

Delimita la seccion de pie de la tabla.

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


11. Algunos ejemplos de tablas

11.1 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

11.2 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

11.3 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

11.4 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

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

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

11.7 Ejemplo 7

<TABLE WIDTH=40% HEIGHT=50% BGCOLOR=#FFCCFF BORDER=1 BORDERCOLOR=#440066 CELLSPACING=0>
<TR ALIGN=center><TD>Esta es<TD ROWSPAN=2 COLSPAN=2><IMG SRC=isla.gif ALT=isla>
<TR ALIGN=center><TD>la vista
<TR ALIGN=center><TD>desde<TD>mi<TD>casa
</TABLE>
Ejemplo 7
Esta esisla
la vista
desdemicasa