Una tabla se puede craar en cualquier lugar de nuestro documento, ó podemos hacer un documento nuevo en donde insertaremos una tabla, recordemos que en un documento nuevo haremos nuevamente la estructura basica de una pág. Web (HTML-CABEZALES-TUTULO-CUERPO )

Volviendo al tema de esta lección, diremos que para insertar una tabla utilizaremos las siguientes etiquetas con sus corrspondientes atributos:

ETIQUETA <TABLE> </TABLE>: Con esta etiqueta insertaremos una tabla en nuestro documento, y con los siguientes atributos especificaremos algunas de sus cualidades.

ATRIBUTO WIDTH: Con este atributo estableceremos el ancho que deseamos para la tabla, este valor se puede especificar tanto en pixeles como en porcentaje.

ATRIBUTO HEIGHT: Con este atributo especificaremos el alto de la tabla, e igual que en el caso anterior, lo podremos especificar tanton en porcentaje como en pixeles. Ejemplo:

ATRIBUTO BORDER: Este atributo hace referencia a los bordes de la tabla, por defecto el borde será de "0" lo cual indica que esta invisible, si queremos apreciarlo debemos darle un valor númerico que especificará el espesor del mismo en pixeles. Ejemplo:

ATRIBUTO BGCOLOR: Con este atributo daremos color al fondo de la tabla

ATRIBUTO BACKGROUND: Con este atrubuto pondremos como fondo una imágen, dando su ubicación, si dentro de nuestra carpeta, hemos crado una subcarpeta que contiene todas las imagenes que utlizaremos, daremos esta indicación en el codigo, para que la imagen sea localizada, en este caso quiero hacer la recomendacion de verificar el tamaño de la imagen que pondremos como fondo, ya que si esta es demasiado pequeña se repetirá tantas veces como sea necesario para cubrir la superficie del area de trabajo.Para aplicareste atributo debemos escribirlo de la siguiente manera. Ejemplo:

ATRIBUTO ALIGN: Este atributo atraves de sus parametros nos permite dar una alineación a nuestra tabla:

LEFT: Alinear a la izquierda

CENTER: Alinear al centro

RIGHT: Alinear a la derecha

Ejemplo:

Ya hemos visto como podemos dar las primeras especificaciones a nuestra tabla, pero aún no hemos creado ninguna celda, fila o columna, para este fin debemos de utilizar otras etiquetas especificas que veremos a continuación, y por ultimo graficaremos los ejemplos, para apreciar como se verá en el trabajo final.

ETIQUETA <TR> </TR>: Con esta etiqueta especificaremos el numero de filas que tendra la tabla, esta etiqueta tiene dos atributos:

ALIGN: Este atributo con sus correspondientes parametros permite definir en que posición horizontal se alinea el contenido de la celda.( Aplicará a todas las celdas correspondientes a la fila)

LEFT: Izquierda.

RIGHT: Derecha.

CENTER: Centro.

VALIGN: Este atributo con sus correspondientes parametros permite definir en que posición vertical se alinea el contenido de la celda.( Aplicará a todas las celdas correspondientes a la fila)

TOP: Arriba

BOTTOM: Abajo

MIDDLE: Centro

ETIQUETA <TD> </TD>: Con esta etiqueta especificaremos el número de columnas que tendra la tabla, esta estiqueta tiene los siguientes atributos:

ALIGN: Este atributo con sus correspondientes parametros permite definir en que posición horizontal se alinea el contenido de la celda.( Solo aplica a la celda especificada con el atributo)

LEFT: Izquierda.

RIGHT: Derecha.

CENTER: Centro.

VALIGN: Este atributo con sus correspondientes parametros permite definir en que posición vertical se alinea el contenido de la celda..( Solo aplica a la celda especificada con el atributo)

TOP: Arriba

BOTTOM: Abajo

MIDDLE: Centro

WIDTH: Este atributo modificará el ancho toda la columna.

HEIGHT: Este atributo modificará el alto de toda la fila.

Las medidas que aplicará WIDTH y HEIGHT, lo hará respcto a la medida que hemos especificado anteriormente para la tabla; es decir, si estas medidas las aplicamos en porcentaje, este será respecto a la medida que hemos especificado en la etiqueta <TABLE> <TABLE/>.

A continiación graficaremos los ejemplos para poder mejorar la comprención del tema.Para el grafico tomaremos los parametros que hemos venido aplicando como ejemplo, y haremos una tabla de dos filas por tres columnas, aplicaremos algunos de los atributos que hemos visto para la alineación del texto y veremos como los atributos que se aplican a la etiqueta <tr> </tr> afectan a toda la fila y los atributos de <td> </td> afectan solo a la celda en la cual se han determinado. Así, la primera fila: (Celdas: 1.1-1.2-1.3 ) tendra la alineación del texto horizontal a la derecha y vertical arriba y luego aplicaremos los atributos de alineación a la primera celda de la segunda fila:( Celda: 2.1) alinación derecha y abajo, las celdas siguientes: ( 2.3- 2.4 ) mantendran la alineación por defecto: ( Izquierda y centrado ).

<TD >1.1

</TD>

<TD>1.2

</TD>

<TD>1.3

</TD>

</TR>

<TR >

<TD ALIGN="LEFT" VALIGN="BOTTOM" >2.1

