Las tablas HTML presentan datos tabulares (filas y columnas de datos relacionados) — no maquetación. Una tabla accesible usa una estructura adecuada para que los lectores de pantalla puedan anunciar encabezados con cada celda.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> con scope — marca celdas de encabezado. scope="col" para encabezados de columna, scope="row" para encabezados de fila. Los lectores de pantalla entonces anuncian "North, Revenue: $12,000" en lugar de leer celdas sin contexto.<caption> — un título para toda la tabla, el primer hijo de <table>; se lee para orientar a los usuarios.<thead>/<tbody>/<tfoot> — agrupa filas de encabezado, cuerpo y resumen; ayuda en la navegación y permite que el encabezado se repita al imprimir.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Las tablas de maquetación confunden a los lectores de pantalla (anuncian semántica de tabla de datos) y son inflexibles. Use CSS Grid/Flexbox para maquetación de página.
La semántica adecuada de tabla (<th scope>, <caption>, secciones) es lo que hace que las tablas de datos sean utilizables para usuarios de lectores de pantalla — vinculan cada valor con sus encabezados de fila y columna.
Reserve <table> estrictamente para datos tabulares genuinos.