18-tabla--html

 



Aquí tienes el código completo con documentación exhaustiva línea por línea en el CSS, más una explicación detallada de cómo funciona y una guía de aprendizaje y memorización.

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">                               /* Define la codificación UTF-8 para soportar caracteres especiales */
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> /* Hace la página responsive en dispositivos móviles */
    <title>Card con Tabla - Explicada</title>            /* Título que aparece en la pestaña del navegador */
    
    <style>
        /* ============================================================ */
        /* DOCUMENTACIÓN COMPLETA - CADA LÍNEA DE CSS EXPLICADA        */
        /* ============================================================ */
        
        /* ========== ESTILOS GLOBALES DEL CUERPO ========== */
        body {
            margin: 0;                          /* Elimina el margen exterior por defecto que el navegador aplica (normalmente 8px) */
            padding: 0;                         /* Elimina el relleno interior por defecto del body */
            background: #ddd;                   /* Color de fondo gris claro (gris medio) para toda la página */
            font-family: Arial, sans-serif;     /* Define la fuente principal como Arial, y si no está disponible, cualquier sans-serif */
        }

        /* ========== MENÚ DE NAVEGACIÓN (BARRA HORIZONTAL) ========== */
        ul {
            list-style-type: none;              /* Elimina los puntos o viñetas que aparecen por defecto en las listas `<ul>` */
            margin: 0;                          /* Quita el margen exterior por defecto que tienen las listas */
            padding: 0;                         /* Quita el relleno interior por defecto de las listas */
            background-color: #333333;          /* Color de fondo gris oscuro para la barra de menú */
            
            /* === FLEXBOX PARA MENÚ HORIZONTAL === */
            display: flex;                      /* Activa Flexbox en el contenedor `ul` */
                                                /* Esto hace que los elementos `<li>` se coloquen en HORIZONTAL (en fila) */
                                                /* Por defecto, Flexbox organiza los elementos en una sola línea horizontal */
        }

        /* Estilos para los enlaces dentro de cada elemento del menú */
        ul li a {
            display: block;                     /* Convierte el enlace en un elemento de bloque */
                                                /* Esto hace que TODO el área del enlace sea clickeable, no solo el texto */
            color: white;                       /* Color blanco para el texto del menú */
            text-align: center;                 /* Centra el texto horizontalmente dentro del enlace */
            padding: 14px 16px;                 /* Relleno interno: 14px arriba/abajo, 16px izquierda/derecha */
            text-decoration: none;              /* Elimina el subrayado predeterminado que tienen los enlaces */
        }

        /* Efecto visual cuando el usuario pasa el mouse sobre un enlace del menú */
        ul li a:hover {
            background-color: #111111;          /* Cambia el fondo a un gris casi negro para dar feedback visual */
        }

        /* ========== CONTENEDOR DE LA CARD (CENTRA LA TARJETA) ========== */
        .contenedor-card {
            /* === FLEXBOX PARA CENTRAR LA CARD === */
            display: flex;                      /* Activa Flexbox en este contenedor */
            justify-content: center;            /* Centra el elemento hijo (.card) HORIZONTALMENTE dentro del contenedor */
            
            /* EXPLICACIÓN: Como .contenedor-card tiene un SOLO hijo (.card), 
               justify-content: center lo empuja justo al medio horizontal */
            
            padding: 30px 20px;                 /* Espacio alrededor de la tarjeta: 30px arriba/abajo, 20px izquierda/derecha */
        }

        /* ========== LA TARJETA (CARD) PRINCIPAL ========== */
        .card {
            /* === PARTE 1: ESTILOS VISUALES DE LA TARJETA === */
            background: white;                  /* Fondo blanco para la tarjeta, contrasta con el fondo gris del body */
            width: 450px;                       /* Ancho fijo de 450 píxeles para la tarjeta */
            padding: 25px;                      /* Relleno interno de 25px en todos los lados (separación del borde al contenido) */
            border-radius: 10px;                /* Bordes redondeados de 10px para un diseño moderno y amigable */
            box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Sombra sutil que hace que la tarjeta "flote" sobre el fondo */
                                                /* 0px horizontal, 4px vertical, 12px difuminado, color negro con 15% opacidad */
            
            /* === PARTE 2: ORGANIZACIÓN INTERNA CON CSS GRID === */
            display: grid;                      /* Activa CSS Grid Layout para organizar los elementos internos */
            grid-template-columns: 1fr;         /* Define UNA sola columna que ocupa toda la fracción disponible */
                                                /* "1fr" = 1 fracción = 100% del ancho disponible */
            gap: 20px;                          /* Espacio de 20px entre los elementos hijos directos (h2 y table) */
            
            /* EXPLICACIÓN DE CSS GRID EN ESTA CARD:
               - grid-template-columns: 1fr → los hijos se apilan VERTICALMENTE (uno debajo del otro)
               - gap: 20px → crea una separación consistente entre el título y la tabla
               - Esto es más eficiente que usar margin-bottom manualmente
            */
        }

        /* ========== TÍTULO DENTRO DE LA TARJETA ========== */
        h2 {
            color: #333;                        /* Color gris oscuro para el texto (casi negro pero más suave) */
            margin: 0;                          /* Elimina el margen superior e inferior que los h2 tienen por defecto */
            text-align: center;                 /* Centra el texto horizontalmente dentro del título */
            font-size: 22px;                    /* Tamaño de fuente específico (ligeramente más grande que el texto normal) */
            border-bottom: 2px solid #4CAF50;   /* Línea inferior de 2px de grosor de color verde */
                                                /* Esto crea un efecto de "subrayado decorativo" */
            padding-bottom: 10px;               /* Espacio de 10px entre el texto y la línea inferior */
        }

        /* ========== TABLA DENTRO DE LA TARJETA ========== */
        table {
            width: 100%;                        /* La tabla ocupa el 100% del ancho disponible de la tarjeta (450px - padding) */
            border-collapse: collapse;          /* Elimina los espacios entre celdas y junta los bordes en uno solo */
            border: 1px solid #ddd;             /* Borde gris claro de 1px alrededor de toda la tabla */
        }

        /* Estilos para las celdas de encabezado (th) */
        th {
            background-color: #4CAF50;          /* Fondo verde para los encabezados (mismo color que la línea del título) */
            color: white;                       /* Texto blanco para contraste sobre el fondo verde */
            padding: 12px;                      /* Relleno interno de 12px en todas las direcciones */
            text-align: left;                   /* Alinea el texto a la izquierda dentro del encabezado */
        }

        /* Estilos para las celdas normales (td) */
        td {
            padding: 10px;                      /* Relleno interno de 10px en todas las direcciones */
            border: 1px solid #ddd;             /* Borde gris claro de 1px alrededor de cada celda */
        }

        /* Pseudo-clase :nth-child(even) → selecciona las filas PARES (2da, 4ta, 6ta...) */
        tr:nth-child(even) {
            background-color: #f2f2f2;          /* Fondo gris muy claro para las filas pares (efecto "cebra") */
                                                /* Esto mejora la legibilidad de la tabla */
        }
        /* ============================================================ */
        /* RESUMEN DEL FUNCIONAMIENTO:                                 */
        /* 1. body → fondo gris, sin márgenes                           */
        /* 2. ul con display:flex → menú horizontal                     */
        /* 3. .contenedor-card con display:flex + justify-content:center → centra la tarjeta */
        /* 4. .card con CSS Grid → organiza título y tabla verticalmente */
        /* 5. Tabla con estilos: bordes, colores, filas alternadas      */
        /* ============================================================ */
    </style>
