Tabla de diseño

¿Qué es una tabla de diseño?

Una tabla de diseño (layout table) es el uso de elementos HTML <table> para crear el diseño visual de una página en lugar de presentar datos estructurados. Este es un antipatrón de accesibilidad que debe evitarse.

Problemas de accesibilidad

Lectores de pantalla

Los lectores de pantalla anuncian las tablas como tablas de datos, esperando encontrar relaciones entre filas y columnas. Cuando se usan para diseño:

• Navegación confusa: Los usuarios intentan navegar como si fuera una tabla de datos
• Información sin sentido: Las relaciones fila/columna no tienen significado semántico
• Estructura incorrecta: La estructura lógica del contenido no coincide con la presentación visual

Ejemplo problemático

<!-- ❌ Incorrecto: Tabla para diseño -->
<table>
  <tr>
    <td>Header</td>
  </tr>
  <tr>
    <td>Sidebar</td>
    <td>Main content</td>
  </tr>
  <tr>
    <td>Footer</td>
  </tr>
</table>

Solución: CSS para diseño

<!-- ✅ Correcto: HTML semántico con CSS -->
<header>Header</header>
<main>
  <aside>Sidebar</aside>
  <article>Main content</article>
</main>
<footer>Footer</footer>

<style>
  main {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1rem;
  }
</style>

Relación con WCAG 2.1

El Criterio 1.3.1 (Información y Relaciones) requiere que la información, estructura y relaciones puedan determinarse programáticamente. Las tablas de diseño violan este criterio al usar elementos semánticos incorrectamente.

Errores comunes

1. Usar tablas para layout: Crear diseños con <table>, <tr>, <td>
2. Tablas anidadas: Tablas dentro de tablas para diseño complejo
3. Celdas vacías para espaciado: Usar celdas vacías para crear espacios
4. Confundir con tablas de datos: No distinguir entre diseño y datos

Buenas prácticas

• Usar CSS para diseño: Flexbox, Grid, floats, etc.
• HTML semántico: <header>, <nav>, <main>, <aside>, <footer>
• Tablas solo para datos: Usar <table> únicamente para datos estructurados
• Verificar con lectores de pantalla: Asegurar que la estructura es lógica

Términos relacionados

• [[Tabla de datos]]
• [[Semántica HTML]]
• [[Estructura del documento]]
• [[WCAG 2.1]]
• [[Criterio 1.3.1]]