Tablas: Estructura

Para definir una tabla deberán utilizarse y combinarse 3 etiquetas: <table>, <tr> (table row) y <td> (table data cell).

Como recomendación , es aconsejable analizar en primer lugar las filas de que estará compuesta y a continuación las columnas. El motivo es que HTML procesa primero las filas y por eso las etiquetas <tr> aparecen antes que las etiquetas <td>.

El tag <table>

La etiqueta <table> define una tabla. En conjunto con las otras dos etiquetas (<tr> y <td>) determinaránn el número de celdas en sus filas y/o columnas.

Los tags <tr> y <td>

Esta etiqueta definirá una fila dentro de la tabla. Además, deberá contener al tag <td>, cuya función será la de definir una celda dentro de la fila.

<td> se emplea para definir cada una de las celdas que forman las filas de una tabla.

<tr> se emplea para definir cada fila de las tablas de datos.

En el caso que se quisiera crear una tabla de 3 filas y 4 columnas, visualmente quedaría de la siguiente forma.

El código correcto quedaría de la siguiente manera (una correcta indentación del código permitirá una lectura cómoda y rápida):

<table> <tr> <td> Datos Fila 1 Columna 1 </td> <td> Datos Fila 1 Columna 2 </td> <td> Datos Fila 1 Columna 3 </td> <td> Datos Fila 1 Columna 4 </td> </tr> <tr> <td> Datos Fila 2 Columna 1 </td> <td> Datos Fila 2 Columna 2 </td> <td> Datos Fila 2 Columna 3 </td> <td> Datos Fila 2 Columna 4 </td> </tr> <tr> <td> Datos Fila 3 Columna 1 </td> <td> Datos Fila 3 Columna 2 </td> <td> Datos Fila 3 Columna 3 </td> <td> Datos Fila 3 Columna 4 </td> </tr> </table>

Ejemplo

Imagínese una tabla que registre una serie de productos con sus precios unitarios. Un posible ejemplo sería el que se muestra a continuación:

Producto Cantidad Precio / unidad
Bermudas 26 u. 25 euros
Camisas 10 u. 20 euros
Chanclas 15 u. 10 euros

El código HTML debería ser el siguiente:

<table> <tr> <td> Producto </td> <td> Cantidad </td> <td> Precio / unidad </td> </tr> <tr> <td> Bermudas </td> <td> 26 u. </td> <td> 25 euros </td> </tr> <tr> <td> Camisas </td> <td> 10 u. </td> <td> 20 euros </td> </tr> <tr> <td> Chanclas </td> <td> 15 u. </td> <td> 10 euros </td> </tr> </table>