Curso CSS Módulo 5

 

Módulo 5: Tablas en CSS

En este módulo aprenderás a dar estilo a las tablas con CSS para que pasen de verse aburridas y desordenadas a elegantes, claras y profesionales. Aprenderás a trabajar con:

• ✔️ Bordes y espaciados de celda.
• ✔️ Colores alternos para filas (efecto “zebra”).
• ✔️ Cabeceras destacadas para mayor legibilidad.
• ✔️ Bordes redondeados y efectos “hover” para mejorar la experiencia del usuario.

---

📐 Bordes y espaciado de celdas

Por defecto, las tablas HTML muestran bordes dobles y celdas pegadas. Con la propiedad border-collapse logramos un efecto más limpio, y con padding damos espacio interno a las celdas.

table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid #ddd; padding: 8px; }

✅ Ahora los bordes se ven uniformes y las celdas tienen espacio interno.

---

🎨 Colores alternos en las filas

Las tablas largas se leen mejor cuando las filas tienen colores alternos. Se logra fácilmente con :nth-child(even).

tr:nth-child(even) { background-color: #f2f2f2; }

✅ Cada fila par tendrá un fondo gris claro, haciendo más fácil seguir la información con la vista.

---

🏷️ Cabeceras destacadas

Las cabeceras (<th>) deben resaltar para diferenciarse de los datos. Puedes usar un color sólido y texto en negrita.

th { background-color: #4CAF50; color: white; text-align: left; }

✅ La cabecera ahora es verde con texto blanco y alineación a la izquierda.

---

✨ Bordes redondeados y efecto “hover”

Los bordes redondeados y el efecto “hover” en las filas dan un aspecto moderno y atractivo.

table { border-radius: 8px; overflow: hidden; } tr:hover { background-color: #ddd; }

✅ Al pasar el mouse sobre una fila, su fondo se ilumina, ayudando al usuario a resaltar los datos.

---

📊 Ejemplo completo de una tabla estilizada

table { border-collapse: collapse; width: 100%; border-radius: 8px; overflow: hidden; } th { background-color: #4CAF50; color: white; padding: 12px; text-align: left; } td { border: 1px solid #ddd; padding: 8px; } tr:nth-child(even) { background-color: #f2f2f2; } tr:hover { background-color: #ddd; }

✅ Con este ejemplo tendrás tablas modernas y fáciles de leer en cualquier web.

---

📥 Preguntas de repaso

Pregunta 1

¿Qué propiedad de CSS une los bordes de las tablas en uno solo?

• A) border-spacing
• B) border-collapse
• C) border-merge
• D) collapse-borders

✅ Respuesta correcta: B) border-collapse

---

Pregunta 2

¿Qué pseudo-clase aplicas para dar estilo a las filas pares?

• A) :nth-line(2)
• B) :nth-child(2n)
• C) :even
• D) :row(2)

✅ Respuesta correcta: B) :nth-child(2n) (o simplemente “even”)

---

Pregunta 3

¿Qué propiedad CSS puedes usar para redondear los bordes de una tabla?

• A) border-radius
• B) table-radius
• C) rounded-border
• D) border-curve

✅ Respuesta correcta: A) border-radius

---

Este módulo forma parte del curso básico de CSS. En el siguiente módulo aprenderás a dar estilo a formularios para que sean más atractivos y fáciles de usar.