2-tabla

 

Documentación del CSS

css
/* Selector universal - RESET */
* {
    padding: 0;        /* Elimina todo el relleno interno por defecto de todos los elementos */
    margin: 0;         /* Elimina todos los márgenes externos por defecto de todos los elementos */
}

/* Estilos para el cuerpo de la página */
body {
    background-color: #f0f0f0;    /* Fondo gris claro para toda la página */
}

/* Contenedor principal - centra la tarjeta */
.contenido1 {
    padding-top: 10px;              /* Espacio de 10px arriba para separar del borde superior */
    border: 1px solid red;           /* Borde rojo (útil para ver el contenedor mientras desarrollas) */
    display: flex;                   /* Activa Flexbox en este contenedor */
    justify-content: center;         /* Centra horizontalmente la tarjeta (.card) */
}

/* Estilos de la tarjeta principal */
.card {
    border: 5px solid green;         /* Borde verde grueso (para visualizar los límites) */
    background-color: white;         /* Fondo blanco para la tarjeta */
    display: flex;                   /* Activa Flexbox para organizar header, body, footer */
    flex-direction: column;          /* Organiza los hijos en COLUMNA (vertical) */
    width: 500px;                    /* Ancho fijo de 500 píxeles */
    border-radius: 8px;              /* Esquinas redondeadas de 8px */
}

/* Encabezado de la tarjeta */
.card-header {
    background-color: #f8f9fa;        /* Fondo gris muy claro (típico de cabeceras) */
    border-bottom: 1px solid #dee2e6; /* Línea divisoria gris abajo para separar del body */
}

/* Título dentro del encabezado */
.card-header h1 {
    text-align: center;               /* Centra el texto "Sotelo" horizontalmente */
}

/* Cuerpo de la tarjeta */
.card-body {
    padding: 20px 20px 0 20px;        /* Padding: arriba 20px, derecha 20px, abajo 0, izquierda 20px */
}

/* Párrafos dentro del cuerpo */
.card-body p {
    text-align: center;               /* Centra el texto de los párrafos */
}

/* Títulos h2 dentro del cuerpo */
.card-body h2 {
    text-align: center;               /* Centra los títulos secundarios */
}

/* Pie de la tarjeta */
.card-footer {
    padding: 20px 20px 0 20px;        /* Mismo padding que el body (arriba y lados, sin abajo) */
}

/* Estilos para tablas */
table {
    margin: 0 auto;                    /* Centra la tabla horizontalmente dentro de su contenedor */
    /* El margin: 0 auto significa:
       - 0: margen superior e inferior
       - auto: margen izquierdo y derecho automáticos (centra el elemento)
    */
}

🎓 TUTORIAL: Cómo crear esta tarjeta con tabla centrada

📋 PASO 1: Estructura HTML básica

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Tarjeta</title>
</head>
<body>
    <!-- Aquí irá el contenido -->
</body>
</html>

📦 PASO 2: Crear la estructura de la tarjeta

html
<body>
    <div class="contenido1">          <!-- Contenedor principal -->
        <div class="card">              <!-- Tarjeta -->
            <div class="card-header">   <!-- Encabezado -->
                <h1>Sotelo</h1>
            </div>
            <div class="card-body">     <!-- Cuerpo -->
                <!-- Aquí irá la tabla -->
            </div>
            <div class="card-footer">   <!-- Pie -->
                3
            </div>
        </div>
    </div>
</body>

📊 PASO 3: Añadir la tabla

html
<div class="card-body">
    <table border="1">                  <!-- border="1" es solo para ver los bordes -->
        <caption>Título de la tabla</caption>
        <tr>                             <!-- Fila de encabezados -->
            <th>Col.Cab.1</th>           <!-- th = table header -->
            <th>Col.Cab.2</th>
        </tr>
        <tr>                             <!-- Primera fila de datos -->
            <td>Celda 1</td>              <!-- td = table data -->
            <td>Celda 2</td>
        </tr>
    </table>
</div>

🎨 PASO 4: Añadir CSS básico (paso a paso)

4.1 Resetear estilos por defecto

css
* {
    padding: 0;
    margin: 0;
}

4.2 Estilo del body

css
body {
    background-color: #f0f0f0;
}

4.3 Centrar la tarjeta

css
.contenido1 {
    padding-top: 10px;
    display: flex;
    justify-content: center;
}

4.4 Diseñar la tarjeta

css
.card {
    background-color: white;
    display: flex;
    flex-direction: column;
    width: 500px;
    border-radius: 8px;
}

4.5 Estilos del encabezado

css
.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.card-header h1 {
    text-align: center;
}

4.6 Estilos del cuerpo

css
.card-body {
    padding: 20px 20px 0 20px;
}

.card-body h2 {
    text-align: center;
}

.card-body p {
    text-align: center;
}

4.7 Estilos del pie

css
.card-footer {
    padding: 20px 20px 0 20px;
}

4.8 Centrar la tabla

css
table {
    margin: 0 auto;
}

🎯 EJERCICIOS PRÁCTICOS

Ejercicio 1: Modifica los colores

css
/* Cambia estos valores a tu gusto */
.card-header {
    background-color: #ffcccc;  /* Rojo claro */
}

.card-footer {
    background-color: #ccffcc;  /* Verde claro */
}

Ejercicio 2: Añade más filas a la tabla

html
<table>
    <caption>Mis datos</caption>
    <tr>
        <th>Nombre</th>
        <th>Edad</th>
    </tr>
    <tr>
        <td>Ana</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Juan</td>
        <td>30</td>
    </tr>
    <tr>
        <td>María</td>
        <td>28</td>
    </tr>
</table>

Ejercicio 3: Mejora el estilo de la tabla

css
table {
    margin: 0 auto;
    border-collapse: collapse;  /* Une los bordes */
    width: 100%;                 /* Ocupa todo el ancho disponible */
    margin-top: 15px;            /* Espacio arriba */
}

th, td {
    padding: 10px;               /* Espacio interno en celdas */
    text-align: left;            /* Texto alineado a la izquierda */
}

th {
    background-color: #007bff;   /* Fondo azul para encabezados */
    color: white;                /* Texto blanco */
}

📝 RESUMEN DE CONCEPTOS CLAVE

ConceptoExplicación
FlexboxSistema para alinear elementos fácilmente
justify-contentCentra horizontalmente (con flex-direction: row)
align-itemsCentra verticalmente (con flex-direction: row)
margin: 0 autoCentra elementos de bloque como tablas
paddingEspacio INTERNO entre el borde y el contenido
border-radiusEsquinas redondeadas

🔍 TROUBLESHOOTING (Problemas comunes)

Problema: La tabla no se centra
Solución: Asegúrate de tener margin: 0 auto en la tabla

Problema: La tarjeta no se centra en la página
Solución: Verifica que .contenido1 tenga display: flex y justify-content: center

Problema: Los textos no se centran
Solución: Usa text-align: center en los elementos específicos

¡Practica con estos ejercicios y tendrás dominado el centrado de elementos en CSS! 

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