¿Cuándo usar una tabla?
Las tablas son para datos tabulares: información que solo cobra sentido cruzando filas y columnas (un horario, una comparativa de precios, una tabla de clasificación). Si quitas las líneas y los datos se desordenan, era una tabla.
⚠️ Trampa clásica: usar tablas para maquetar el diseño de la página. Eso era de los 2000; hoy para colocar cosas en pantalla están CSS Grid y Flexbox. La tabla es para datos, no para el layout.
La anatomía de una tabla
<table>
<caption>Notas del primer trimestre</caption>
<thead>
<tr>
<th scope="col">Alumno</th>
<th scope="col">Matemáticas</th>
<th scope="col">Lengua</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Ana</th>
<td>9</td>
<td>8</td>
</tr>
<tr>
<th scope="row">Luis</th>
<td>7</td>
<td>9</td>
</tr>
</tbody>
</table>
Pieza a pieza:
<table>: contenedor de toda la tabla.<caption>: el título de la tabla. Va justo después de<table>y los lectores de pantalla lo anuncian antes de leer los datos.<thead>: agrupa la fila (o filas) de encabezado.<tbody>: agrupa las filas de datos.<tr>(table row): una fila.<th>(table header): una celda de encabezado. Por defecto va en negrita y centrada.<td>(table data): una celda de datos normal.
scope: el atributo que hace la tabla accesible
El atributo scope en un <th> indica a qué se aplica ese encabezado:
scope="col": encabeza una columna (lo típico en la fila superior).scope="row": encabeza una fila (la primera celda de cada fila, como el nombre del alumno).
Esto es clave para la accesibilidad: cuando alguien con lector de pantalla está
en la celda "9", el lector puede anunciar "Ana, Matemáticas: 9" porque sabe que
"Ana" es el encabezado de su fila y "Matemáticas" el de su columna. Sin
scope, solo oiría "9", sin contexto.
Una tabla bien marcada (con
caption,thead/tbodyyth scope) se entiende aunque la escuches a ciegas. Si pasa esa prueba, la tienes bien. Ese es el objetivo.