Tutorial: Maquetando una "Featured Card" con Tabla

 


Vamos a desglosar el código paso a paso, centrándonos en la arquitectura del layout.

1. El Contenedor Principal: El Corazón del Layout con CSS Grid

El elemento .featured-card es el cerebro de la operación. Utiliza display: grid para definir cómo se apilarán sus hijos directos.

css
.featured-card {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 0;
    /* ... otros estilos ... */
}

  • display: grid;: Activa el sistema de rejilla.

  • grid-template-rows: auto auto 1fr auto;: Esta es la línea más importante para la segregación. Define cuatro filas:

    1. auto (Header): La primera fila (.card-header) tendrá la altura que necesite su contenido.

    2. auto (Título): La segunda fila (.card-title) también se ajustará a su contenido.

    3. 1fr (Contenedor de la Tabla): La tercera fila (.card-text) es la estrella. 1fr significa que ocupará todo el espacio disponible que quede después de que las filas auto hayan ocupado el suyo. Si el contenido es muy grande, esta fila crecerá; si es pequeño, se encogerá. Esto es crucial para que el footer siempre se pegue al fondo.

    4. auto (Footer): La cuarta fila (.card-footer) se ajustará a su contenido.

Concepto Clave: Hemos dividido la tarjeta en 4 regiones independientes. Cada una es un bloque que podemos estilizar sin que interfiera con las demás.

2. El Dilema de la Tabla: El Contenedor .card-text

Aquí es donde ocurre la magia para que la tabla no rompa el diseño. Observa la relación entre el contenedor .card-text y la table que está dentro.

El Problema: Las tablas, por naturaleza, son "egoístas". Si tienen muchas columnas, se ensancharán todo lo que puedan, incluso si eso significa reventar los límites de su contenedor padre y crear un desastre visual.

La Solución (Contenedor .card-text):

css
.card-text {
    /* ... */
    padding: 20px;  /* Crea un espacio interno alrededor de la tabla */
    
    /* ----- SCROLL HORIZONTAL: LA CLAVE DEL ÉXITO ----- */
    overflow-x: auto;          /* Si la tabla es muy ancha, aparecerá un scroll horizontal AQUÍ */
    -webkit-overflow-scrolling: touch; /* Mejora la experiencia de scroll en dispositivos táctiles */
}

  • padding: 20px;: Este es el único padding que necesitas. Lo aplicas al contenedor, no a la tabla. Esto crea un espacio uniforme entre el borde de la tarjeta y la tabla, y también entre la tabla y el título y el footer.

  • overflow-x: auto;: Esta es la salvación. Al contenedor .card-text le decimos: "Oye, tú vas a medir lo que el Grid te permita (que es casi todo el ancho de la tarjeta). Si la tabla que tienes dentro es más ancha que tú, no la expandas, no la recortes a la fuerza, mejor muéstrame unas barras de desplazamiento para que el usuario pueda deslizar y ver todo el contenido". Esto mantiene la integridad de la tarjeta.

3. La Tabla Humilde: .card-text table

Ahora, la tabla puede comportarse de manera natural, pero sin ser una amenaza.

css
.card-text table {
    width: 100%;               /* Ocupa el 100% del ancho de su contenedor (.card-text) */
    border-collapse: collapse; /* Elimina el espacio entre bordes de celdas */
    /* ... otros estilos ... */
}

  • width: 100%;: La tabla siempre intentará ocupar todo el ancho del contenedor .card-text. Si el contenedor mide 500px, la tabla medirá 500px.

  • Contenido Ancho vs. Contenedor Estrecho: Si el contenido de las celdas es muy grande (ej. texto muy largo) o hay muchas columnas y el ancho mínimo necesario para mostrarlas es de 800px, ocurre lo siguiente:

    1. La tabla dice: "Necesito 800px de ancho para que mi contenido se vea bien".

    2. El navegador le responde: "Tu contenedor padre, .card-text, solo tiene 500px porque es lo que le asigna el Grid".

    3. Conflicto: La tabla quiere 800px, pero el padre solo ofrece 500px. Gana la tabla. La tabla se renderizará con 800px de ancho.

    4. Acción del Padre: El padre, .card-text, tiene overflow-x: auto. Al ver que su hijo (la tabla) es más grande que él, en lugar de recortarlo, activa su scroll horizontal. El ancho del padre sigue siendo 500px, pero ahora tiene barras para ver los 800px de la tabla.

4. El Footer: Flexibilidad con Grid

El .card-footer también usa Grid para una alineación perfecta.

css
.card-footer {
    display: grid;
    grid-template-columns: 1fr auto; /* Dos columnas: una flexible y otra automática */
    align-items: center;
    gap: 15px;
    /* ... */
}

  • grid-template-columns: 1fr auto;: Crea dos columnas.

    • La primera columna (donde va el texto "Last updated...") tiene 1fr, ocupando todo el espacio disponible empujando el botón hacia la derecha.

    • La segunda columna (donde va el botón) tiene auto, ocupando solo el ancho que necesite.

  • align-items: center;: Centra verticalmente el texto y el botón dentro del footer.

5. Toque Final: El Responsive Design

La media query final ajusta todo para pantallas pequeñas, demostrando la solidez de la estructura.

css
@media (max-width: 480px) {
    .featured-card {
        margin: 20px;           /* Reduce el margen exterior */
        max-width: 100%;        /* Ocupa todo el ancho disponible */
    }
    
    .card-footer {
        grid-template-columns: 1fr; /* El footer se apila en una sola columna */
        text-align: center;
    }
    
    .card-text {
        padding: 15px;          /* Reduce el padding alrededor de la tabla */
    }
    
    .card-text th,
    .card-text td {
        padding: 8px 10px;      /* Reduce el padding interno de las celdas */
    }
}

Resumen de la Filosofía de Maquetación:

  1. Divide y Vencerás con Grid: Usa Grid en el contenedor principal para definir las secciones principales (Header, Título, Contenido, Footer).

  2. El Contenedor es el Protector: El div que contiene la tabla (.card-text) es el responsable del padding y del scroll. Esto mantiene la tabla a raya y los márgenes internos consistentes.

  3. La Tabla es Libre (dentro de lo que cabe): La tabla solo necesita width: 100% para intentar llenar su espacio, pero si necesita más, el contenedor padre le proveerá de scroll.

  4. Grid para Alineaciones Finas: Usa pequeños Grids internos (como en el footer) para alinear elementos de forma sencilla y robusta.

Este enfoque garantiza que la tarjeta se vea genial tanto con tablas pequeñas como con tablas enormes, manteniendo la estructura interna y los espaciados perfectamente controlados.

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