Ejercicio fácil de creación de tablas html. Incluye solución

Las tablas son un recurso html muy práctico.

Aunque ya no son tan populares como lo fueron hace algunos años, ahora su uso ha quedado relegado mayormente a la representación de datos.

En este ejercicio se plantea un casó típico y práctico.

• Puedes repasar la teoría necesaria en esta publicación.
• Encontrarás también otro ejercicio sobre tablas ligeramente distinto aquí.

¡Entremos en materia!

Dado el siguiente documento html se desea conseguir el resultado de la imagen adjunta.

Fijaros que el enunciado adjunto un poco de código css para que el resultado sea el de la imagen.

Este código no debe preocuparte ahora.

¡Te invito a leer el tutorial css de mi web más adelante!

Se adjunta a continuación una posible solución:

<table>
	<caption>Este es el caption de la tabla</caption>
	<thead>
		<tr>
			<th>Ciudad</th>
			<th>Aeropuerto</th>
			<th>Playa</th>
			<th>Habitantes</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Reus</td>
			<td>Si</td>
			<td>No</td>
			<td>100000</td>
		</tr>
		<tr>
			<td>Tarragona</td>
			<td>No</td>
			<td>Si</td>
			<td>130000</td>
		</tr>
		<tr>
			<td>Madrid</td>
			<td>Si</td>
			<td>No</td>
			<td>3100000</td>
		</tr>
		<tr>
			<td>Barcelona</td>
			<td>Si</td>
			<td>Si</td>
			<td>1600000</td>
		</tr>
	</tbody>
</table>

Si juntamos todas las piezas resolvemos el ejercicio.

Como curiosidad fijaros que si invertís el orden y escribís primero el <tbody> y luego el <thead> el resultado final es el mismo. El navegador entiende estas etiquetas y como debe ordenarlas.

¡Hola!

Querido lector,

Deseo que te haya sido de utilidad.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!