Las tablas permiten representar cualquier elemento de nuestra página (texto, imagenes, etc) en diferentes filas y columnas separadas entre si. Es una herramienta muy útil para "ordenar" los contenidos de la web.

5.1 El Tag <table>

La tabla se define mediante el tag <table>,</table>. Por ahora sólo diré eso, lo que va dentro lo explicaré un poco más adelante. Un ejemplo de una tabla típica es la siguiente:

Como se habrán dado cuenta no es la primera vez que están ante una tabla, ya que las he ocupado por todo el manual (ni se imaginan como). Esta tabla tiene 3 filas y 3 columnas, pero esta tabla está vacia, dentro de cada celda se puede poner texto, imágenes, otras tablas, etcétera.

5.2 Atributos de el Tag <table>

Por ejemplo los atributos de esta tabla son: width="95%" border="1" cellspading="2" cellspacing="0"

5.3 Otros Tags de la Tabla <tr>,<td>,<th>

Una tabla se define según sus filas y columnas. Para definir una fila se usa el tag <tr>,</tr>. Para definir las columnas que componen la tabla se utilizan los tags <td> o <th>. <td> indica una celda normal, y <th> indica una celda de "cabecera", es decir, el contenido será centrado, resaltado en negritas y en un tamaño ligeramente superior al normal. Ambos tags soportan los mismos atributos.

5.4 Atributos de el Tag <tr> y <td>

Los tags <td> y <th> son cerradas según el estandar de HTML, es decir que un elemento de tabla <td> deberia cerrarse con un </td> , sin embargo los navegadores asumen que un elemento de la tabla, queda automaticamente "cerrado" cuando se "abre" el siguiente, aún así, es recomendable cerrarlo.

5.5 Creando una Tabla, Paso a Paso

Ahora viene la parte difícil de las tablas, así que atención. El patrón general para crear una tabla es el siguiente:

• Se declara la tabla con el tag <table>
• Se indica que comienza una fila con el tag <tr>
• Se declara la primera celda con el tag <td>..</td> o <th>..</th>
• Todo lo que se quiera poner en una celda se escribe entre <td>y</td>
• Se siguen declarando las celdas siguientes con <td>..</td>, todas las celdas siempre en la misma fila.
• Para indicar que no se van a poner más celdas en esa fila, se cierra la fila con </tr>
• Se inicia una nueva fila con <tr> y se repite todo de nuevo hasta que no se quiera poner más filas
• Se cierra la última fila con </tr>
• Se cierra la tabla con </table>

Nótese que cuando se declara la primera celda también se declara la primera columna. Veamos algunos ejemplos m�s. Recuerda que lo que va entre <!-- y --> son comentarios.

Este es el ejemplo de arriba pero ya hecho.

5.6 Usando Rowspan y Colspan

Estos atributos sirven para hacer que 2 o más celdas se combinen en una sola. Toma el código y la tabla anterior como referencia y ve algunos ejemplos

5.6.1 Combinando T11 y T21

Para ello basta tomar la línea 3 del código original y cambiarla por <td rowspan="2">. También se debe eliminar la línea 8, ya que ahora en la segunda fila sólo habrán 2 celdas. Ve el código completo.

Este es el resultado:

5.6.2 T12 y T13 hacen la fusión!

Ahora toma la línea 4 del código original y cambialo por <td colspan="2">T12</td> y por supuesto eliminar la línea 5. Lo que resulta:

Este es el resultado:

5.7 Ejemplos

A continuación mostraré un ejemplo de una tabla que contiene sólo texto.

Se vería como

Sencillo, �no? con tablas se pueden hacer una infinidad de cosas y con estilo. Por cierto, les recomiendo que le dedíquen un poco más de tiempo. Ahora otro ejemplo donde inserté una imágen en una tabla dentro de otra:

*En esta parte se hizo que la celda ocupara 3 filas (con rowspan) y se insertó una imagen en ella.

Si no hubiera insertado la imagen, ni escrito algo, verías esto:

Si le inserto la imagen y el texto:

POKÉMON
Nombre: Moltres Número: 146 Tipo: Fuego/Volador

Ahora si a la tabla de adentro le doy border=0, el efecto es mucho mejor:

POKÉMON
Nombre: Moltres Número: 146 Tipo: Fuego/Volador