INTRODUCCIÓN

¿Habéis visto alguna tabla de word? ¿Si,? Pues ya sabéis los que son las tablas . En realidad es una forma de agrupar la información en columnas y filas divididas en celdas.

Aunque las tablas se pensaron para hacer listados de datos como agendas, resultados, balances etc., pronto se vio que servían para mucho más. Durante mucho tiempo han sido y siguen siendo utilizadas para organizar los elementos dentro de cada página.

Hoy por hoy la mayoría de los diseñadores basan la maquetación de las páginas en tablas, pues permiten organizar y distribuir espacios de forma bastante sencilla una vez que se ha cogido práctica. Con tablas podemos simular texto en columnas como en los periódicos.

Sin embargo esta utilización de las tablas puede dar lugar a unas páginas más lentas y de difícil acceso para personas incapacitadas que utilicen lectores de pantalla o navegadores de voz. Por ello, hoy día la corriente liderada por la W3C nos invita a olvidarnos de las tablas y utilizar capas.
Algunas personas han optado por una solución intermedia utilizando tablas para maquetar el contenido pero dejando todos los aspectos visuales a las hojas de estilo. Elegir un modo u otro de hacer páginas es más una cuestión de compromiso personal con una web más accesible para todos que de estilo de programación.

ETIQUETAS BÁSICAS
Vamos a ver primero cuáles son las etiquetas básicas. Para definir una tabla utilizamos las etiquetas:

<table> y </table>.

Cada fila de una de una tabla se define con las etiquetas

<tr> y </tr>

Dentro de cada fila, tenemos las celdas que se definen con las etiquetas

<td></td>

Dentro de las celdas es dónde pondremos nuestro contenidos. El número de “celdas” que tengamos dentro de una tabla determina el número de columnas que tendremos.

Veamos nuestra primera tabla:

<table>
<tr>
<td>Fila 1, 1ª Celda</td>
<td> Fila 1, 2ª Celda </td>
</tr>
<tr>
<td> Fila 2, 1ª Celda </td>
<td> Fila 2, 2ª Celda</td>
</tr>
</table>

El resultado

Nota: Veremos mejor las tablas, si les definimos un borde alrededor. Aunque después veremos cómo se hace con CSS, de momento vamos a definirle un borde a nuestra tabla con HTML para poder ver realmente cómo se estructuran las filas y columnas de las tablas. Así que repetimos nuestra tabla con añadiéndole a la tabla el atributo “border=1″

<table border="1">
<tr>
<td>Fila 1, 1ª Celda</td>
<td> Fila 1, 2ª Celda </td>
</tr>
<tr>
<td> Fila 2, 1ª Celda </td>
<td> Fila 2, 2ª Celda</td>
</tr>
</table>

El resultado

AGRUPANDO CELDAS

A veces es posible que queramos agrupar 2 o más celdas de una fila o dos o más celdas de una columna. Se hace utilizando los atributos “Colspan=”n”" y “rowspan=”n”. En realidad el concepto es sencillo. Veamos un ejemplo:

<table border="1">
<tr>
<td colspan="2">Fila 1, celdas 1 y 2 agrupadas</td>
</tr>
<tr>
<td> Fila 2, 1ª Celda </td>
<td> Fila 2, 2ª Celda</td>
</tr>
</table>

El resultado

La clave está aquí: <td colspan=”2″>. Con colspan=”2″ le estamos diciendo al navegador que definimos una celda que ocupa el lugar de dos celdas de la fila. Cómo esta celda ocupa 2 lugares no nos hace falta definir la segunda celda puesto que su espacio ya está ocupado.

Ahora veamos como agruparíamos las celdas de dos filas diferentes, lo haremos con rowspan:

<table border="1">
<tr>
<td rowspan="2">Fila 1 y 2 y, celd1 agrupadas</td>
<td> Fila 1, 2ª Celda </td>

</tr>
<tr>
<td> Fila 2, 2ª Celda</td>
</tr>
</table>
El resultado

Ahora vamos a ver una tabla en la que utilizamos las dos agrupaciones:

<table border="1">
<tr>
<td rowspan="2">Fila 1 y 2 y, celda 1 agrupadas</td>
<td> Fila 1, 2ª Celda </td>
<td colspan="2"> Fila 1, 3ª Celda </td>

</tr>
<tr>
<td> Fila 2, 2ª Celda</td>
<td> Fila 2, 2ª Celda</td>
<td> Fila 2, 2ª Celda</td>

