Tablas y Datos Estructurados

Marcado de tablas adecuado para datos, no para layout

Cuándo Usar Tablas

Las tablas son para datos tabulares—reportes, horarios, comparaciones. Usa CSS para diseño y posicionamiento.

Estructura Semántica de Tablas

<table>
  <caption>Ventas Mensuales</caption>
  <thead>
    <tr>
      <th scope="col">Mes</th>
      <th scope="col">Ingresos</th>
      <th scope="col">Crecimiento</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Enero</th>
      <td>$12,400</td>
      <td>8%</td>
    </tr>
  </tbody>
</table>

Consejos de Accesibilidad

✓ Usa <caption> para describir la tabla.
✓ Usa <th scope="col"> y <th scope="row"> para headers.
✓ Mantén las tablas legibles en móvil (envuélvelas en un contenedor con scroll).

Errores Comunes de Tablas

❌ Tabla de Layout

Usar tablas para construir layouts de página hace que el mantenimiento y la accesibilidad sean más difíciles.

✓ Tabla de Datos

Usa tablas solo para datos que pertenecen en filas y columnas.