El diseño web basado en tablas fue la forma estándar de maquetar páginas durante los años 90 y principios de los 2000. Hoy está prácticamente extinto, y con razón. Si has llegado hasta aquí buscando qué era eso de maquetar con tablas HTML, te lo cuento sin rodeos: fue un parche que funcionó mientras no había nada mejor, y en cuanto llegó CSS, se convirtió en un lastre.
Qué era exactamente el diseño web basado en tablas
La idea era simple: usabas la etiqueta <table> no para mostrar datos, sino para colocar la estructura visual de la página. Una fila con tres celdas servía de cabecera, contenido y barra lateral. Metías el logo en una celda, el menú en otra, el texto en otra. Y así construías todo el layout.
El diseño web basado en tablas permitía alinear columnas y distribuir contenido cuando CSS todavía no tenía Flexbox, Grid ni nada parecido. Los navegadores de la época renderizaban tablas de forma predecible, así que los desarrolladores las usaban como si fueran andamios.
Incluso se anidaban tablas dentro de tablas para conseguir bordes redondeados, sombras o separaciones. El resultado: un HTML enorme, lleno de <tr>, <td> y atributos como cellpadding o border que no significaban nada semánticamente.
Por qué fue popular y por qué se abandonó
Fue popular porque no había alternativa real. En 1996, si querías dos columnas, o usabas tablas o usabas frames. Y los frames eran aún peores. Las tablas al menos mantenían todo en un solo documento y los buscadores las indexaban sin demasiados problemas.
El problema llegó cuando la web se diversificó. El diseño web basado en tablas no estaba pensado para adaptarse a distintos tamaños de pantalla, y cuando aparecieron los móviles, aquello se desmoronó. Una tabla fija de 960 píxeles en un teléfono de 320 píxeles era un desastre de scroll horizontal.
Además, el código era un infierno de mantener. Cambiar una columna implicaba tocar decenas de celdas. Y para alguien que usara un lector de pantalla, navegar por una página maquetada con tablas era como intentar leer un periódico con las páginas desordenadas.
Las tablas HTML existen para datos tabulares: comparativas, precios, horarios, resultados. Usarlas para maquetar es como usar un martillo para atornillar. Funciona una vez, pero destroza la pared.
Los problemas reales de maquetar con tablas HTML
El primer problema es la accesibilidad. Los lectores de pantalla anuncian «tabla con 3 columnas y 12 filas» cuando en realidad estás mostrando un artículo de blog. Eso confunde a usuarios con discapacidad visual y penaliza tu sitio en auditorías de accesibilidad.
El segundo es el SEO. El diseño web basado en tablas no jerarquiza el contenido. Google no entiende qué parte es el título principal, qué es un subtítulo y qué es un menú lateral. Sin etiquetas semánticas como <header>, <main> o <article>, el crawler va a ciegas.
El tercero es el rendimiento. Una página con tablas anidadas tarda más en renderizar porque el navegador debe calcular el tamaño de todas las celdas antes de pintar nada. Con CSS moderno, el layout se resuelve en milisegundos y sin estructuras infladas.
El cuarto es el responsive. Hacer que una tabla se adapte a móvil sin romperse es una pesadilla. Con Flexbox o Grid, es cuestión de unas pocas líneas.
Qué se usa hoy en 2026 para maquetar
Hoy el diseño web sin tablas se apoya en tres pilares: HTML semántico, CSS moderno y un enfoque mobile-first. Nada más. El HTML define la estructura y el significado; el CSS se encarga de la presentación.
Flexbox resolvió el alineamiento en una dimensión: filas o columnas. CSS Grid resolvió el diseño bidimensional: filas y columnas a la vez. Entre los dos cubren el 99% de cualquier layout que se te ocurra, desde una landing page hasta un dashboard complejo.
Si vienes de un sitio viejo maquetado con tablas, migrar a CSS no es opcional. Es la diferencia entre un sitio que carga en 1 segundo y otro que tarda 4. Entre posicionar en Google o quedarte en la página 5.
Cómo convertir un diseño con tablas a CSS
El proceso es más sencillo de lo que parece. Primero identificas qué tablas son realmente datos y cuáles son layout. Las de layout se eliminan y se sustituyen por <div> con clases, o mejor aún, por etiquetas semánticas HTML5.
Después aplicas CSS Grid para la estructura general y Flexbox para los componentes internos. Las media queries se encargan de que todo se apile en móvil sin scroll horizontal.
Las tablas que sí contienen datos se mantienen, pero se estilizan con CSS para que sean legibles en cualquier dispositivo. Y se les añaden atributos como scope o caption para que los lectores de pantalla las entiendan.
Errores comunes al dejar atrás las tablas
Mucha gente cree que basta con cambiar <table> por <div> y seguir igual. Error. Un div no aporta semántica. Si vas a migrar, hazlo bien: usa <header>, <nav>, <main>, <aside> y <footer>.
Otro error es seguir usando atributos HTML para el estilo, como width, align o bgcolor. Eso está obsoleto desde HTML5. Todo el estilo va en CSS, sin excepciones.
Y el tercer error es no probar en dispositivos reales. Una maquetación con CSS puede verse perfecta en tu monitor de 27 pulgadas y ser un caos en un iPhone. Usa las DevTools del navegador y testea siempre en móvil primero.
Preguntas rápidas que todo el mundo hace
- ¿Puedo usar tablas para diseño hoy? No. Está desaconsejado por accesibilidad, SEO y mantenimiento.
- ¿Y si solo quiero mostrar datos? Ahí sí. Una tabla de precios o un horario es su uso correcto.
- ¿CSS Grid reemplaza a las tablas? Para layout, sí. Para datos tabulares, no.
- ¿Las tablas ralentizan la web? Sí, sobre todo si están anidadas. El navegador tarda más en calcular el layout.
- ¿Es difícil migrar? Depende del tamaño del sitio, pero siempre compensa. Ganas velocidad, accesibilidad y posicionamiento.
El diseño web basado en tablas cumplió su función cuando no había otra cosa. Hoy es un lastre técnico. Si tu sitio todavía depende de tablas para maquetar, estás perdiendo visitas, velocidad y credibilidad. Migrar a CSS moderno no es una moda: es la línea que separa un sitio profesional de uno que arrastra deuda técnica desde los 2000.
