Ejercicio CSS 04: Listas y Tablas Estilizadas

🎯 Ejercicio: Listas y Tablas Estilizadas

📋 Objetivo

Crear una página con listas estilizadas y tablas responsive aplicando todas las propiedades aprendidas. Practicarás diferentes tipos de marcadores, estilos de bordes, espaciado y técnicas de responsividad.

📝 Instrucciones

Copia la plantilla HTML que se proporciona abajo
Crea un archivo CSS llamado listas-tablas.css
Personaliza el contenido: Cambia los elementos de las listas y datos de las tablas por tus propios intereses
Aplica propiedades de listas:

list-style-type: Diferentes marcadores para cada lista
list-style-position: Experimenta con inside/outside
list-style-image: Usa imágenes personalizadas (opcional)

Aplica propiedades de tablas:

border-collapse: Controla los bordes
border-spacing: Espaciado entre celdas
table-layout: fixed o auto
caption-side: Posición del título

Haz la tabla responsive con overflow
¡Sé creativo! Usa colores y estilos que te gusten

💡 Recordatorio de Propiedades

📋 Listas:

list-style-type: disc, square, decimal, upper-roman, none
list-style-position: outside, inside
list-style-image: url("imagen.png")
list-style: Atajo para las anteriores

📊 Tablas:

border-collapse: separate, collapse
border-spacing: 5px, 10px 5px
table-layout: auto, fixed
caption-side: top, bottom
overflow: auto, hidden, scroll

📄 Plantilla HTML

Copia este código y guárdalo como ejercicio04.html:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejercicio 04 - Listas y Tablas</title>
  <link rel="stylesheet" href="listas-tablas.css">
</head>
<body>
  <header>
    <h1>Mis Listas y Tablas Favoritas</h1>
    <p>Una colección personal organizada</p>
  </header>

  <main>
    <section class="seccion-listas">
      <h2>🍕 Mis Comidas Favoritas</h2>
      <ul class="lista-comidas">
        <li>Pizza Margarita</li>
        <li>Tacos al Pastor</li>
        <li>Sushi de Salmón</li>
        <li>Hamburguesa Clásica</li>
        <li>Pasta Alfredo</li>
      </ul>

      <h2>🎯 Pasos para Cocinar Pasta</h2>
      <ol class="lista-pasos">
        <li>Hervir agua con sal</li>
        <li>Añadir la pasta al agua hirviendo</li>
        <li>Cocinar según tiempo del paquete</li>
        <li>Escurrir la pasta</li>
        <li>Servir con tu salsa favorita</li>
      </ol>

      <h2>🎵 Géneros Musicales que me Gustan</h2>
      <ul class="lista-musica">
        <li>Rock Clásico</li>
        <li>Pop Latino</li>
        <li>Jazz</li>
        <li>Electrónica</li>
        <li>Reggaeton</li>
      </ul>
    </section>

    <section class="seccion-tablas">
      <h2>⚽ Equipos de Fútbol y sus Logros</h2>
      
      <div class="contenedor-tabla">
        <table class="tabla-equipos">
          <caption>Estadísticas de Equipos Favoritos - Temporada 2025</caption>
          <thead>
            <tr>
              <th>Equipo</th>
              <th>País</th>
              <th>Títulos Liga</th>
              <th>Copas Internacionales</th>
              <th>Año Fundación</th>
              <th>Estadio</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Real Madrid</td>
              <td>España</td>
              <td>35</td>
              <td>15</td>
              <td>1902</td>
              <td>Santiago Bernabéu</td>
            </tr>
            <tr>
              <td>Barcelona</td>
              <td>España</td>
              <td>27</td>
              <td>5</td>
              <td>1899</td>
              <td>Camp Nou</td>
            </tr>
            <tr>
              <td>Manchester United</td>
              <td>Inglaterra</td>
              <td>20</td>
              <td>3</td>
              <td>1878</td>
              <td>Old Trafford</td>
            </tr>
            <tr>
              <td>Bayern Múnich</td>
              <td>Alemania</td>
              <td>32</td>
              <td>6</td>
              <td>1900</td>
              <td>Allianz Arena</td>
            </tr>
            <tr>
              <td>Juventus</td>
              <td>Italia</td>
              <td>36</td>
              <td>2</td>
              <td>1897</td>
              <td>Allianz Stadium</td>
            </tr>
          </tbody>
        </table>
      </div>

      <h2>🎮 Mis Videojuegos Favoritos</h2>
      
      <div class="contenedor-tabla">
        <table class="tabla-juegos">
          <caption>Top 5 Videojuegos Personales</caption>
          <thead>
            <tr>
              <th>Juego</th>
              <th>Plataforma</th>
              <th>Género</th>
              <th>Año</th>
              <th>Calificación</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>The Legend of Zelda</td>
              <td>Nintendo Switch</td>
              <td>Aventura</td>
              <td>2017</td>
              <td>10/10</td>
            </tr>
            <tr>
              <td>FIFA 25</td>
              <td>PlayStation 5</td>
              <td>Deportes</td>
              <td>2024</td>
              <td>9/10</td>
            </tr>
            <tr>
              <td>Minecraft</td>
              <td>PC</td>
              <td>Sandbox</td>
              <td>2011</td>
              <td>9/10</td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>
  </main>
</body>
</html>

🎨 Ideas para Personalizar

📋 Para las Listas:

Cambia los temas: Películas, libros, hobbies, lugares para visitar
Usa diferentes marcadores: círculos, cuadrados, números romanos
Experimenta con colores: Fondos, bordes, hover effects
Añade iconos: Emojis o imágenes pequeñas como viñetas

📊 Para las Tablas:

Cambia los datos: Países visitados, libros leídos, series favoritas
Prueba diferentes estilos: Bordes, espaciado, colores alternados
Haz hover effects: Cambios de color al pasar el mouse
Ajusta la responsividad: Scroll horizontal en móviles

🌟 Efectos Creativos:

Zebra striping: Filas alternadas con diferentes colores
Sombras: Box-shadow en tablas y listas
Transiciones: Efectos suaves en hover
Bordes redondeados: Border-radius para esquinas suaves