Tablas bien hechas: thead, tbody y scope

Las tablas tienen mala fama porque durante años se usaron para lo que no son (maquetar páginas enteras). Pero para su verdadero trabajo — datos tabulares: precios, horarios, comparativas — siguen siendo la herramienta correcta, y hacerlas BIEN te diferencia de inmediato.

La anatomía completa

<table>
<thead>
  <tr>
    <th scope="col">Curso</th>
    <th scope="col">Nivel</th>
    <th scope="col">Duración</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Maquetación Web</th>
    <td>Desde cero</td>
    <td>21 módulos</td>
  </tr>
  <tr>
    <th scope="row">JavaScript</th>
    <td>Desde cero</td>
    <td>18 módulos</td>
  </tr>
</tbody>
</table>

• <table> envuelve todo; <tr> es cada fila (table row).
• <thead> agrupa la fila de encabezados; <tbody> agrupa los datos.
• <th> es una celda de ENCABEZADO; <td> una celda de DATOS.

scope: el GPS del lector de pantalla

El atributo scope le dice al lector de pantalla qué gobierna cada encabezado: scope="col" = "soy el título de esta columna", scope="row" = "soy el título de esta fila". Con eso, un usuario ciego que navega hasta una celda escucha "Maquetación Web, Duración: 21 módulos" en vez de "21 módulos" sin contexto.

Así se ve renderizada (el CSS de las tablas lo afinaremos en el módulo 3 — por ahora, nota que el navegador ya distingue los th en negrita):

<table>
<thead>
  <tr><th scope="col">Curso</th><th scope="col">Nivel</th><th scope="col">Duración</th></tr>
</thead>
<tbody>
  <tr><th scope="row">Maquetación Web</th><td>Desde cero</td><td>21 módulos</td></tr>
  <tr><th scope="row">JavaScript</th><td>Desde cero</td><td>18 módulos</td></tr>
</tbody>
</table>

body { font-family: system-ui; padding: 24px; color: #1e293b; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #cbd5e1; padding: 8px 12px; text-align: left; }
thead th { background: #f1f5f9; }

Mini-reto

Construye la tabla de tu horario semanal: columnas para los días, filas para las franjas horarias. Usa scope="col" en los días y scope="row" en las horas. Cinco minutos y tendrás la estructura de tabla grabada para siempre.

Qué sigue

Las próximas dos lecciones cubren el HTML que más interactúa con los usuarios: formularios. Inputs, labels y la validación que el navegador te regala sin una línea de JavaScript.