13 Abr 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!
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>
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!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Ejercicio html para practicar las etiquetas html de texto. Tanto las más típicas como otras menos usadas igualmente importantes. Incluye solución.
Las meta etiquetas son un tipo de tags que se escriben en la cabecera de un documento web que aportan información técnica a los motores de búsqueda sobre como deben leer nuestro sitio web. Vemos los t...
Cuando nos iniciamos todos solemos cometer errores parecidos. En esta entrada encontrarás un buen repositorio de casos reales en alumnos.
Tratamos las etiquetas que permiten preformatear el texto de un documento web. Como se escriben, para que sirven y sus peculiaridades con un ejemplo práctico. Veréis el código html y el resultado por ...
Resumen con ejemplos de como acceder de forma relativa y con enlaces a los distintos archivos de un proyecto web dado un html referencia.
Ejercicio html dónde se práctica como anidar correctamente una lista no ordenada. Esta lista simula un futuro menú de navegación. Incluye solución.
No hay comentarios