¿Ya dominas lo básico? Un curso estructurado de HTML & CSS es la vía rápida para dar el salto.
Ver cursos de HTML & CSS en UdemyEnlace de afiliado. No te cuesta nada extra.
- 01Preparar el entorno (lo que necesitas)
- 02Tu primer HTML
- 03Listas y enlaces
- 04Poner color con CSS
- 05Selectores CSS y clases
- 06Maquetar con Flexbox
- 07Probar imágenes y tablas
- 08Probar los controles de formulario
- 09Entender el modelo de cajas
- 10Introducción al diseño adaptable (media queries)
- 11Variables CSS (propiedades personalizadas)
- 12Maquetar con CSS Grid
- 13Añadir una animación
- 14Escribir comentarios
- 15Añadir interacción con pseudoclases (:hover)
- 16:not() y selectores con varias condiciones en CSS
- 17Fundamentos de las metaetiquetas y el SEO
- 18Fundamentos de accesibilidad (alt y aria-label)
- 19Probar los atributos data (data-*)
- 20Transiciones CSS (cambios suaves al pasar el ratón)
- 21iframe (incrustar otra página)
- 22position (colocar un elemento con precisión)
- 23z-index (indicar el orden de apilamiento)
- 24Fundamentos de localStorage (guardar datos en el navegador)
- 25Las etiquetas video y audio (incrustar medios)
- 26Tablas avanzadas (colspan y rowspan)
- 27Fundamentos de la especificidad en CSS
- 28Fundamentos de SVG (dibujar imágenes vectoriales)
- 29Flexbox avanzado (envolver y crecer)
- 30Validación de formularios (required y pattern)
- 31CSS Grid avanzado (grid-template-areas)
- 32Las etiquetas details y summary (crear un panel plegable)
- 33Contadores CSS (numeración automática)
- 34Tamaños de letra fluidos con clamp()
- 35prefers-color-scheme (compatibilidad con el modo oscuro)
- 36Construir un deslizador con input type=range
- 37Fijar una proporción con aspect-ratio
- 38Ajustar cómo se muestra una imagen con object-fit
- 39Girar y escalar con transform
- 40Servir imágenes adaptables con la etiqueta picture
- 41Mostrar el foco del teclado con :focus-visible
- 42Desplazamiento suave con scroll-behavior
- 43Cambiar la disposición por componente con container queries
- 44Crear un efecto de cristal esmerilado con backdrop-filter
- 45Construir una rejilla flexible con repeat() y minmax()
- 46Fijar una cabecera en su sitio con position: sticky
- 47Añadir pseudoelementos con ::before y ::after
- 48Recortar textos largos con puntos suspensivos usando text-overflow
- 49Usar un valor calculado en CSS con calc()
- 50[Aplicado] Construye un sitio web sencillo
Tablas avanzadas (colspan y rowspan)
En esta lección combinarás celdas para representar tablas con estructura real, como un horario de clases.
colspan="2" hace que una celda ocupe dos columnas; rowspan="2", que ocupe dos filas. Al fusionar celdas hay que descontar las que desaparecen: si una celda se extiende por dos columnas, en esa fila escribes una etiqueta menos.
El código de ejemplo tiene una cabecera que abarca dos columnas y una celda de «tiempo libre» que ocupa dos filas. Cuenta las etiquetas de la tercera fila: son solo dos, porque la tercera columna ya la ocupa la celda fusionada de arriba.
El fallo más habitual es precisamente ese descuadre: si dejas las celdas de más, la tabla se desborda hacia la derecha y aparecen huecos. Cuando una tabla «se rompe», cuenta las celdas fila por fila teniendo en cuenta las fusiones.
En el trabajo real, las tablas complejas cuestan de adaptar a móvil, así que se suelen envolver en un contenedor con desplazamiento horizontal. Para la accesibilidad, además, conviene añadir scope a las cabeceras.
💡 La vista previa se genera por completo en esta página; no se envía nada al exterior.