Tablas en la Web II

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 lso 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 imágen, un enlace, etc.

Ejemplo con una imagen:

Que resulta:

Ejemplo con un enlace:

<table border=5>
<tr>
<td><a href="http://www.google.com.pe">Visita Google</a></td>
<td><a href="http://www.webprosolutions.blogspot.com">Visita WebProSolutions</a></td>
<td><a href="http://www.facebook.com">Visita Facebook</a></td>
</tr>
</table>

Que resulta:

Visita Google

Visita WebProSolutions

Visita Facebook

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>Texto o imagen al centro</td>
<td align=right>Texto o imagen a la derecha</td>
<th align=left>Cabecera a la izquierda</th> (recuerde que por defecto están centradas)

<table border=10>
<tr>
<td>Ejemplos de alineamiento horizontal dentro de la celda</td>
</tr>
<tr>
<td align=center>Al centro</td>
</tr>
<tr>
<td align=right>A la derecha</td>
</tr>
<tr>
<th align=left>Cabecera a la izquierda</th>
</tr>
</table>

Cabecera a la izquierda
Ejemplos de alineamiento horizontal dentro de la celda
Al centro
A la derecha

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 atributos:

<td valign=top>Texto o imagen arriba</td>
<td valign=bottom>Texto o imagen abajo</td>

<table border=5>
<tr>
<td><img src="cerdito.jpg"></td>
<td valign=top>Arriba</td>
<td>Centro</td>
<td valign=bottom>Abajo</td>
</tr>
</table>

Arriba

Centro

Abajo

Variando las dimenciones 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.

Por ejemplo, si en el último ejemplo ponemos:

<table width=530>

<table border=5 width=530>
<tr>
<td><img src="cerdito.jpg"></td>
<td valign=top>Arriba</td>
<td valign=bottom>Abajo</td>
</tr>
</table>

Arriba

Centro

Abajo

O, si en ese mismo ejemplo, ponemos:

<table height= 350>

<table border=5 height=350>
<tr>
<td><img src="cerdito.jpg"></td>
<td valign=top>Arriba</td>
<td valign=bottom>Abajo</td>
</tr>
</table>

Arriba

Abajo

Celdas que abarcan a otras varias

A veces puede interesarnos que una celda se extienda sobre otras varias. Esto se consigue añadiendo dentro de la etiqueta de la celda los atributos colspan=número para expanderse sobre un número determinado de columnas, o rowspan=número para expanderse verticalmente sobre un número determinado de filas.

Por ejemplo, en la primera tabla de esta página vamos a añadir una fila con una sola celda, que abarca a dos columnas:

<tr>
<td colspan=2>Celda sobre dos columnas</td>
</tr>

<table border=5>
<tr>
<td colspan=2>Celda sobre 2 columnas</td>
</tr>
<tr>
<td>Fila1-Celda1</td>
<td>Fila1-Celda2</td>
<td>Fila1-Celda3</td>
</tr>
<tr>
<td>Fila2-Celda1</td>
<td>Fila2-Celda2</td>
<td>Fila2-Celda3</td>
</tr>
</table>

Que resulta:

Celda sobre 2 columnas
Fila1-Celda1	Fila1-Celda2	Fila1-Celda3
Fila2-Celda1	Fila2-Celda2	Fila2-Celda3

O, de la misma tabla, vamos a añadir una sola celda en la primera fila pero que abarque tambien a la siguiente:

<td rowspan=2>Celda junto a 2 filas</td>

<table border=5>
<tr>
<td rowspan=2>Celda junto a 2 filas</td>
<td>Fila1-Celda1</td>
<td>Fila1-Celda2</td>
<td>Fila1-Celda3</td>
</tr>
<tr>
<td>Fila2-Celda1</td>
<td>Fila2-Celda2</td>
<td>Fila2-Celda3</td>
</tr>
</table>

Que resulta: