Tutorial:XHTML

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:

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>