Tablas en HTML

Hasta que no se empezaron a usar las tablas, la única manera de tabular las cosas era utilizar la etiqueta de preformateado, con la que es necesario poner manualmente los espacios en blanco para que quede todo alineado formando filas y columnas, con un resultado muy poco estético.

Estructura de una tabla

Vamos a ver ordenadamente (de fuera hacia dentro) las etiquetas necesarias para confeccionar las tablas.

 

<TABLE>

La etiqueta general, que engloba a todas las demás es <TABLE> y </TABLE>.

<TABLE>

[resto de las etiquetas]

</TABLE>

 

Con esto se presentarían los datos tabulados, pero faltaría la característica que hace más atractivas a las tablas, y es que estos datos vayan dentro de unos cajetines formados por un borde. Para esto tenemos que añadir el atributo BORDER a la etiqueta, es decir:

 

<TABLE BORDER>

[resto de las etiquetas]

</TABLE>

 

<TR>

En el siguiente nivel, dentro de la anterior, están las etiquetas para formar cada fila (row) de la tabla, que son <TR> y </TR>. Hay que repetirlas tantas veces como filas queremos que tenga la tabla. Es decir, para una tabla con dos filas, sería:

 

<TR>

[etiquetas de las distintas celdas de la primera fila]

</TR>

<TR>

[etiquetas de las distintas celdas de la segunda fila]

</TR>

 

<TD>

En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que son

<TD> y </TD>, que engloban el contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirla tantas veces como celdas queremos que haya en esa fila.

<TABLE BORDER>

<TR>

 

 

</TR>

<TR>


<TD>fila1-celda1</TD>  <TD>fila1-celda2</TD>  <TD>fila1-celda3</TD>

 

 

<TD>fila2-celda1</TD>  <TD>fila2-celda2</TD>  <TD>fila2-celda3</TD>

 

 

 

</TR>

</TABLE>

 

 

Filas con desigual número de celdas

En este ejemplo hemos puesto dos filas con igual número de celdas. ¿Qué pasa si ese número es distinto? Pues el navegador forma el número de filas y columnas que haga falta, dejando espacios en blanco en las filas que tengan menos celdas.

 

Titular de la tabla

Se puede añadir un titular (caption) a la tabla, es decir un texto situado encima de la tabla  que indica  cuál  es  su  contenido.  Se  consigue con  la  etiqueta  <CAPTION>  y

</CAPTION>.

 

Variando el espesor de los bordes

El atributo BORDER (visto más arriba) pone por defecto un borde de espesor igual a la unidad. Pero se puede hacer que este borde sea tan grueso como queramos, poniendo:

 

<TABLE BORDER=número deseado>

 

Celdas de cabecera

Además de las celdas que contienen datos normales, podemos poner, si nos conviene, celdas de cabecera (header), que se distinguen por estar el texto de dichas celdas en negrita y centrado. Esto se consigue con la etiqueta <TH> y </TH> (en vez de la normal <TD> y </TD>)

 

Contenido de las celdas

Hasta ahora, en todos los ejemplos se ha puesto un texto normal dentro de las distintas celdas. Pero se puede poner en ellas cualquier otro elemento de los que van en un documento HTML, como imágenes, enlaces, etc. No hay más que poner dentro de la etiqueta de la celda la etiqueta correspondiente a una imagen, un enlace, etc.

 

Ejemplo con una imagen:

 

<TABLE BORDER=2>

<TR><TD><IMG  SRC=»babe.gif»></TD></TR>

</TABLE>

Ejemplo con un enlace:

 

<TABLE BORDER=2>

<TR><TD><A HREF=»index.html»>Página principal </A></TD></TR>

</TABLE>

 

Posicionamiento del contenido dentro de la celda

Normalmente, el contenido de una celda está alineado a la izquierda. Pero se puede cambiar esto añadiendo dentro de la etiqueta de la celda los siguientes atributos:

 

<TD ALIGN=CENTER> Al centro </TD>

 

 

 

