Tablas en HTML

Las tablas están incluidas en HTML desde sus primeras versiones y son una forma común de presentar datos claramente. Además, si lo construimos de forma semántica y correctamente, es muy simple darle estilos desde CSS y cambiar el diseño.

Una tabla puede ser sencilla o compleja, dependiento de nuestro objetivo y la cantidad de atributos a utilizar. Primero veamos las etiquetas básicas para crear una tabla de la forma más sencilla posible:

Crear tablas con HTML es algo más largo ya que comprende el uso de varias etiquetas pero es muy sencillo entender su estructura, todo parte indicando la etiqueta table:

<table>
	...
</table>

Después debemos delimitar la zona para la cabecera de la tabla usando thead:

<table>
	<thead>
		...
	</thead>
</table>

De manera que ahora podamos definir nuestras cabeceras de la tabla con la etiquetath:

<table>
	<thead>
		<th>Columna 1</th>
		<th>Columna 2</th>
		<th>Columna 3</th>
	</thead>
</table>

Teniendo las cabeceras, seguimos construyendo la tabla ahora nuestro objetivo es el cuerpo de la tabla que podemos definirlo con tbody:

<table>
	<thead>
		<th>Columna 1</th>
		<th>Columna 2</th>
		<th>Columna 3</th>
	</thead>
	<tbody>
		...
	</tbody>
</table>

Ahora tenemos que encargarnos de presentar los datos correctamente, primero tenemos que crear las filas con tr. El siguiente código resalta la definición de 2 filas:

<table>
	<thead>
		<th>Columna 1</th>
		<th>Columna 2</th>
		<th>Columna 3</th>
	</thead>
	<tbody>
		<tr>
			Primera fila
		</tr>

		<tr>
			Segunda fila
		</tr>
	</tbody>
</table>

Por último debemos definir los datos para cada celda de la respectiva fila en la tabla usando la etiqueta td:

<table>
	<thead>
		<th>Columna 1</th>
		<th>Columna 2</th>
		<th>Columna 3</th>
	</thead>
	<tbody>
		<tr>
			<td>Dato 1</td>
			<td>Dato 2</td>
			<td>Dato 3</td>
		</tr>
		<tr>
			<td>Dato 1</td>
			<td>Dato 2</td>
			<td>Dato 3</td>
		</tr>
	</tbody>
</table>