Aprendizaje activo: colgroup y col
Ahora es el momento de intentarlo tú mismo.
A continuación puedes ver el horario de una profesora de idiomas. El viernes tiene que enseñar holandés todo el día, pero también enseña alemán durante unas horas los martes y los jueves, y quiere resaltar las columnas que contienen los días que da clase.
Recrea la tabla a partir de los pasos siguientes.
- Primero, haz una copia local de nuestro archivo timetable.html en un directorio nuevo de tu ordenador. El HTML contiene la misma tabla que viste arriba, menos la información de estilo de las columnas.
- Añade un elemento <colgroup> en la parte superior de la tabla, justo debajo de la etiqueta <table>, en la que puedes añadir tus elementos <col> (consulta los pasos restantes a continuación).
- Las dos primeras columnas deben dejarse sin estilo.
- Añade un color de fondo a la tercera columna. El valor para tu atributo de style es background-color:#97DB9A;
- Establece un ancho distinto para la cuarta columna. El valor de tu atributo de style es width: 42px;
- Añade un color de fondo a la quinta columna. El valor para tu atributo de style es background-color:#97DB9A;
- Añade un color de fondo diferente más un borde a la sexta columna, para indicar que este es un día especial porque da clases de un idioma diferente. Los valores para tu atributo de style son background-color:#DCC48E; border:4px solid #C1437A;
- Los últimos dos días los tiene libres, así que no establezcas ningún color de fondo, pero sí un valor para el ancho; el valor para el atributo de style es width: 42px;
Mira cómo sigue en el ejemplo. Si te encallas o quieres verificar tu trabajo, puedes encontrar nuestra versión en GitHub como timetable-fixed.html (o también puedes consultarlo en vivo).