Como crear una tabla

Las tablas permiten la representación de datos por filas y columnas, en forma tabular. La definición es muy flexible indicando solo los elementos que forman cada fila y columna, calculándose de forma automática el tamaño que deben tener las celdas. En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes, enlaces, texto, listas, cabeceras, formularios, etc.

Para crear tablas usamos los siguientes códigos:

<table> indica el comienzo de una tabla.
<tr> indica el comienzo de una línea de la tabla.
</tr> indica el final de la línea de la tabla.
<td> indica el comienzo de una celda.
</td> indica el final de una celda.
<th> indica el comienzo de una celda que será una cabecera.
</th> indica el final de una celda que es una cabecera.
</table> indica el final de tabla.

ATRIBUTOS

Atributo	Utilidad
`BORDER`	Especifica el borde que se dibujará alrededor de las celdas. Por defecto es cero, lo que no dibujará borde alguno.
`CELLSPACING`	Define el número de pixels que separarán las celdas.
`CELLPADDING`	Define el número de pixels que habrá entre el borde de una celda y su contenido.
`WIDTH`	Especifica la anchura de la tabla. Puede estar tanto en pixels como en porcentaje de la anchura total disponible para él (pondremos "100%" si queremos que ocupe toda la anchura de la ventana).
`ALIGN`	Alinea la tabla a izquierda (`LEFT`), derecha (`RIGHT`) o centro (`CENTER`).
BGCOLOR	Aqui se especifiacara el color de fondo de la tabla o de una sola celda
`BACKGROUND`	Igual que la anterior solo hay que elegir la imagen

Vamos ha ver un ejemplo:

<table border=10> <tr><th>Primer Parcial</th><th>Segundo Parcial</th></tr> <tr><th>5.0</th><th>3.0</th></tr> <tr><th>2.0</th><th>4.2</th></tr> <tr><th>3.5</th><th>1.3</th></tr> </table>

Si introducimos este código obtendríamos el siguiente efecto:

Primer Parcial	Segundo Parcial
5.0	3.0
2.0	4.2
3.5	1.3

Uno de los aspectos más interesantes de una tabla es que nos permite aprovechar todo lo visto anteriormente.

TABLAS Y VINCULOS

Lista de mis buscadores favoritos
altavista	yahoo

<TABLE BORDER>
 <TR>
 <TD COLSPAN=2> Lista de mis buscadores favoritos </TD>
 </TR>
 <TR>
 <TD> <A HREF="http://www.altavista.com">altavista </A></TD>
 <TD>
 <A HREF="http://www.yahoo.com">yahoo</A></TD>		
  </TR>
</TABLE>

TABLAS E IMAGENES

Imágenes en celdas

	A su izquierda, una moneda
y a su derecha Nemesis

<TABLE BORDER>
	<TR>
		<TD> <IMG SRC="nemesis4.jpg"></TD>
		<TD> A su izquierda, una moneda </TD>
	</TR>

	<TR>
		<TD> y a su derecha Nemesis</TD>
		<TD> <IMG SRC="nemesis3.jpg"> </TD>
	</TR>

</TABLE>

Imágenes como fondo de las tablas

<TABLE BORDER=2 BACKGROUND="biohazard.gif">
	<TD><IMG SRC="nemesis4.jpg"></TD>
		<TD> A su izquierda, una Moneda</TD>
	</TR>

	<TR>
		<TD> y a su derecha Nemesis</TD>
		<TD> <IMG SRC="nemesis3.jpg"> </TD>
	</TR>

</TABLE>

	A su izquierda, una moneda
y a su derecha Nemesis

Tablas de línea expandida <ROWSPAN>

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

Tabla de columna expandida <COLSPAN>

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

El cual se vera asi:

Item 1	Item 2	Item 3
Item 4	Item 2	Item 5

Colores en las tablas

<TABLE BORDER>
<TR><TD BGCOLOR="RED">Texto ROJO</TD>
<TD BGCOLOR="green">Texto VERDE</TD>
</TR> <TD BGCOLOR="YELLOW">Texto AMARILLO</TD>
</TR>
</TABLE>

El cual se veria asi:

Texto ROJO	Texto VERDE
Texto AZUL	Texto AMARILLO

Tablas con titulo<CAPTION>

<TABLE BORDER>
<CAPTION ALIGN=top># de dias</CAPTION> <TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>10</TD>
<TD>20</TD>
<TD>30</TD> </TABLE>

El cual se veria asi:

# de dias
Enero	Febrero	Marzo
10	20	30