</TD>

<TD>2.2

</TD>

<TD>2.3

</TD>

</TR>

</TABLE>

1.1

1.2

1.3

2.1

2.2

2.3

Nos quedan por ver dos atributos más en la etiqueta <td> </td>, que nos darán la posibilidad de modificar el tamaño de las celdas, y son:

WIDTH: Con este atributo modificaremos el ancho de la celda, pero debemos tener en cuenta que al aplicarlo, también modificaremos el ancho de todas las celdas pertenecientes a la columna en donde se encuentra dicha celda.

HEIGHT: Con este atributo modificaremos el alto de la celda, pero en este caso tendremos encuenta que se modificará toda la fila a la que pertenece la celda modificada.

Para aclarar estos conceptos daremos un ejemplo con la tabla que hemos hecho anteriormente: Vamos a decir que queremos modificar el ancho de la primera celda (1.1) con el atributo WIDTH. Veremos como no solo estará modificando el tamaño de la celda (1.1)sino también el de toda la columna.

Y para aplicar el atributo HEIGHT, diremos que queremos modificar el alto de la segunda celda de la primera columna (2.1) . Veremos como no solo modificará el tamaño de la celda (2.1)sino el de toda la fila.

<TD WIDTH ="50PX" >1.1

</TD>

<TD>1.2

</TD>

<TD>1.3

</TD>

</TR>

<TR >

<TD HEIGHT="350PX" ALIGN="LEFT" VALIGN="BOTTOM" >2.1

</TD>

<TD>2.2

</TD>

<TD>2.3

</TD>

</TR>

</TABLE>

1.1

1.2

1.3

2.1

2.2

2.3

ETIQUETA <TH></TH>: Con esta etiqueta podremos poner el encabezado de la tabla, para ello pondremos inmediatamente después de la etiqueta <tr></tr> (Filas ) la etiqueta de encabezados <TH></TH> Tantas veces como columnas pretendemos poner a la tabla. ( En este caso recordemos que hemos creado una tabla de dos filas por tres columas )Con esta etiqueta nos aseguraremos de que el texto aparece centrado y en negrita, posee los mismos atributos que la etiqueta <td> </td> a continuacion daremos nombre al encabezado, para continuar creando la tabla como ya se ha indicado anteriormente. Ejemplo:

<TR >

<TH > COLUMNA 1.1

</TH>

<TH>COLUMNA 1.2

</TH>

<TH>COLUMNA 1.3

</TH>

</TR>

<TD WIDTH ="50PX" >1.1

</TD>

<TD>1.2

</TD>

<TD>1.3

</TD>

</TR>

<TR >

<TD HEIGHT="350PX" ALIGN="LEFT" VALIGN="BOTTOM" >2.1

</TD>

<TD>2.2

</TD>

<TD>2.3

</TD>

</TR>

</TABLE>

COLUMNA - A

COLUMNA - B

COLUMNA - C

1.1

1.2

1.3

2.1

2.2

2.3

ATRIBUTOS PARA UNIR LAS CELDAS DE LA ETIQUETA <TD> </TD>:

COLSPAN: Toma el tamaño de número de columnas hacia su derecha, imaginemos que en el ejemplo anterior, queremos unir las celdas 2.1 y la 2.2. Aplicaremos el atributo a la celda 2.1 poniendo entre comillas el número de celdas a unir, la celda 2.1 tomará el tamaño de el suyo y el de la celda 2.2 así:

<TR >

<TD HEIGHT="350PX" ALIGN="LEFT" VALIGN="BOTTOM" COLSPAN="2">2.1

</TD>

<TD>2.2

</TD>

<TD>2.3

</TD>

</TR>

</TABLE>

COLUMNA - A

COLUMNA - B

COLUMNA - C

1.1

1.2

1.3

2.1

2.2

2.3

Como podemos ver, al aplicar el atributo hemos unido dos columnas en la fila inferior de la tabla pero se ha desalineado la tabla y en la parte superior derecha sobra un espacio, para arreglarlo debemos eliminar las celdas que sobran, en este caso la 2.3.

COLUMNA - A

COLUMNA - B

COLUMNA - C

1.1

1.2

1.3

2.1

2.2

ATRIBUTO ROWSPAN: Este atrubuto nos permite unir las filas, en el siguiente ejemplo uniremos las celdas 1.3 y la 2.2, igualmente que el anterior ejemplo, pondremos entre comillas el número de celdas a unir( en este caso 2 )en la etiqueta <td> </td> correspondiente a la celda 1.3.

<TD WIDTH ="50PX" >1.1

</TD>

<TD>1.2

</TD>

<TD ROWSPAN="2">1.3

</TD>

</TR>

COLUMNA - A

COLUMNA - B

COLUMNA - C

1.1

1.2

1.3

2.1

2.2

Como podemos ver ahora la celda 1.3, ocupa su espacio mas el de la celda 2.2, pero nuevamente nos sobra un espacio arriba en la parte derecha de la tabla, para solucionarlo, aplicamos la misma tecnica anterior, que es eliminar la celda que nos sobra, en este caso la 2.2

COLUMNA - A

COLUMNA - B

COLUMNA - C

1.1

1.2

1.3

2.1

TUTORIAL HTML

TABLAS

(Hipertex markup language)