</tr>
</table>
El resultado

CABECERAS

Podemos definir cabeceras a las tablas utilizando la etiqueta <th></th>. Las celdas definidas cómo cabeceras, salen por defecto en negrita y centradas, ahora vamos a ver la misma tabla que antes pero con algunas filas definidas cómo cabeceras:

<table border="1">
<tr>
<th rowspan="2">Fila 1 y 2 y, celda 1 agrupadas</th>
<th> Fila 1, 2ª Celda </th>
<th colspan="2"> Fila 1, 3ª Celda </th>

</tr>
<tr>
<td> Fila 2, 2ª Celda</td>
<td> Fila 2, 2ª Celda</td>
<td> Fila 2, 2ª Celda</td>

</tr>
</table>

El resultado

TÍTULOS DE TABLAS

Las tablas pueden llevar asociado un título, algo así cómo un “pie de foto”. Se define con la etiqueta <caption></caption>

<table border="1">
<caption>Titular de la tabla</caption>
<tr>
<td>Fila 1, 1ª Celda</td>
<td>Fila 1, 2ª Celda</td>
</tr>
<tr>
<td> Fila 2, 1ª Celda </td>
<td> Fila 2, 2ª Celda</td>
</tr>
</table>
El resultado

CONTENIDOS DE LAS TABLAS

Hasta ahora sólo hemos puesto texto dentro de las tablas, pero podemos poner cualquier cosa que vaya dentro de un documento html: enlaces, imágenes…

Veamos una tabla con texto, imágenes y enlaces:

<table border="1">
<caption>Pimienta</caption>
<tr>
<th rowspan="2">Nuestra amiga pimienta</th>
<th> Imagen</th>
<th colspan="2"> Enlaces</th>
</tr>

<tr>
<td>
<img src=”vampiro.gif” width=”54″ height=”80″ alt=”nuestra amiga pimienta”>
</td>

<td>
<a href=”http://www.tomatoma.ws/foros/profile.php?mode=viewprofile&u=3″>Todo sobre pimienta</a>
</td>

<td>
<a href=”http://www.tomatoma.ws/foros/viewtopic.php?t=491″>Un artículo suyo</a>
</td>

</tr>
</table>
El resultado

TABLAS ANIDADAS

Dentro de una celda podemos situar otra tabla:

<html lang="es">
<head>
<title>Tabla básica</title>
</head>
<body>
<h1>Celdas de fila agrupadas</h1>
<table border="1">
<tr>
<td>
<table border="5">
<tr>
<td>SubFila 1, 1ª Celda</td>
<td>SubFila 1, 2ª Celda</td>
</tr>
<tr>
<td> FSubFila 2, 1ª Celda </td>
<td> SubFila 2, 2ª Celda</td>
</tr>
</table>

</td>
<td>Fila 1, 2ª Celda</td>
</tr>
<tr>
<td> Fila 2, 1ª Celda </td>
<td> Fila 2, 2ª Celda</td>
</tr>
</table>

</body>
</html>

El resultado

ASPECTOS VISUALES DE LAS TABLAS

En XHTML los aspectos visuales de las tablas deben definirse con hojas de estilo, la razón es muy simple: si lo hacemos con html cada vez que queramos cambiar algo tendremos que hacerlo documento a documento. En una web de tipo personal con 5 o 6 documentos, la situación es manejable, pero imaginaros una web de un periódico por ejemplo, con miles de páginas ¿De verdad alguien sería capaz de cambiar miles de páginas sólo porque quiere alinear una celda a la derecha en vez de a la izquierda?

Posicionamiento de los contenidos dentro de las tablas

Por defecto, los contenidos de las celdas están alineados a la izquierda, pero podemos cambiarlo utilizando el atributo ALIGN.

Para centrar el contenido de una celda: align=”center”
Para alinear a la derecha: align=”right”
Para alinear a la izquierda: align=”left”

Este atributo align se lo podemos aplicar tanto a la tabla , para centrar la tabla entera, como a las celdas en sí para centrar su contenido.

<table border="1" align="center">
<caption>Alineando el contenido</caption>
<tr>
<td align="center">alineado a la izquierda</td>
<td align="center">Contenido centrado</td>
<td align="center">Alineado a la derecha</td>

</tr>

<tr>
<td align=”left”>Izquierda</td>
<td align=”center”>Centro</td>
<td align=”right”>derecha</td>

</tr>
</table>
El resultado

