Tablas HTML-CSS
Ejercicio para practicar habilidades de HTML y CSS. Tablas adaptables para todos los dispositivos sin framework.
Podés visitar el ejercicio que desarrollaremos aquí ↩
💻 Ver explicación en video de youtube.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>Tablas</title>
</head>
<body>
<header>
<div class="contenido">
<span>Geografía</span>
<h1>Países destacados de <span>África</span></h1>
</div>
</header>
<main>
<section id="tarjeta1">
<div class="encabezado">
<div class="">
<h2>Comparación Internacional</h2>
<p>Según PBI y su influencia demográfica y regional en el continente.</p>
</div>
<span>2026</span>
</div>
<div class="latabla">
<!-- Comienza la tabla -->
<table>
<thead>
<tr>
<th>#</th>
<th>País</th>
<th>Capital</th>
<th>Tipo de Gobierno</th>
<th>Población</th>
<th>Principales Actividades</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="#">01</td>
<td data-label="País">
<div class="pais">
<img src="https://flagcdn.com/w80/ng.png" alt="Bandera Nigeria">
<strong>Nigeria</strong>
</div>
</td>
<td data-label="Capital">Abuya</td>
<td data-label="Tipo de gobierno">República Federal Presidencialista</td>
<td data-label="Población">~223 M</td>
<td data-label="Actividades">
Petróleo, agricultura, servicios, telecomunicaciones.
</td>
</tr>
<tr>
<td data-label="#">02</td>
<td data-label="País">
<div class="pais">
<img src="https://flagcdn.com/w80/eg.png" alt="Bandera Egipto">
<strong>Egipto</strong>
</div>
</td>
<td data-label="Capital">El Cairo</td>
<td data-label="Tipo de gobierno">República Semipresidencialista</td>
<td data-label="Población">~112 M</td>
<td data-label="Actividades">
Turismo, Canal de Suez, agricultura, gas natural.
</td>
</tr>
<tr>
<td data-label="#">03</td>
<td data-label="País">
<div class="pais">
<img src="https://flagcdn.com/w80/za.png" alt="Bandera Sudáfrica">
<strong>Sudáfrica</strong>
</div>
</td>
<td data-label="Capital">Pretoria / Ciudad del Cabo / Bloemfontein</td>
<td data-label="Tipo de gobierno">República Parlamentaria</td>
<td data-label="Población">~60 M</td>
<td data-label="Actividades">
Minería(oro, platino), finanzas, turismo, manufactura.
</td>
</tr>
<tr>
<td data-label="#">04</td>
<td data-label="País">
<div class="pais">
<img src="https://flagcdn.com/w80/et.png" alt="Bandera Etiopía">
<strong>Etiopía</strong>
</div>
</td>
<td data-label="Capital">Adís Abeba</td>
<td data-label="Tipo de gobierno">República Federal Parlamentaria</td>
<td data-label="Población">~126 M</td>
<td data-label="Actividades">
Agricultura (café), ganadería, construcción, floricultura.
</td>
</tr>
<tr>
<td data-label="#">05</td>
<td data-label="País">
<div class="pais">
<img src="https://flagcdn.com/w80/ke.png" alt="Bandera Kenia">
<strong>Kenia</strong>
</div>
</td>
<td data-label="Capital">Nairobi</td>
<td data-label="Tipo de gobierno">República Presidencialista</td>
<td data-label="Población">~55 M</td>
<td data-label="Actividades">
Turismo (safaris), agricultura (té, flores), tecnología.
</td>
</tr>
<tr>
<td data-label="#">06</td>
<td data-label="País">
<div class="pais">
<img src="https://flagcdn.com/w80/ma.png" alt="Bandera Marruecos">
<strong>Marruecos</strong>
</div>
</td>
<td data-label="Capital">Rabat</td>
<td data-label="Tipo de gobierno">Monarquía Constitucional</td>
<td data-label="Población">~37 M</td>
<td data-label="Actividades">
Turismo, minería (fosfatos), agricultura, automoción.
</td>
</tr>
<tr>
<td data-label="#">07</td>
<td data-label="País">
<div class="pais">
<img src="https://flagcdn.com/w80/dz.png" alt="Bandera Argelia">
<strong>Argelia</strong>
</div>
</td>
<td data-label="Capital">Argel</td>
<td data-label="Tipo de gobierno">República Semipresidencialista</td>
<td data-label="Población">~45 M</td>
<td data-label="Actividades">
Petróleo, gas natural, minería, agricultura.
</td>
</tr>
<tr>
<td data-label="#">08</td>
<td data-label="País">
<div class="pais">
<img src="https://flagcdn.com/w80/gh.png" alt="Bandera Gana">
<strong>Gana</strong>
</div>
</td>
<td data-label="Capital">Acra</td>
<td data-label="Tipo de gobierno">República Presidencialista</td>
<td data-label="Población">~34 M</td>
<td data-label="Actividades">
Exportación de cacao, minería de oro, petróleo, servicios.
</td>
</tr>
<tr>
<td data-label="#">09</td>
<td data-label="País">
<div class="pais">
<img src="https://flagcdn.com/w80/ao.png" alt="Bandera Angola">
<strong>Angola</strong>
</div>
</td>
<td data-label="Capital">Luanda</td>
<td data-label="Tipo de gobierno">República Presidencialista</td>
<td data-label="Población">~36 M</td>
<td data-label="Actividades">
Extracción de petróleo, diamantes, agricultura, construcción.
</td>
</tr>
<tr>
<td data-label="#">10</td>
<td data-label="País">
<div class="pais">
<img src="https://flagcdn.com/w80/tz.png" alt="Bandera Tanzania">
<strong>Tanzania</strong>
</div>
</td>
<td data-label="Capital">Dodoma</td>
<td data-label="Tipo de gobierno">República Presidencialista</td>
<td data-label="Población">~65 M</td>
<td data-label="Actividades">
Turismo (Kilimanjaro, Zanzíbar), agricultura, minería (oro).
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section id="nota">
<strong>Importante</strong>
<p>
El PBI per cápita es un promedio estadístico que no representa
directamente el salario de los habitantes ni la distribución de
la riqueza dentro de un país.
</p>
</section>
<div id="divisor"></div>
<section id="tarjeta2">
<h1>Tabla simple</h1>
<table border="1">
<caption>Países destacados de África</caption>
<thead>
<tr>
<th>#</th>
<th>País</th>
<th>Capital</th>
<th>Población</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Nigeria</td>
<td>Abuya</td>
<td>223M</td>
</tr>
<tr>
<td>02</td>
<td>Egipto</td>
<td>El Cairo</td>
<td>112M</td>
</tr>
<tr>
<td>03</td>
<td>Sudáfrica</td>
<td>Pretoria / El Cabo / Bloemfontein</td>
<td>60M</td>
</tr>
<tr>
<td>04</td>
<td>Etiopía</td>
<td>Adís Abeba</td>
<td>126M</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer>
<p>Creado por <strong>caterinaweb.net</strong></p>
</footer>
</body>
</html>CSS
/* Los colores pueden ser cualquiera, en este caso los eligió una diseñadora gráafica. Carecen de importancia en el ejercicio. */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: "Poppins", sans-serif;
line-height: 1.5;
}
header{
/* Al no poner un color liso, le da otro aspecto al diseño */
background: linear-gradient(135deg, #111827,#1e293b);
color: white;
padding: 2rem;
}
header .contenido{
/* lo limitamos para pantallas muy grandes */
width: min(1200px, 100%);
/* lo centramos */
margin: auto;
}
/* Para que solo afecte al hijo directo y no a todos los span en su interior */
header .contenido > span{
padding: 6px 12px;
border: 1px solid rgba(255,255,255,0.2);
/* Al poner un valor gigante, hace el efecto de cápsula. */
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
color: #67e8f9;
background: rgba(255,255,255,0.06);
}
header .contenido h1{
/* Limita el tamaño en pantallas grandes y hace que baje. */
max-width: 800px;
margin-top: 20px;
/* Empieza con un valor base del 5% del tamaño de la pantalla del dispositivo, se agranda hasta un máximo de 4.5rem o se achica hasta un mínimo de 2.2rem */
/* 1 rem = 16px (si el usuario no lo cambió en su computadora */
font-size: clamp(2.2rem, 5vw, 4.5rem);
line-height: 1.05;
/* Las letras se juntan en un 0.05% de su tamaño inicial */
letter-spacing: -0.05em;
}
header .contenido h1 > span{
color:#22d3ee;
}
main{
/* Cuando ocupa menos de 1200px, al 100% le dejamos un margen interior */
width: min(1200px, calc(100% - 40px));
/* Arriba y abajo deja 50px, en los laterales lo centra. */
margin:50px auto;
}
main section#tarjeta1{
background: white;
border: 1px solid #e2e8f0;
border-radius: 20px;
box-shadow: 0 20px 50px rgba(15,23,42,0.07);
overflow: hidden;
}
main section#tarjeta1 .encabezado{
display: flex;
justify-content: space-between;
align-items: center;
gap:20px;
padding: 28px 30px;
border-bottom: 1px solid #e2e8f0;
}
main section#tarjeta1 .encabezado h2{
font-size: 1.4rem;
}
main section#tarjeta1 .encabezado p{
font-size: 0.9rem;
color: #64748b;
margin-top: 5px;
}
main section#tarjeta1 .encabezado > span{
padding: 8px 14px;
border-radius: 999px;
background-color: #ecfeff;
color: #0891b2;
font-weight: 700;
}
main section#tarjeta1 .latabla{
overflow-x: hidden;
}
/* Comienza la tabla */
main section#tarjeta1 table{
width: 100%;
border-collapse: collapse;
min-width: 950px;
}
main section#tarjeta1 thead{
background: #f8fafc;
}
main section#tarjeta1 thead th{
/* Es lo que le da tamaño a las celdas */
padding: 16px 18px;
text-align: left;
color: #64748b;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
}
main section#tarjeta1 tbody td{
padding: 20px 18px;
border-top: 1px solid #eef2f7 ;
vertical-align: middle;
font-size: 0.92rem;
}
main section#tarjeta1 tbody tr{
transition: background 0.2s ease, transform 0.2s ease;
}
main section#tarjeta1 tbody tr:hover{
background: #f8fafc;
cursor: default;
}
main section#tarjeta1 tbody .pais{
display: flex;
align-items: center;
gap:12px;
min-width: 150px;
}
main section#tarjeta1 tbody .pais strong{
white-space: nowrap;
font-size: 1.1rem;
}
main section#tarjeta1 tbody .pais img{
width: 30px;
height: 20px;
object-fit: cover;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
display: block;
}
footer{
padding: 35px 20px;
text-align: center;
color: #94a3b8;
font-family: 0.85rem;
}
main section#nota{
margin-top: 25px;
padding: 22px;
border-left: 4px solid #0891b2;
border-radius: 10px;
background: white;
border-top: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
}
main section#nota strong{
display: block;
margin-bottom: 5px;
}
main section#nota p{
color: #64748b;
font-size: 0.9rem;
}
/* Parte adicional no filmada */
#divisor{
width: 100%;
height: 2rem;
background: linear-gradient(135deg,#111827,#1e293b);
margin: 6rem 0 2rem;
}
section#tarjeta2{
width: min(1200px, calc(100% - 40px));
padding: 5rem ;
margin: 2rem auto;
}
section#tarjeta2 h1{
margin-bottom:3rem;
width: 100%;
text-align: left;
}
section#tarjeta2 table{
border-collapse:collapse;
overflow: hidden;
border-radius: 0.3rem;
width: 100%;
}
section#tarjeta2 table caption{
font-size: 1.3rem;
margin-bottom: 20px;
font-weight: 700;
}
section#tarjeta2 th, section#tarjeta2 td{
padding: 10px 15px;
}
section#tarjeta2 thead{
background-color: black;
color: white;
}
section#tarjeta2 tr:nth-child(even){
background-color: #e2e8f0;
}
section#tarjeta2 tbody tr:hover{
background-color: #64748b;
color: #f3f3f3;
cursor: default;
}
section#tarjeta2 tbody td:nth-child(4), section#tarjeta2 tbody td:nth-child(1){
text-align: center;
}
/* Celulares */
@media (max-width:1000px) {
header{
padding: 1rem;
}
main{
width: min(100% - 24px, 600px);
margin: 30px auto;
}
main section#tarjeta1{
border-radius: 16px;
}
main section#tarjeta1 .encabezado{
padding: 22px;
align-items: flex-start;
flex-direction: column;
}
main section#tarjeta1 .latabla{
overflow: visible;
}
/* Comienzan los cambios en la tabla */
main section#tarjeta1 table{
min-width: 0;
}
main section#tarjeta1 thead{
display: none;
}
/* transformamos la tabla en tarjetas */
main section#tarjeta1 tbody, main section#tarjeta1 tr, main section#tarjeta1 td{
display: block;
width: 100%;
}
main section#tarjeta1 tr{
margin: 0;
padding: 20px;
}
main section#tarjeta1 tr:not(:last-child){
border-bottom: 1px solid #e2e8f0;
}
main section#tarjeta1 tbody td{
display: flex;
justify-content: space-between;
align-items: center;
border: none;
text-align: right;
font-size: 0.9rem;
}
/* Antes de renderizar el dato, renderizar esto */
main section#tarjeta1 tbody td::before{
content: attr(data-label);
color: #64748b;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
text-align: left;
}
main section#tarjeta1 tbody td:first-child{
display: none;
}
main section#tarjeta1 tbody td:nth-child(2):before{
display: none;
}
main section#tarjeta1 tbody td:nth-child(2){
display: block;
padding-bottom: 15px;
margin-bottom: 5px;
border-bottom: 1px solid #f1f5f9;
text-align: left;
}
main section#tarjeta1 tbody td:nth-child(3){
padding-top: 14px;
}
main section#tarjeta1 tbody tr:hover{
background-color: white;
}
section#tarjeta2 table {
padding: 2rem;
display: block;
border: none;
overflow-x: auto;
white-space: nowrap;
}
section#tarjeta2{
padding: 1rem ;
margin: 1rem auto;
}
section#tarjeta2 h1{
font-size: 1.4rem;
margin-bottom:1rem;
}
}
/* celulares pequeños */
@media (max-width:420px) {
header h1{
font-size: 2.4rem;
}
main{
width: calc(100% - 16px);
}
main section#tarjeta1 .encabezado{
padding: 18px;
}
main section#tarjeta1 tbody tr{
padding: 17px;
}
main section#tarjeta1 tbody td{
font-size: 0.85rem;
}
}Recursos
Íconos y fuentes: https://fonts.google.com