Las tablas son un poderosa herramienta a la hora de mostrar y relacionar cierto tipo de informacin.

Aun cuando muchos sitios son construidos (por su naturaleza) sin usar una simple tabla, existen algunas ocasiones en que el valor de las tablas se vuelve esencial.

Una tabla HTML puede ser considerada, de manera simple, como un grupo de filas donde cada una de ellas contiene un grupo de celdas (y no alrevs). Las tablas, como toda estructura en los documentos HTML, son definidas usando elementos. Entonces, una tabla simple puede ser insertada en un documento HTML usando tres elementos: el elemento HTML table (estructura contenedora principal), el elemento HTML tr (contenedor de fila) y el elemento HTML td (celda). Veamos un ejemplo: <table> <tr> <td>Celda 1</td> <td>Celda 2</td> <td>Celda 3</td> </tr> <tr> <td>Celda 4</td> <td>Celda 5</td> <td>Celda 6</td> </tr> </table>

Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6

Para algunas tablas puedes necesitar unificar dos o ms celdas en una sola que pasar a ocupar el lugar de aquellas afectadas. Estas unificaciones pueden ser llevadas a cabo con los atributos "rowspan" (para unificacin vertical) y "colspan" (para unificacin horizontal), ambos disponibles para celdas (tag HTML td y tag HTML th).
<table> <tr> <td>Campo 1</td> <td>Campo 2</td> <td>Campo 3</td> </tr> <tr> <td colspan="2">Campos 4 y 5</td> <td>Campo 6</td> </tr> <tr>

Campo 1 Campo 2 Campo 3 Campos 4 y 5 Campo 6 Campo 7 Campo 8 Campo 9

<td>Campo 7</td> <td>Campo 8</td> <td>Campo 9</td> </tr> </table>

Mira en el ejemplo anterior cmo una definicin de celda que unifica a dos, es el equivalente a dos definiciones de celdas simples. Esto tambin funciona para uificacin vertical, con una pequea diferencia debido a la naturaleza de las tables en HTML. Cuando se unifican celdas verticalmente, las definiciones de celdas en las filas afectadas por la unificacin deben ser omitidas. Mira el ejemplo, donde los campos 1, 4 y 7 son unificados: Cdigo <table> <tr> <td rowspan="3">Campo unificado</td> <td>Campo 2</td> <td>Campo 3</td> </tr> <tr> <td>Campo 5</td> <td>Campo 6</td> </tr> <tr> <td>Campo 8</td> <td>Campo 9</td> </tr> </table> Vista

Campo 2 Campo 3 Campo unificado Campo 5 Campo 6 Campo 8 Campo 9