Cargando...

Tablas en CSS

HTML construye la cuadrícula de filas y celdas. CSS decide si los bordes se ven limpios, qué tan ancha queda la tabla, dónde sienta el texto en la celda y si las filas se escanean fácil.

Un kit CSS para tablas

📊 Estilos de tabla de un vistazo

Propiedad Trabajo cotidiano
border-collapse Fusionar bordes de celda (collapse) o mantenerlos aparte (separate)
border-spacing Hueco entre celdas cuando los bordes están separados
width Ancho de la tabla (a menudo 100% en artículo o tarjeta)
padding en th/td Aire dentro de las celdas
text-align / vertical-align Alineación horizontal y vertical en la celda

Estiliza sobre todo table, th, td y a veces tr — no cada celda una a una — para que toda la cuadrícula quede coherente.

Bordes que no se duplican

Sin ayuda, los bordes vecinos pueden verse gruesos o dobles. border-collapse: collapse los une en una línea limpia — la opción cotidiana para tablas de datos.

Bordes de tabla colapsados

css
CSS Code 
table.data {
width: 100%;
border-collapse: collapse;
}

table.data th,
table.data td {
border: 1px solid #ccc;
padding: 0.5rem 0.75rem;
}

Bordes separados y espaciado

Si quieres hueco visible entre celdas, usa border-collapse: separate y define border-spacing. El espaciado se ignora cuando los bordes están colapsados.

Celdas separadas con huecos

css
CSS Code 
table.cards {
border-collapse: separate;
border-spacing: 0.5rem;
}

table.cards td {
border: 1px solid #ddd;
padding: 0.75rem;
}

Ancho, encabezados y alineación

Una tabla a ancho completo suele leerse mejor en artículos. Resalta encabezados, alinea el texto y usa vertical-align cuando las alturas de celda difieren.

Alineación de encabezado y celda

css
CSS Code 
table.data th {
text-align: left;
background: #f5f5f5;
font-weight: 700;
}

table.data td {
text-align: left;
vertical-align: top;
}

Filas zebra y hover calmado

Fondos alternos ayudan a seguir tablas anchas. Un :hover suave en tr destaca la fila activa sin ruido neón.

Zebra + hover de fila

css
CSS Code 
table.data tbody tr:nth-child(even) {
background: #fafafa;
}

table.data tbody tr:hover {
background: #eef5ff;
}

Un hábito calmado de tabla de datos

Colapsa bordes, da padding real a las celdas, mantén el contraste del encabezado modesto y añade zebra u hover solo cuando la tabla ancha lo necesite.

Tabla de artículo legible

css
CSS Code 
article table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}

article th,
article td {
border: 1px solid #e0e0e0;
padding: 0.6rem 0.8rem;
}

Pruébalo tú

  1. Pon border-collapse: collapse y un borde ligero en th/td.
  2. Añade padding cómodo dentro de las celdas.
  3. Alinea encabezados a la izquierda; prueba vertical-align: top en celdas multilínea.
  4. Raya filas pares con tr:nth-child(even).
  5. Añade un fondo suave en tr:hover — luego compara con otra tabla y border-spacing.

Errores comunes

  • Dejar bordes separated por defecto para que las líneas se vean dobles y sucias
  • Poner border-spacing con border-collapse: collapse (se ignora)
  • Padding minúsculo que hace ilegibles los datos densos
  • Hover neón o zebra pesada que pelea con el contenido
  • Mezclar esta lección con marcadores list-style (sesión anterior)

Resumen

  • border-collapse: collapse es el default calmado para tablas de datos
  • Usa separate + border-spacing cuando quieras huecos entre celdas
  • Ancho, padding y alineación dan forma a la lectura
  • Filas zebra y hover ligero ayudan a escanear
  • Estructura en HTML; apariencia en CSS

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 32 de 35
Css Tutorial