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

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

Print Friendly, PDF & Email
Valora esta entrada

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.

¡Entremos en materia!

Enunciado

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

<!DOCTYPE html>
<html>
<head>
	<title>Ejercicio tablas html</title>
	<meta charset="utf-8"/>
	<meta name="author" content="francesc ricart"/>
	<style>
		table{
			border-collapse:collapse;
			caption-side: bottom;
		}
		caption{
			font-weight:bold;
			margin-top:16px;
		}
		th,td{padding:5px 10px;}
		td,th{border:1px solid #1c1c1c;text-align:center;}

	</style>
</head>
<body>

<!-- puedes copiar y pegar todo el código en sublime o brackets para resolver el ejercicio -->

</body>
</html>
Enunciado ejercicio fácil sobre tablas
Enunciado ejercicio fácil sobre tablas

Solución del ejercicio

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!

Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.