Manual HTML - TABLAS

Las tablas son posiblemente la manera más clara de organizar la información. Las tablas nos permiten representar cualquier elemento de nuestra página (texto, listas, imágenes, etc.) en diferentes renglones y columnas. Es una herramienta muy útil para "ordenar" contenidos de distintas partes de nuestra página. Todas las tablas son arreglos rectangulares de renglones y columnas. Primero se definen las características de toda la tabla, después se definen las características de cada renglón y finalmente se definen las celdas, que son los componentes mínimos de una tabla.

La tabla se define mediante la etiqueta <TABLE> ..... </TABLE>. Cada uno de los renglones que componen la tabla se define mediante la etiqueta <TR></TR>. Estas etiquetas son colocadas entre las etiquetas <TABLE> ..... </TABLE>. Por último, cada renglón se encuentra compuesto por un determinado número de celdas. Cada celda se define mediante la etiqueta <TD></TD>. Estas etiquetas son colocadas entre las etiquetas <TR></TR>. Por lo tanto, todo aquello que se encuentre dentro de las etiquetas <TD></TD>, estará dentro de la celda en cuestión. La etiqueta <TH> indica

una celda de "encabezado", es decir, el contenido será resaltado en negritas y en un tamaño ligeramente superior al normal.

En el siguiente cuadro se explican el uso de cada uno de los modificadores para la tabla en general, los renglones y las celdas.



ETIQUETA PARA DEFINIR TABLA

<TABLE modificadores >....... </TABLE>

Modificador Descripción del Modificador

Border= número Indica el ancho del borde de la tabla en puntos.

Cellspacing= número Indica el espacio en puntos que separa a las celdas que están dentro de la tabla.

Cellpadding= número Indica el espacio en puntos que separa el borde de cada celda y el contenido de ésta.

Width= número ó %

Indica el ancio de la tabla en puntos o en porcentaje en función del ancho de la ventana del navegador. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos de las celdas.

Height= número ó %

Indica la altura de la tabla en puntos o en porcentaje en función del alto de la ventana del navegador. Si no se indica este parámetro, la altura se adecuará a la altura de los contenidos de las celdas.

Bgcolor= código de color Especifica el color de fondo de toda la tabla.

<TR>....... </TR>

Align= LEFT / CENTER

/ RIGHT / JUSTIFY

Alinea el contenido de las celdas horizontalmente, hacia la izquierda (LEFT), centro (CENTER), derecha (RIGHT) o justificado (JUSTIFY).

Valign= TOP / MIDDLE / BOTTOM

Alinea el contenido de las celdas de la fila verticalmente hacia arriba (TOP), centro (MIDDLE) o abajo (BOTTOM).



<TD>....... </TD>, <TH>....... </TH>

Align= LEFT / CENTER / RIGHT / JUSTIFY

Indica cómo se debe alinear el contenido de la celda, a la izquierda (LEFT), a la derecha (RIGHT), centrado (CENTER) o justificado (JUSTIFY).

Valign= TOP / MIDDLE / BOTTOM

Indica la alineación vertical del contenido de la celda, en la parte superior

(TOP), en el centro (MIDDLE), o en la inferior (BOTTOM).

Rowspan= número Indica el número de filas que ocupará la celda. Por omisión ocupa una sola fila.

Colspan= número Indica el número de columnas que ocupará la celda. Por omisión ocupa una sola columna.

Width= número ó %

Indica el ancho de la columna en puntos o en porcentaje en función del ancho de la ventana del navegador. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos. Este modificador sólo funciona en los navegadores modernos.

Bgcolor= código de color Especifica el color de fondo del elemento de la tabla.

Como se indicó anteriormente el contenido de las celdas puede ser cualquier elemento de HTML, un texto, una imagen, una hiperliga, una lista, etcétera.

Las tablas se definen de la siguiente manera. Primero, las características de la tabla, luego las de cada renglón y dentro de éste, cada celda. Así pues, una tabla con dos renglones y tres columnas se escribirá así:

Sintaxis:

<TABLE border=1>  Etiqueta de inicio de la tabla

<TR>  Etiqueta de inicio de renglón

<TD> Renglón 1, Celda 1 </TD>

<TD> Renglón 1, Celda 2 </TD> Conjunto de Celdas

<TD> Renglón 1, Celda 3 </TD>

</TR> Etiqueta de cierre de renglón

<TR>  Etiqueta de inicio de renglón

<TD> Renglón 2, Celda 1 </TD>

<TD> Renglón 2, Celda 2 </TD> Conjunto de Celdas

<TD> Renglón 2, Celda 3 </TD>

</TR>  Etiqueta de cierre de renglón

</TABLE>  Etiqueta de cierre de la tabla

Ejemplo:

<TABLE border = 4 cellspacing = 4 cellpadding = 4 width =80%>.

<TH align = center>Buscadores

<TH align = center colspan = 2>Otras hiperligas

<TR>

<TD align = LEFT>Yahoo

<TD align = LEFT>Netscape

<TD align = LEFT>Lycos

<TR>

<TD align = LEFT>Infoseek

<TD align = LEFT>AltaVista

<TD align = LEFT>Goto

</TABLE>