<TD ALIGN=RIGHT> A la derecha </TD>

<TH ALIGN=LEFT> Cabecera a la izquierda </TH> (Recuérdese que por defecto están centradas)

 

El alineamiento  por defecto  en el sentido vertical es  en el medio. También  se puede cambiar, añadiendo dentro de la etiqueta de la celda los siguientes atibutos:

 

<TD VALIGN=TOP> Arriba </TD>

<TD VALIGN=BOTTOM> Abajo </TD>

 

Variando las dimensiones de la tabla

El navegador se encarga normalmente de dimensionar el tamaño total de la tabla de acuerdo con el número de filas, de columnas, por el contenido de las celdas, espesor de los bordes, etc.

 

A veces nos puede convenir forzarle para que la tabla tenga unas dimensiones totales mayores que las que le corresponden, tanto en anchura como en longitud. Esto se consigue añadiendo dentro de la etiqueta de la tabla los atributos WIDTH y HEIGHT igual a un porcentaje de la dimensión de la pantalla, o a una cifra que equivale al número de pixels.

 

Celdas que abarcan a otras varias

A veces puede interesarnos que una celda se extienda sobre otras varias. Esto se consigue añadiéndo dentro de la etiqueta de la celda los atributos COLSPAN=número para extenderse sobre un número determinado de columnas, o ROWSPAN=número para extenderse verticalmente sobre un número determinado de filas.

 

Por ejemplo, en la primera tabla de este capítulo vamos a añadir una fila con una sola celda, que abarca a dos columnas:

 

<TR> <TD COLSPAN=2> Celda sobre 2 columnas </TD> <TR>

 

O, en la misma tabla, vamos a añadir una celda en la primera  fila.  pero  que abarque también a la siguiente:

 

<TD ROWSPAN=2> Celda junto a 2 filas </TD>

 

Color de fondo en las tablas

 

 

Podemos conseguir que las tablas tengan un color de fondo, siguiendo un procedimiento totalmente análogo al empleado para que una página tenga un color de fondo uniforme (según vimos en el capítulo 7). Para ello debemos utilizar el atributo BGCOLOR=»#XXYYZZ», visto en dicho capítulo.

 

Imágenes de fondo en las tablas

El Explorer de Microsoft soporta la colocación de imágenes de fondo en el interior de las tablas, de una manera análoga a como se hace en una página (según vimos en el capítulo 7). Para ello debemos utilizar el atributo BACKGROUND=»imagen.gif» o BACKGROUND=»imagen.jpg».

 

 

 

Si se utiliza dentro de la etiqueta <TABLE> la imagen en cuestión se multiplicará detrás de todas las celdas. Si, por el contrario, sólo se pone este atributo dentro de la etiqueta de una celda concreta (<TD> o <TH>), entonces la imagen de fondo se verá sólo en esa celda, como por ejemplo:

 

Separación entre las celdas de una tabla

Por defecto, la separación entre las distintas celdas de una tabla es de dos pixels. Pero se puede variar esto con el atributo CELLSPACING, que se pone  dentro  de  la etiqueta TABLE.

 

Por ejemplo, para obtener una separación de 20 pixels entre celdas ponemos:

 

<TABLE BORDER CELLSPACING=20>

A primera vista parece como si esto fuera lo mismo que si hubiéramos aumentado el espesor de los bordes. Pero para comprobar que no es así, hagamos que en el caso anterior, tenga además unos bordes de 5 de espesor:

 

<TABLE BORDER=5 CELLSPACING=20>

 

Separación entre el borde y el contenido dentro de las celdas

Por defecto, la separación entre el borde y el contenido dentro de las celdas es de un pixel. Se puede cambiar esto con el atributo CELLPADDING, que se pone dentro de la etiqueta TABLE.

Por ejemplo, para obtener una separación de 20 pixels entre el contenido y los

bordes, dentro de cada celda:

 

<TABLE BORDER CELLPADDING=20>

(Se omite el resto de las etiquetas de la tabla)

También te podría gustar...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *