Tablas

Portada | Fundamentos del HTML | Tablas

Tablas

(contenido antiguo)

Las tablas nos servirán fundamentalmente para colocar de una forma ordenada textos e imágenes dentro de las páginas.

Etiquetas básicas | Filas y columnas con distinto número de celdas

Celdas abarcando a celdas y columnas | Separación entre celdas | Grosor del borde

Distancia entre el borde y el contenido | Titulares en las tablas | Celdas de cabecera

Alineamiento del contenido | Fondos de las tablas | Dimensiones de las tablas

Imágenes y otros elementos en las tablas

La etiqueta básica para las tablas sin bordes es <TABLE> y </TABLE>, y para con bordes <TABLE BORDER> y </TABLE>.

Dentro de la etiqueta anterior se colocarían las de las filas <TR> y </TR>. Y dentro de ellas, a su vez, habrá que colocar por celda <TD> y <TD>. Un ejemplo de todo esto sería:

a	b
c	d

o con borde...

a	b
c	d

También se puede hacer con un número de celdas distinto en las filas:

a	b
c

También se puede hacer que las celdas abarquen a las demás con COLSPAN=x o con ROWSPAN=x, cambiando la x por el número de filas a incluir.

<TABLE BORDER>
<TR>
<TD COLSPAN=2>
Celda abarcando
</TD>
</TR>
<TR>
<TD>
a
</TD>
<TD>
b
</TD>
</TR>
<TR>
<TD>
c
</TD>
<TD>
d
</TD>
</TR>
</TABLE>

Celda abarcando
a	b
c	d

o bien...

<TABLE BORDER>
<TR>
<TD ROWSPAN=2>
Celda abarcando
</TD>
<TD>
a
</TD>
<TD>
b
</TD>
</TR>
<TR>
<TD>
c
</TD>
<TD>
d
</TD>
</TR>
</TABLE>

Celda abarcando	a	b
Celda abarcando	c	d

También podemos decir la separación de las celdas con CELLSPACING=x. Por defecto es de dos píxels. Se sustituye la x, obviamente, por el número de píxels.

a	b
c	d

Por otro lado también es posible cambiar el espesor de los bordes añadiendo al BORDER un número de píxels, que quedaría así: BORDER=x. Por defecto es un píxel:

a	b
c	d

También se puede separar el borde de la tabla del contenido que hay en ella con CELLPADDING=x. Por defecto es un píxel.

a	b
c	d

Ahora veamos cómo quedarían en la misma tabla BORDER, CELLSPACING y CELLPADING a la vez.

a	b
c	d

Ahora veremos cómo poner titulares en las tablas. Es con la etiqueta <CAPTION> y </CAPTION>, y quedaría:

<TABLE BORDER>
<CAPTION>
Tabla con letras
</CAPTION>
<TR>
<TD>
a
</TD>
<TD>
b
</TD>
</TR>
<TR>
<TD>
c
</TD>
<TD>
d
</TD>
</TR>
</TABLE>

Tabla con letras
a	b
c	d

También podemos añadir las llamadas celdas de cabecera, que por defecto estarán centradas y en negrita. Es con las etiquetas <HR> y <HR> colocadas dentro de una fila antes de las otras. Quedaría así:

<TABLE BORDER>
<TR>
<TH>
Letras
</TH>
<TH>
Números
</TH>
</TR>
<TR>
<TD>
a
</TD>
<TD>
1
</TD>
</TR>
<TR>
<TD>
b
</TD>
<TD>
2
</TD>
</TR>
</TABLE>

Letras	Números
a	1
b	2

El contenido de la celda se puede variar su posición colocando unos atributos dentro de <TD>. En horizontal, quedaría con ALIGN="LEFT" alineado a la izquierda, con ALIGN="RIGHT" alineado a la derecha y con ALIGN="CENTER" centrado. Recordemos que este último es el de defecto.

---------------

Y si se puede ajustar en horizontal también se puede en vertical; con VALIGN="TOP" para alinearlo arriba, VALIGN="BOTTOM" para abajo y VALIGN="MIDDLE" para el medio. Este último es el de defecto.

Ahora veremos los fondos de las tablas, con colores e imágenes. Con colores es con BGCOLOR="xxyyzz" tal y como vimos en el tema de fondos, y con imágenes es BACKGROUND="imagen.***" como vimos también en ese mismo capítulo. Habrá que colocar estos atributos dentro de <TABLE> si queremos que afecte a toda la tabla, en <TR> para que afecte a una fila y en <TD> para que afecte a una sola celda.

a	b
c	d
e	f

Recordemos que sólo aceptan las imágenes de fondo en tablas el Microsoft Internet Explorer 3.0 o superior y el Netscape Communicator 4.0 o superior. Para solucionar este problema deberemos colocar dentro de <TABLE> los dos atributos BGCOLOR y BACKGROUND. Quedaría más o menos así:

<TABLE BORDER BACKGROUND="chalk.jpg" BGCOLOR="000000">

Ahora veremos cómo sobredimensionar una tabla, es decir, que sea más grande que las cosas que contiene. Se hace con HEIGHT=x para la altura y WIDTH=x para la anchura. Veremos ejemplos de cada uno por separado aunque se pueden usar los dos a la vez.

a	b
c	d

o...

a	b
c	d

Y con este apartado ya terminamos. Veremos cómo insertar otros elementos dentro de las tablas. Pueden ser imágenes e incluso los elementos más avanzados que veremos en los últimos capítulos como pueden ser programas JavaScript, HTML Layout, etc... Se pueden introducir todos los elementos posibles dentro de ellas.

Para insertar una imagen bastará con usar la etiqueta <IMG SRC="imagen.***">.

Podemos cambiar la distancia a los bordes con los parámetros HSPACE=x y VSAPCE=x: el primero es para decidir los píxels que se dejarán a izquierda y derecha, y el segundo los que se dejarán arriba y abajo. La x se sustituye por el número de píxels. Se colocarán dentro de la etiqueta de la imagen. Da un resultado similar a CELLPADDING:

Para comentarios, usar las direcciones e-mail de contacto