Para el posicionamiento vertical dentro de las tablas, se utiliza el atributo VALIGN. Por defecto el contenido se posiciona al centro. Vamos a ver cómo se cambia:

Para alinear arriba: valign=”top”
Para alinear abajo: valign=”bottom”
Para alinear al centro: valign=”middle”

<table border="1">
<caption>Alineando el contenido</caption>
<tr>
<td align="center"><img src="vampiro.gif"></td>
<td valign="top">Arriba</td>
<td valign="bottom">abajo</td>
</tr>
</table>
El resultado

Espacio entre celdas

Podemos controlar el espacio entre las celdas con el atributo cellspacing.

<html lang="es">
<head>
<title>Tabla básica</title>
</head>
<body>
<h1>Celdas de fila agrupadas</h1>
<table border="1" cellspacing="20">
<tr>
<td>Fila 1, 1ª Celda</td>
<td>Fila 1, 2ª Celda</td>
</tr>
<tr>
<td> Fila 2, 1ª Celda </td>
<td> Fila 2, 2ª Celda</td>
</tr>
</table>
</body>
</html>

El resultado

Espacio alrededor del contenido de la celda

Podemos controlar el espacio entre el contenido de la celda y el borde con la etiqueta cellpading

<html lang="es">
<head>
<title>Tabla básica</title>
</head>
<body>
<h1>Celdas de fila agrupadas</h1>
<table border="1" cellpadding="20">
<tr>
<td>Fila 1, 1ª Celda</td>
<td>Fila 1, 2ª Celda</td>
</tr>
<tr>
<td> Fila 2, 1ª Celda </td>
<td> Fila 2, 2ª Celda</td>
</tr>
</table>
</body>
</html>

El resultado

Cambiando el tamaño de las tablas

En el tamaño de las tablas, sólo podemos controlar el ancho. Antes también se podía controlar el alto, pero ha sido rigurosamente prohibido y muchas veces ni siquiera es posible hacerlo funcionar. Por lo que ahora, el alto de las tablas depende del contenido que pongamos en ellas.
Sólo vamos a ver el ancho. Para definir el ancho de una tabla, utilizamos el atributo width. Podemos definir el ancho de una tabla tanto en píxeles como en tantos por ciento. Si lo hacemos con píxeles estaremos definiendo tablas inamovibles, si lo definimos de forma relativa, estamos definiendo tablas relativas que se amoldan al tamaño de la ventana.

Tabla con el tamaño definido en pixeles:

<table border="1" width="350">
<caption> Tamaño de tabla en píxeles</caption>
<tr>
<td align="center"><img src="vampiro.gif"></td>
<td valign="top">Arriba</td>
<td valign="bottom">abajo</td>

</tr>
</table>
El resultado

Tabla con el tamaño definido en tantos por ciento:

<table border="1" width="90%">
<caption>Tamaño de tabla en %</caption>
<tr>
<td align="center"><img src="vampiro.gif"></td>
<td valign="top">Arriba</td>
<td valign="bottom">abajo</td>
</tr>
</table>
El resultado

Para comprobar la diferencia real entre una y otra tabla cambia el tamaño de la ventana empequeñeciéndola, verás cómo en el primer caso, el tamaño de la tabla permanece inalterable y te sale una barra de scroll horizontal. En el segundo, en cambio, el tamaño de la tabla cambia y se ajusta al tamaño de la ventana.

EL ATRIBUTO SUMMARY

El atributo summary es fundamental para todas aquellas personas que acceden a nuestros contenidos con navegadores especiales. Summary significa resumen y exactamente eso: un resumen del contenido de la tabla. Los navegadores especiales, por ejemplo de voz, acceden al contenido de las tablas celda por celda, consecutivamente. Si les proporcionamos al principio de la tabla un pequeño resumen del contenido sabrán si les interesa o no sin tener que leer celda por celda.

<table summary="lista de enlaces interesantes sobre la gripe">
<tr>
<td>enlace 1</td>
<td>http://enlacegripe1</td>
</tr>
<tr>
<td>enlace 2</td>
<td>http://enlacegripe2</td>
</tr>
<tr>
<td>enlace 3</td>
<td>http://enlacegripe3</td>
</tr>
<tr>
<td>enlace 4</td>
<td>http://enlacegripe4</td>
</tr>
<table>

Para ampliar este el tema de las tablas con características avanzadas de accesibilidad, recomendamos este artículo de HTMLsource.

Tema 8 -  Indice -  Tema 10