</head>
<body>
    <!-- ===== BARRA DE NAVEGACIÓN ===== -->
    <!-- Menú horizontal creado con lista no ordenada (ul) + Flexbox -->
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>       <!-- Enlace a sección Home -->
            <li><a href="#news">News</a></li>       <!-- Enlace a sección News -->
            <li><a href="#contact">Contact</a></li> <!-- Enlace a sección Contact -->
            <li><a href="#about">About</a></li>     <!-- Enlace a sección About -->
        </ul>
    </nav>

    <!-- ===== CONTENEDOR QUE CENTRA LA TARJETA ===== -->
    <!-- Usa Flexbox para centrar horizontalmente la tarjeta -->
    <div class="contenedor-card">
        
        <!-- ===== TARJETA PRINCIPAL ===== -->
        <!-- Usa CSS Grid para organizar su contenido interno -->
        <div class="card">
            <!-- Título de la tarjeta -->
            <h2>TH elements define table headers</h2>
            
            <!-- Tabla de ejemplo (datos de personas y edades) -->
            <table>
                <!-- Primera fila: ENCABEZADOS (th) -->
                <tr>
                    <th>Person 1</th>   <!-- Encabezado columna 1 -->
                    <th>Person 2</th>   <!-- Encabezado columna 2 -->
                    <th>Person 3</th>   <!-- Encabezado columna 3 -->
                </tr>
                <!-- Segunda fila: NOMBRES -->
                <tr>
                    <td>Emil</td>       <!-- Dato fila 2, columna 1 -->
                    <td>Tobias</td>     <!-- Dato fila 2, columna 2 -->
                    <td>Linus</td>      <!-- Dato fila 2, columna 3 -->
                </tr>
                <!-- Tercera fila: EDADES -->
                <tr>
                    <td>16</td>         <!-- Edad fila 3, columna 1 -->
                    <td>14</td>         <!-- Edad fila 3, columna 2 -->
                    <td>10</td>         <!-- Edad fila 3, columna 3 -->
                </tr>
            </table>
        </div> <!-- Fin de la tarjeta -->
        
    </div> <!-- Fin del contenedor centrador -->
