Ejercicio de HTML: crear un horario de clases accesible

Este ejercicio de HTML de horario de clases te propone organizar un calendario semanal sin perder la relación entre días, horas y asignaturas.

Enunciado

Crea una tabla para dos días y dos franjas. Incluye un título y usa encabezados de fila y de columna. Marca una clase sin asignar con texto comprensible.

Solución comentada

Prueba el fragmento dentro del cuerpo de un documento HTML. Incluye la etiqueta viewport si vas a comprobar el resultado en móvil.

<table>
  <caption>Horario del grupo de iniciación</caption>
  <thead>
    <tr>
      <th scope="col">Hora</th>
      <th scope="col">Lunes</th>
      <th scope="col">Miércoles</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">09:00</th>
      <td>HTML</td>
      <td>CSS</td>
    </tr>
    <tr>
      <th scope="row">10:30</th>
      <td>Práctica de formularios</td>
      <td>Sin clase</td>
    </tr>
  </tbody>
</table>

Caption identifica la tabla. Los encabezados de fila permiten asociar cada franja con sus clases. Escribe «Sin clase» para que la ausencia de actividad no dependa de un color o de una celda vacía.

Cómo comprobar tu solución

1. Lee cada fila en orden y comprueba que las clases corresponden al día correcto.
2. Añade una tercera franja con dos celdas de datos.
3. Inspecciona la tabla con una tecnología de asistencia si está disponible.

Reto adicional

Añade un día nuevo y adapta todas las filas. Si la tabla se vuelve ancha, colócala en un contenedor desplazable y comprueba que siga siendo legible en móvil.

Repasa los conceptos en el tutorial de MasterCodePro.