Ejercicio: Tablas

⏱ 25 minutos
📶 Nivel: principiante

Objetivo

Crear una tabla de horario (o de cualquier tema que te guste) que use encabezados accesibles, secciones, celdas combinadas y estilo básico.

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

Crea tabla.html con el esqueleto completo y un title.
Escribe un <h1> con el tema de tu tabla (por ejemplo, «Mi horario semanal»).
Crea la tabla con <caption>, <thead>, <tbody> y <tfoot>.
En <thead>, usa <th scope="col"> para al menos 3 columnas (por ejemplo: Hora, Materia, Salón).
Agrega al menos 3 filas de datos en <tbody> y usa <th scope="row"> en la primera celda de cada fila.
Combina dos celdas con rowspan o colspan (por ejemplo, una clase de dos horas seguidas).
Agrega una fila en <tfoot> con una nota o un total.
Pega el estilo básico de tablas dentro de un <style> en el <head> y comprueba que se vea ordenada.

💡 Pista 1: mi tabla se ve torcida

Cuenta las celdas de cada fila. Si usas rowspan, la fila de abajo debe tener una celda menos, porque esa posición ya está ocupada. Si usas colspan="2", esa celda cuenta como dos.

💡 Pista 2: no veo los bordes

El navegador no dibuja bordes si no se lo pides. Agrega el bloque de estilo de la sección «Estilo básico de tabla» de la lección.

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista.

Tu código HTML (el archivo completo)

✅ Ver una solución de ejemplo

Intenta resolverlo antes de mirar. Tu versión puede ser distinta y también correcta.

tabla.html

<table>
  <caption>Mi horario del lunes</caption>
  <thead>
    <tr>
      <th scope="col">Hora</th>
      <th scope="col">Materia</th>
      <th scope="col">Salón</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">8:00</th>
      <td rowspan="2">Matemáticas</td>
      <td>A-12</td>
    </tr>
    <tr>
      <th scope="row">9:00</th>
      <td>A-12</td>
    </tr>
    <tr>
      <th scope="row">10:00</th>
      <td>Historia</td>
      <td>B-03</td>
    </tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">Salida a las 11:00</td></tr>
  </tfoot>
</table>

💡 🏁 Reto extra (opcional)

Agrega una segunda tabla en la misma página con otros datos (por ejemplo, precios de un menú) y colócala debajo de la primera con un <h2> que la presente. ¿Qué caption le pondrías a cada una?