</body>
</html>

📖 EXPLICACIÓN DETALLADA DE CÓMO FUNCIONA

Estructura jerárquica del documento

text
body
├── nav (ul con Flexbox → menú horizontal)
│   ├── li → a (Home)
│   ├── li → a (News)
│   ├── li → a (Contact)
│   └── li → a (About)
│
└── .contenedor-card (Flexbox: centra la tarjeta)
    └── .card (CSS Grid: organiza el contenido interno)
        ├── h2 (título)
        └── table (tabla de datos)

Flujo de ejecución visual

text
┌─────────────────────────────────────────────────────────────┐
│  [Home]  [News]  [Contact]  [About]   ← MENÚ HORIZONTAL     │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│                    ┌─────────────────────┐                  │
│                    │   TH elements       │  ← TÍTULO        │
│                    │   define table      │                  │
│                    │   headers           │                  │
│                    ├─────────────────────┤                  │
│                    │ Person 1 Person 2 Person 3 │            │
│                    │ Emil    Tobias  Linus    │ ← TABLA      │
│                    │ 16      14      10      │              │
│                    └─────────────────────┘                  │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Componentes clave explicados

ComponenteTecnologíaPropósitoCódigo clave
Menú horizontalFlexboxMostrar enlaces en filaul { display: flex; }
Centrado de tarjetaFlexboxCentrar horizontalmente.contenedor-card { display: flex; justify-content: center; }
Organización internaCSS GridApilar título y tabla.card { display: grid; grid-template-columns: 1fr; gap: 20px; }
Tabla legibleCSS avanzadoBordes, colores, filas cebrath { background: #4CAF50; } tr:nth-child(even)

🧠 CÓMO APRENDER Y MEMORIZAR ESTA TÉCNICA

1. Patrones de diseño identificables (3 niveles)

🟢 Nivel 1: Centrado horizontal con Flexbox

css
/* Fórmula mágica para centrar cualquier cosa */
.contenedor {
    display: flex;
    justify-content: center;
}
/* El hijo se centra horizontalmente */

🟡 Nivel 2: Apilado vertical con CSS Grid

css
/* Fórmula para apilar elementos verticalmente con separación */
.tarjeta {
    display: grid;
    grid-template-columns: 1fr;  /* una columna, apila verticalmente */
    gap: 20px;                    /* separación entre elementos */
}

🔴 Nivel 3: Tabla con efecto "cebra" (filas alternadas)

css
/* Fórmula para filas alternadas */
tr:nth-child(even) {
    background-color: #f2f2f2;
}
/* Las filas pares (2,4,6...) tienen fondo gris */

2. Reglas mnemotécnicas

Para recordar Flexbox: "F-C-J"

  • Flex (display: flex)

  • Center (justify-content: center - centrado horizontal)

  • Justify (la propiedad que lo hace)

"F-C-J: Flex Centra Justo"

Para recordar Grid vertical: "U-C-E"

  • Una columna (grid-template-columns: 1fr)

  • Con gap (espacio entre elementos)

  • Empuja verticalmente

"U-C-E: Una Columna con Espacio"

Para recordar tablas bonitas: "C-P-F"

  • Collapse (border-collapse: collapse - junta bordes)

  • Padding (en th y td para respirar)

  • Filas cebra (nth-child(even))

"C-P-F: Collapse, Padding, Filas"

3. Analogías para recordar conceptos

Analogía del menú horizontal

Imagina los enlaces del menú como vagones de un tren.

  • display: flex = los enganches que conectan los vagones

  • Los vagones se colocan uno al lado del otro (horizontal)

  • padding: 14px 16px = el espacio entre asientos dentro de cada vagón

Analogía del centrado con Flexbox

Imagina que tienes una hoja de papel (.contenedor-card) sobre una mesa.

  • display: flex = ambas manos agarran el papel

  • justify-content: center = las manos mueven el papel justo al medio de la mesa

  • El papel (tarjeta) queda perfectamente centrado

Analogía de CSS Grid

Imagina una estantería con un solo estante (grid-template-columns: 1fr)

  • Los elementos (título y tabla) son libros apilados verticalmente

  • gap: 20px = el espacio entre libros para que no estén pegados

Analogía de la tabla cebra

Imagina las filas de la tabla como rayas de una cebra:

  • Fila 1: blanca (sin fondo)

  • Fila 2: gris (con fondo)

  • Fila 3: blanca

  • Fila 4: gris
    Esto hace que sea más fácil seguir la línea horizontal con los ojos

4. Ejercicios prácticos para memorizar

📝 Ejercicio 1 (2 minutos) - Escribe de memoria la estructura mínima

html
<!-- Escribe esto sin mirar -->
<style>
    .centrador { display: flex; justify-content: center; }
    .tarjeta { 
        display: grid; 
        grid-template-columns: 1fr; 
        gap: 20px; 
        background: white; 
        padding: 20px; 
        border-radius: 10px;
    }
</style>
<div class="centrador">
    <div class="tarjeta">
        <h2>Título</h2>
        <p>Contenido</p>
    </div>
</div>

🎯 Ejercicio 2 (5 minutos) - Crea tu propia tabla

Modifica la tabla actual por una de tus hobbies favoritos:

html
<table>
    <tr>
        <th>Hobby</th>
        <th>Horas/semana</th>
        <th>Nivel</th>
    </tr>
    <tr>
        <td>Leer</td>
        <td>10</td>
        <td>Avanzado</td>
    </tr>
    <tr>
        <td>Programar</td>
        <td>20</td>
        <td>Intermedio</td>
    </tr>
</table>

🔄 Ejercicio 3 (10 minutos) - Mejora la tarjeta

Añade estos elementos a la tarjeta:

  1. Un subtítulo después del <h2> pero antes de la tabla

html
<p style="color: #666; text-align: center;">Lista de participantes y edades</p>

  1. Un pie de tarjeta después de la tabla

html
<div style="text-align: center; margin-top: 10px;">
    <small>Datos actualizados: 2024</small>
</div>

5. Errores comunes que debes memorizar para evitarlos

❌ Error✅ SoluciónExplicación
justify-content en el hijo equivocadoVa en el PADRE flexjustify-content centra a los HIJOS, no al elemento mismo
Olvidar border-collapse: collapse en tablasAñadirlo siempreSin esto, las celdas tienen espacios entre ellas
Usar :nth-child(odd) en lugar de eveneven = pares, odd = impareseven da el efecto cebra común
Poner gap en un contenedor sin Grid/Flexgap solo funciona en Grid o FlexSi no hay display: grid/flex, gap no hace nada
No poner box-sizing: border-boxUsar reset universal * { box-sizing }El padding aumenta el ancho total sin esto

6. Comparativa: Flexbox vs Grid para este caso

FlexboxCSS Grid¿Cuál usar?
display: flex; flex-direction: column; gap: 20pxdisplay: grid; grid-template-columns: 1fr; gap: 20pxAmbos funcionan igual para apilar verticalmente
Mejor para diseño 1D (una fila o una columna)Mejor para diseño 2D (filas Y columnas)Para este caso, cualquiera sirve
Se escribe más código (flex-direction: column)Menos código (grid-template-columns: 1fr)Grid es más conciso para apilar

7. Checklist de verificación rápida

Para crear una tarjeta centrada:

  • ¿El contenedor externo tiene display: flex y justify-content: center?

  • ¿La tarjeta tiene background: white para contrastar?

  • ¿La tarjeta tiene border-radius para esquinas redondeadas?

  • ¿Los elementos internos se organizan con Grid o Flex?

Para una tabla bien presentada:

  • ¿La tabla tiene border-collapse: collapse?

  • ¿Los th tienen fondo diferente (background-color)?

  • ¿Las celdas tienen padding suficiente?

  • ¿Se usó :nth-child(even) para filas cebra?

8. Resumen final en 6 líneas (para memorizar)

css
/* Centrar tarjeta */
.contenedor { display: flex; justify-content: center; }

/* Estructura tarjeta */
.tarjeta { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 20px; 
    background: white; 
    border-radius: 10px; 
}

/* Tabla bonita */
table { border-collapse: collapse; width: 100%; }
th { background: #4CAF50; color: white; padding: 12px; }
td { padding: 10px; border: 1px solid #ddd; }
tr:nth-child(even) { background: #f2f2f2; }

🎓 Plan de estudio para dominar tarjetas con tablas en 3 días

DíaActividadTiempo
Día 1Copia el código completo y modifica colores (cambia el verde por azul)10 min
Día 2Reconstruye de memoria la estructura: menú + tarjeta centrada + tabla10 min
Día 3Crea una nueva tarjeta con datos de "Productos" o "Calificaciones"15 min

La clave está en recordar los patrones:

  1. Flexbox centra (contenedor padre con display: flex + justify-content: center)

  2. Grid organiza (tarjeta con display: grid + 1fr + gap)

  3. Tablas bonitas (collapse + padding + nth-child)

¡Con práctica diaria, en una semana podrás crear tarjetas con tablas sin mirar el código de referencia!

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tutorial de CSS: De Cero a Estilizar tu Primera Página Web

1. ¿Qué es CSS? CSS son las siglas de  Cascading Style Sheets  (Hojas de Estilo en Cascada). Es un lenguaje que usamos para describir la  presentación  de un documento escrito en HTML. Mientras que HTML se encarga de la estructura y el contenido (títulos, párrafos, imágenes), CSS se encarga de cómo se ve ese contenido (colores, fuentes, tamaños, posición). 2. ¿Cómo se integra CSS con HTML? Hay tres formas principales de incluir CSS en tu proyecto: CSS en línea (Inline):  Se aplica directamente a una etiqueta HTML usando el atributo  style . Es el método menos recomendado porque mezcla contenido con presentación y es difícil de mantener. html < p style = " color : blue ; font-size : 18px ; " > Este es un párrafo azul. </ p > CSS interno (Internal):  Se escribe dentro de la etiqueta  <style>  en la sección  <head>  del documento HTML. Es útil para páginas individuales o para hacer pruebas rápidas. html <...
Leer más

layouts

   "Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos). f Tutorial: Creando una Plantilla de Registro HTML/CSS Objetivo del Proyecto Vamos a crear la estructura básica de una página web que contiene: Un menú de navegación con 4 opciones. Un formulario de registro de usuario. Estilos CSS para que todo se vea ordenado y profesional. Paso 1: Entendiendo la Estructura...
Leer más

Proyecto Práctico: Tarjeta de Perfil

"Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos).    Creando una Tarjeta de Perfil con HTML y CSS Descripción del Proyecto Vamos a crear una tarjeta de perfil profesional que contiene: Foto de perfil circular Nombre de la persona Descripción breve Ubicación Botón interactivo con efectos Al final, tendremos una tarjeta moderna y responsive que se centra en la pa...
Leer más