Tablas HTML: datos bien estructurados y accesibles

Aprende a crear tablas legibles con `caption`, `thead`, `tbody`, `th`, `scope` y buenas prácticas responsive.

Usa tablas solo para datos tabulares, nunca para maquetar layouts.

caption aporta contexto global sobre qué representa la tabla.

th y scope mejoran navegación en lectores de pantalla.

Una tabla clara se entiende más rápido y se mantiene mejor.

  • Piensa en datos y cabeceras como una matriz con sentido. 📊
  • `thead` separa cabeceras del cuerpo y mejora mantenimiento visual/semántico.
  • Usa `th scope="col"` para encabezados de columna y `scope="row"` para filas cuando aplique.
  • Evítalos y ya tendrás media batalla ganada.
  • Usar `td` en cabeceras en lugar de `th`.

Estructura base que sí funciona

Piensa en datos y cabeceras como una matriz con sentido. 📊

`thead` separa cabeceras del cuerpo y mejora mantenimiento visual/semántico.

Usa `th scope="col"` para encabezados de columna y `scope="row"` para filas cuando aplique.

Errores comunes en tablas

Evítalos y ya tendrás media batalla ganada.

  • Usar `td` en cabeceras en lugar de `th`.
  • No incluir `caption` en tablas complejas.
  • Filas con distinto número de columnas sin motivo.
  • Meter una tabla para centrar una card (anti-pattern).
HTML
12

Tablas HTML: datos bien estructurados y accesibles

Aprende a crear tablas legibles con `caption`, `thead`, `tbody`, `th`, `scope` y buenas prácticas responsive.

Código del tema: <table> | <caption> | <thead> | <tbody> | <th scope>

📘 Teoría

Estructura base que sí funciona

Piensa en datos y cabeceras como una matriz con sentido. 📊

1

`thead` separa cabeceras del cuerpo y mejora mantenimiento visual/semántico.

2

Usa `th scope="col"` para encabezados de columna y `scope="row"` para filas cuando aplique.

Errores comunes en tablas

Evítalos y ya tendrás media batalla ganada.

  • Usar `td` en cabeceras en lugar de `th`.
  • No incluir `caption` en tablas complejas.
  • Filas con distinto número de columnas sin motivo.
  • Meter una tabla para centrar una card (anti-pattern).

🧪 Aprende probando

Ejemplo Ejemplo guiado: tabla de precios Tabla clara con caption, thead y tbody.
Ejemplo Demo interactiva: thead, tbody, tfoot, scope, colspan y rowspan Visualiza cómo una tabla completa mejora lectura, accesibilidad y mantenimiento en datos reales.

🏁 Retos

Reto Reto: mejora accesibilidad de cabeceras Añade `scope` en th de columna.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre HTML.

Test de HTML

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com